Bubbleのチュートリアル１０：Login with Facebook

# はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、`Bubble`のように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。

https://bubble.io/

## これまでのチュートリアルをやってみた記事
1. [Saving data](https://qiita.com/yo16/items/d77a5cf8df18419b079e)
    - 位置情報をDBへ登録して、地図にマーカーを表示
    - データのInsert
    - 地図
2. [Building a sign-up system](https://qiita.com/yo16/items/1ac9467ad5bb5ed6ba52)
    - ユーザー登録とログイン、ログオフ
3. [Saving and modifying data](https://qiita.com/yo16/items/449b9e0b15ff76ec9584)
    - SNSっぽい、投稿といいね
    - `Repeat Group`の利用
    - データのInsert、Update
4. [Building a slideshow](https://qiita.com/yo16/items/c015c2097ae53055bca0)
    - スライドショー形式のアプリ
    - `Plugin`の利用
5. [Sending data to pages](https://qiita.com/yo16/items/0b0a847b0e4fa382e07c)
    - `Data`（`Things`、DBのデータ）の共有
6. [Using conditions](https://qiita.com/yo16/items/57b9bef94122c59785db)
    - 条件の利用
7. [Defining a field as a list of things](https://qiita.com/yo16/items/eda7b609d12ac16cb205)
    - リストの利用
8. [Using external APIs](https://qiita.com/yo16/items/b99810f8d0262b9d0a1c)
    - Pluginの利用による、外部APIの呼び出し
9. [Using the chart element](https://qiita.com/yo16/items/a19678a03b49b24456d6)
    - Pluginの利用による、グラフの描画
10. **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とパスワードを教えるなんて、流出が怖すぎますよね。なので安全な方法で使える仕組みを考えた偉い人がいます。それを利用するという話です。

じゃさっそくいきます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c012cbce-820b-4d07-702b-3c92ee76c5f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c6c97e1e-89a1-bc4b-1c6a-8dffbfa6aaa9.png)

## その前に契約の話
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a5ab9e93-e845-6fdb-27ff-44494244f165.png)
なんか背後に、プランが更新されるみたいなのが出てるんですけど・・！怖っ！purchase（購入）っていう単語もチラっと見えるし、何をRemindしてくれてるのか。

手前のダイアログを動かせないし、"Start"ボタンも押せない。バグか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3c00b982-61a9-c615-be5f-53cddacc1e1f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/0e33be51-0f35-a7be-3370-f3c5915a85f8.png)
出せた！というか手前のウィンドウを非表示にできた！
F12のデバッガで、手前のウィンドウのstyleで `display:none` にして非表示にする荒業。

あれ、無料プランのはずなんだけどどういうことだろう。そして今日の日付は10/25。月が0から始まるから+1しないといけない、JavaScriptのあるあるバグのような気がしますねｗ:bomb:

とりあえず「Personal」から「Starter」へのアップグレードは、今の使用量だとしても必要ないんだけど、そもそも「Personal」すら必要ないので、調査。チュートリアルから外れそうだけど、大事なことなので。いったん"Dissmiss"。チュートリアルも停止。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f54fd298-dd81-2b9c-fc7e-def82141ba17.png)
https://bubble.io/pricing
料金体系はこれ。＄29のPersonalから、＄32のStarterになるよとのことでしたが、Personalがない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/43c85600-09dd-4b84-6c10-18261f20edfd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/60b99eec-db42-5b5e-ff30-898ce0599f38.png)
↑はアプリのトップ画面。すでにFree planで１つある状態でしたが、"Create an app"で、もう１つ作ったところです。"Starter plan"になってました。２つ目のアプリは、Personalプランで、２週間無料のあと、＄29になるんですかね。そしてそれが一定期間経つと自動的にStarterプランになるという感じでしょうか。

チュートリアルによって２つ目が自動的に作られたので、この"Starter plan"が発動して、メッセージが出たようです。まぁ最悪でも29ドル。もしそうなったら誰かのお役に立つための人柱となりましょう。:angel:
作ってみたtest1は削除し、様子を見ます。
ちなみにチュートリアル中にトップ画面を見ても、チュートリアルのアプリは存在しないし、終わったらたぶん消えてます。

さて気を取り直して、チュートリアルをもう一度始めます！

## Facebookプラグインをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bafc75a2-1452-8745-48b2-f7b3fe80a237.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/962688e8-887a-0d25-d7ca-9a5c0b452b16.png)
Facebookのプラグインを追加。常に成長を続けるというのは、開発が続けられているんでしょうかね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/25295da2-7cc6-8b6b-bd87-193ceafdb33c.png)
Bubble社製でした。
インストール画面に、[Plugin page](https://manual.bubble.io/core-resources/bubble-made-plugins/facebook)というリンクがあって、そこで詳細が見られます。
どうやら、「ポストの閲覧」とか「いいね」、「投稿」などもできるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/789623e1-94d1-30f7-b3fa-e295e91e1338.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/fc3bbe27-efa5-3e7d-9dc6-60dac15811c1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bc4bcf4d-6d33-de46-52ca-a70550d63fe4.png)
インストールすると、接続用のいろいろ設定画面。このチュートリアルでは、ここは入力してくれるそうです。（本来は、Facebookのどこからか、入手しないといけないんですね）

## サインインボタンを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e07e8df6-fb88-1d60-71ba-e1406de9afb3.png)
"Facebookでログイン"のボタンを追加するだけ。

## ログイン情報を表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/02e8d0d4-0521-dca7-7dfa-8d0091540033.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b7bfcfa6-67be-0fa0-d526-fbacfeca7e5f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d3735a87-e353-cded-58c0-a2b1197dc4c1.png)
グループを追加して、textを置き、Dynamic dataで "Current User's Facebook's First name"。
つぎに"Last name"も追加。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ef810dc1-413b-9983-5893-fdb077fe34ff.png)
画像も"Current User's Facebooks Profile picture"で。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d5037dbd-5cdb-0c65-eaa7-720b627ad76c.png)
見た目はここまでで、ログインボタンに戻って、処理を入れます。

## ログインボタン押下時の処理を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/74b93765-4a87-4e12-cb8c-1f211d8e6818.png)
"action menu"の中から、"Account"＞"Signup/login with a social network"。このメニューは前からあったのか、プラグインをインストールしたから出たのかわかりませんでしたが、[第２回目のチュートリアルの記事](https://qiita.com/yo16/items/1ac9467ad5bb5ed6ba52#sing-up%E3%83%9C%E3%82%BF%E3%83%B3%E6%8A%BC%E4%B8%8B%E6%99%82%E3%81%AEworkflow%E3%82%92%E7%99%BB%E9%8C%B2)でログインがあったので見返してみたら、もともとありました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/85c7a73d-6e13-d77e-fc16-4b33b00b8f86.png)
"OAuth provider"でFacebookを選びます。たぶんこれは、インストールしないと出てこないやつかと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ffb51639-a79c-342f-aa4c-d1ed4b08ebf3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ff1d05cd-ba53-f3e4-7696-041edd27c4ca.png)
わっ！これだけ！簡単。

## ログアウトボタンを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/07788975-c2b7-0f95-5cd0-c351b0ceb67f.png)
ボタンを追加して、すぐさま`Workflow`へ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c866e824-6950-b0bd-d851-fbe2b992c035.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/0d9d6d54-6563-39b8-2ffd-9adf85ab63c8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b3c4396a-1246-0a32-e2ea-22fd28e0cdc3.png)
"Account"＞"Log the user out"を選択。

