はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、Bubbleのように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。
これまでのチュートリアルをやってみた記事
-
Saving data
- 位置情報をDBへ登録して、地図にマーカーを表示
- データのInsert
- 地図
-
Building a sign-up system
- ユーザー登録とログイン、ログオフ
-
Saving and modifying data
- SNSっぽい、投稿といいね
-
Repeat Groupの利用 - データのInsert、Update
-
Building a slideshow
- スライドショー形式のアプリ
-
Pluginの利用
-
Sending data to pages
-
Data（Things、DBのデータ）の共有
-
-
Using conditions
- 条件の利用
-
Defining a field as a list of things
- リストの利用
-
Using external APIs
- Pluginの利用による、外部APIの呼び出し
-
Using the chart element
- Pluginの利用による、グラフの描画
-
Login with Facebook ＜＜今回＞＞
- Facebookアカウントを使ったログイン
チュートリアルの記録
チュートリアルを選択
ログイン後のトップページ
＞ 左メニューのAcademy
＞ Learn your way
＞ By watching
＞ Interactive lessons
＞ Using the chart element
今回のサブタイトルは、「Allow users to login/sign up with Facebook」です。
タイトルそのままですね。おそらく ソーシャルログイン とか サードパーティ認証 と言われるものでしょう。
例えば私が作ったシステムに、facebookのログインIDとパスワードを教えるなんて、流出が怖すぎますよね。なので安全な方法で使える仕組みを考えた偉い人がいます。それを利用するという話です。
じゃさっそくいきます！
その前に契約の話
なんか背後に、プランが更新されるみたいなのが出てるんですけど・・！怖っ！purchase（購入）っていう単語もチラっと見えるし、何をRemindしてくれてるのか。
手前のダイアログを動かせないし、"Start"ボタンも押せない。バグか。
出せた！というか手前のウィンドウを非表示にできた！
F12のデバッガで、手前のウィンドウのstyleで display:none にして非表示にする荒業。
あれ、無料プランのはずなんだけどどういうことだろう。そして今日の日付は10/25。月が0から始まるから+1しないといけない、JavaScriptのあるあるバグのような気がしますねｗ
とりあえず「Personal」から「Starter」へのアップグレードは、今の使用量だとしても必要ないんだけど、そもそも「Personal」すら必要ないので、調査。チュートリアルから外れそうだけど、大事なことなので。いったん"Dissmiss"。チュートリアルも停止。
https://bubble.io/pricing
料金体系はこれ。＄29のPersonalから、＄32のStarterになるよとのことでしたが、Personalがない。
↑はアプリのトップ画面。すでにFree planで１つある状態でしたが、"Create an app"で、もう１つ作ったところです。"Starter plan"になってました。２つ目のアプリは、Personalプランで、２週間無料のあと、＄29になるんですかね。そしてそれが一定期間経つと自動的にStarterプランになるという感じでしょうか。
チュートリアルによって２つ目が自動的に作られたので、この"Starter plan"が発動して、メッセージが出たようです。まぁ最悪でも29ドル。もしそうなったら誰かのお役に立つための人柱となりましょう。
作ってみたtest1は削除し、様子を見ます。
ちなみにチュートリアル中にトップ画面を見ても、チュートリアルのアプリは存在しないし、終わったらたぶん消えてます。
さて気を取り直して、チュートリアルをもう一度始めます！
Facebookプラグインをインストール
Facebookのプラグインを追加。常に成長を続けるというのは、開発が続けられているんでしょうかね。
Bubble社製でした。
インストール画面に、Plugin pageというリンクがあって、そこで詳細が見られます。
どうやら、「ポストの閲覧」とか「いいね」、「投稿」などもできるようです。
インストールすると、接続用のいろいろ設定画面。このチュートリアルでは、ここは入力してくれるそうです。（本来は、Facebookのどこからか、入手しないといけないんですね）
サインインボタンを追加
"Facebookでログイン"のボタンを追加するだけ。
ログイン情報を表示
グループを追加して、textを置き、Dynamic dataで "Current User's Facebook's First name"。
つぎに"Last name"も追加。
画像も"Current User's Facebooks Profile picture"で。
見た目はここまでで、ログインボタンに戻って、処理を入れます。
ログインボタン押下時の処理を追加
"action menu"の中から、"Account"＞"Signup/login with a social network"。このメニューは前からあったのか、プラグインをインストールしたから出たのかわかりませんでしたが、第２回目のチュートリアルの記事でログインがあったので見返してみたら、もともとありました！
"OAuth provider"でFacebookを選びます。たぶんこれは、インストールしないと出てこないやつかと。
わっ！これだけ！簡単。
ログアウトボタンを追加
ボタンを追加して、すぐさまWorkflowへ。
"Account"＞"Log the user out"を選択。
で、これだけ！楽！
わーもうおしまい。プレビュー！
プレビューで動作確認
プレビューを起動すると、画面上部にふわっとメッセージが出る。
日本語でも意味が分からないけどまぁいいか。
ログイン！
ご利用いただけないのかいっ！
でもメッセージは、facebook.comから来てるので、アクセスはできているみたい。
閉じるを押すと、生のJSONが表示されました。OAuth Providerのステータスがみつからない（？）。自動的に入れてくれたやつが、もう有効期限切れみたいになっているのかもしれません。
- ログインボタンを押すと、Facebookに飛んで、
- Facebook上でログイン処理が行われ、
- Facebookが「ログインOK」というお墨付きを発行し
- アプリがお墨付きをゲットし、アプリにログインできたことにする
- アプリはそのお墨付きを使って、Facebookから情報をもらう
という流れだったはずです。
まぁ今回、どうしてもログインしたいわけではなくて、やり方を学ぶことが目的なのでここまでにしましょう。
おわりに
ソーシャルログイン は、ユーザーは、IDやパスワードを入れずボタンを押すだけなのでかなり簡単です。そしてBubbleでは構築する人も、プラグインを入れるだけなので簡単。プラグインの構築者が、OAuthの機能を実装してちょっと苦労している、ということでした。
また今回はFacebookでしたが、LINEやYahoo!、Google、Xなどもほぼ一緒でしょう。でも、OAuth認証のことを少しは知らないと、ページ遷移とか、トラブルがあったときに対応しようがないかもしれませんね。
それと最初に出た契約関連。これははっきり言って、めんどくさいです。エンジニアはたぶん嫌いな人が多い。でもBubble(に限らず)構築者は、構築の依頼者からお金をもらって契約もしないといけないので、ここは正しく理解しておかないといけないですね。落ち着いて見てみれば難しくはないはずなので、やっつけで解決せずに見てみましょう。
では、よきBubbleビジネスライフを！