【No Code】BubbleでFacebookを使って認証する方法

1718 ワード
facebookログイン Bubble nocode facebookログイン テキストリンク

NoCodeウェブアプリ作成サービスのBubbleを使ってFacebook認証をしようとして手間取ったのでメモ。

参考

他のひとが図付きで解説している記事(英語)
https://forum.bubble.io/t/automatically-enter-current-user-s-location/15685

Facebook上の設定

まずFacebook上での設定を行う。

https://developers.facebook.com/apps/ にアクセスして、新しくアプリを登録する。

登録したアプリのページに「アプリID」「app secret」があるのでコピーする。UIが変わらなければ「設定」→「ベーシック」にあるはず。

Bubble上の設定

ここからBubble上での設定。

コピーしたアプリIDとapp secretをpluginsのFacebookの「App ID/API Key」「App Secret」に貼り付ける。

「Use a generic redirect URL(...)」にチェックを入れる。

「Use a generic redirect URL(...)」の...のURLをメモするかコピーする。(Chromeでは開発者ツールのElementタブ上でコピーできる。おそらく https://grab-a-beer.bubbleapps.io/api/1.1/oauth_redirect のはず)

再びFacebook上での設定

Facebookの登録したアプリのページから「プロダクト」→「Facebookログイン」の設定をクリックしてログイン機能を追加する。

設定の「有効なOAuthリダイレクトURI」にコピーしたURLをタイプするか貼り付ける。

「変更を保存する」ボタンをクリックする。(これをしないと反映されないので気をつける。自分はこれを忘れてエラーになり少し悩んだ)

再びBubble上での設定

ボタンを作り、Workflowから「Signup/login with a social network」を選び、「OAuth provider」に「Facebook」を選ぶ。

これで、ボタンをクリックしたらFacebook認証ができるはず。