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認証ができるはず。