Bubble

BubbleでFaceBookログイン機能の追加方法を解説

masahide

フィンランドへの移住を目指し、場所に縛られない働き方を模索中していたところ、NoCodeCampに出会い、朝活イベント毎日開催しています。 2022年3月よりコミュニティマネージャーとしてイベント運営にも携わっています。

スポンサーリンク

こんにちは!

WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。

2021年10月よりフリーランスになりました!

主な仕事内容

  • WEB制作(サーバー契約からデザイン、WordPressでの公開〜保守まで担当可能)
  • ノーコードツールを使ったWEBアプリ開発

今回はsign-up、log inの時に煩わしいメールアドレス入力やパスワード入力を省略できるSNSログイン(FaceBook)の設定方法について解説します。

ユーザービリティの向上に繋がるので、この機会に導入してみてはいかがでしょうか。

 

Meta for Developersの設定

新規アプリの登録

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

FaceBookログインを使う場合は、「生活者」を選択しましょう。

アプリの名前やメールアドレスを設定してアプリを作成します。

FaceBookログインの設定に進みます。

 

 

アプリID+シークレットキーをコピー

サイドバーの設定からベーシックに進み、アプリIDとapp secretをコピーしておきます。

注意ポイント

app secretは必ず表示ボタンを押してからコピーしてください。

Bubble側の設定

FaceBook Pluginsをインストール

Plugins -> Add plugins Facebookをインストール

アプリIDとapp secretを入力

先ほどコピーしてきたアプリIDとapp secretを貼り付けます。

アプリが開発テスト中の場合はApp ID/ API Key - devの方に貼り付けます。

よくわからなければ両方に入力しておいても問題ありません。

この時、Use a generic redirect URL (https://sociallogin-sample.bubbleapps.io/api/1.1/oauth_redirect)にチェックを入れておきましょう。

項目に不明点がある場合は、referenceを読むことで、理解が深まります。

masahide(筆者)
全部英語なんで解読が大変ですが。。。

https://manual.bubble.io/core-resources/bubble-made-plugins

そして()内のURLをコピーします。

このままでは、コピーできないので、デベロッパーツールを使用します。

WindowsであればF12キー、MacであればCommand+Option+iです。

Select an elementでテキストを選択し、コピーします。

Meta for Developersに情報追加

Meta for Developersに戻り、商品 -> Facebookログイン -> 設定から「有効なOAuthリダイレクトURI」にコピーしたURLを貼り付けます。

変更を保存を忘れずにクリックしましょう。

登録ボタンの配置

Bubbleに戻り、FaceBook登録ボタンを配置します。

Visual element からButtonを選択し、ドラッグドロップ

お好みでスタイルなど決めておきましょう。

 

WorkFlow設定

作成したボタンのAppearanceからStart/Edit workflow

Click here to add an action... -> Account -> Signup/login with social networkを選択

OAunth Provider にFacebookを選択

一応これでsign-up/log inをすることができますが、Userテーブルに情報を格納したいので、Step2にMake Change to Current userを追加します。

Change another fieldより登録したいフィールドを設定します。

※フィールドが無い場合は適宜追加しておきましょう。

今回はアイコン、名字、名前、名字+名前を登録できるようにしました。

名前を結合したい場合は:appendを使うことで文字結合することができます。

  • icon = Current User's Facebook's profile picture
  • first_name = Current User's Facebook's First name
  • last_name = Current User's Facebook's Last name
  • name = Current User's Facebook's Last name:append Current User's Facebook's First name

Previewにて確認

sign-up/log inできているか確認するために、text elementとImage elementを追加で配置します。

  • 名前:Current User's fist_name
  • 名字:Current User's last_name
  • 名字+名前:Current User's name
  • アイコン:Current User's icon

Previewからボタンを押してみて、自分のFaceBook情報が反映されているか確認しましょう。

うまくいかない場合の見直し箇所

Advanced Accessへ切り替え

2021年7月から仕様変更があったようで、Liveモードで使用する場合は、public_profileへのアクセス許可がStandard AccessではFaceBookログインが使えなくなりました。

設定からGet Advanced Accessに移動します。

public_profileのアドバンスアクセスを取得をクリック

基本設定から必要事項を入力します。

必要事項

  • プライバシーポリシーURL
  • 利用規約URL
  • カテゴリ
  • アプリの目的

変更を保存を押して、アプリレビュー -> アクセス許可からpublic_profileがAdvanced Accessに変更されていれば完了です。

App Secretキーの確認

BubbleのFaceBookプラグインに張り付ける App Secretキーをコピーするときに、表示せずに●●●●●●をコピーするとうまくいきません。

必ず表示させてからコピーしましょう。

masahide(筆者)
ここでちょっとはまりました💦

アプリタイプがインスタントゲームになっている。

ダッシュボードからFaceBookログインが選択できない場合は、アプリタイプを見直してみてください。

こちらのアプリタイプは後から変更することができないので、インスタントゲームやゲームを選択していた場合は作成し直しましょう。

まとめ

Ruby on RailsでもFacebookログインは実装したことがありますが、ノーコードBubbleを使うとかなりスピーディに実装することができます。

外部連携は少し難しいところがありますが、連携してしまえばできることがどんどん増えていくので、積極的に活用しましょう。

実装の流れ

  1. Meta for Developersにアプリ登録
  2. キーの取得
  3. BubbleにPlugin導入
  4. Pluginにキー入力

スポンサーリンク

-Bubble

© 2022 まさブログ Powered by AFFINGER5