で、これだけ！楽！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/54939159-fc28-bb63-2da4-57de858030e2.png)
わーもうおしまい。プレビュー！

## プレビューで動作確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/96f8d1e3-ecdb-e0ec-27c3-3e0bd58bdb6b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/be8a4123-e142-fff7-c532-f02d6b06c740.png)
プレビューを起動すると、画面上部にふわっとメッセージが出る。
日本語でも意味が分からないけどまぁいいか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/896f24c8-6344-ba92-7986-8495017cbef1.png)
ログイン！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/95a80142-c12d-0897-4445-4bcd1ad96d12.png)
ご利用いただけないのかいっ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5f1ac265-0e10-7a50-6e07-610778c65ca6.png)
でもメッセージは、facebook.comから来てるので、アクセスはできているみたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/55208832-695e-49a1-3b0e-1a86bae7d6af.png)
閉じるを押すと、生のJSONが表示されました。OAuth Providerのステータスがみつからない（？）。自動的に入れてくれたやつが、もう有効期限切れみたいになっているのかもしれません。

1. ログインボタンを押すと、Facebookに飛んで、
2. Facebook上でログイン処理が行われ、
3. Facebookが「ログインOK」というお墨付きを発行し
4. アプリがお墨付きをゲットし、アプリにログインできたことにする
5. アプリはそのお墨付きを使って、Facebookから情報をもらう
という流れだったはずです。

まぁ今回、どうしてもログインしたいわけではなくて、やり方を学ぶことが目的なのでここまでにしましょう。


# おわりに
**ソーシャルログイン** は、ユーザーは、IDやパスワードを入れずボタンを押すだけなのでかなり簡単です。そしてBubbleでは構築する人も、プラグインを入れるだけなので簡単。プラグインの構築者が、OAuthの機能を実装してちょっと苦労している、ということでした。

また今回はFacebookでしたが、LINEやYahoo!、Google、Xなどもほぼ一緒でしょう。でも、OAuth認証のことを少しは知らないと、ページ遷移とか、トラブルがあったときに対応しようがないかもしれませんね。

それと最初に出た契約関連。これははっきり言って、めんどくさいです。エンジニアはたぶん嫌いな人が多い。でもBubble(に限らず)構築者は、構築の依頼者からお金をもらって契約もしないといけないので、ここは正しく理解しておかないといけないですね。落ち着いて見てみれば難しくはないはずなので、やっつけで解決せずに見てみましょう。

では、よきBubbleビジネスライフを！

# Next
[Bubbleのチュートリアル１１：Graduation lesson: a to-do app](https://qiita.com/yo16/items/dd7ec511db452f772d82)