皆さんこんにちは！Ryoです(https://twitter.com/Ryo_apaxnc)
普段は18歳の高専生として勉学に励みつつNoCodeツール「.bubble」のエンジニアとして受諾開発や、インターン業務等を行っています。
今回は.bubbleに様々あるプラグインといういわば拡張機能の中でも、GoogleログインやFacebookログインと言ったソーシャルログイン機能を.bubbleに搭載する方法についてお届けしていこうと思います。
ソーシャルログインとは
NoCodeエンジニアになりたくてコードは触ったことがないけど挑戦してみる！という人がまず初めにぶつかる壁「専門用語がわからない」。
こちら僕が実際に.bubbleで制作したカメラ専門の絶景SNSサービス「Viewty」(https://viewty-superb.com)のログイン画面です。
この画面の右側にGoogleアカウントでログインというボタンがありますが、こんな感じで他のウェブサービスのアカウント情報を利用して自分のサービスのアカウント登録・ログイン処理をすることをソーシャルログインといいます。
このソーシャルログインはユーザーにメールアドレスやパスワード、必要な場合は氏名や生年月日といった情報入力を要する自身のアカウント登録作業をせずともアカウント登録ができてしまうユーザーにとってはなんともありがたいものです。
ユーザーにサービスの使いやすさを感じてもらうには是非とも搭載したい機能ですが、実際の.bubbleの設定画面をみてみると…？
う〜ん…何から設定すればいいものやら…意外と挫折する人が多いんです
でもご安心ください！今回このソーシャルログインをFacebookログインを例として、様々なソーシャルログインを実装できるよう注意点なども交えながらできるだけ詳しく説明していきます！
ソーシャルログイン 実装編「プラグインインストール」
それでは早速自身のWebサイトにFacebookログインを実装していきましょう！
まずは.bubbleエディタで実装させたいソーシャルログインのプラグインをインストールしていきましょう！
-1. .bubbleエディタからPluginタブへ
こちらのPluginタブにて現在のサービスにインストールしているプラグインを一覧で見たり、各プラグインの接続設定や設定方法の確認などができます。
-2. 右上の「+Add plugins」ボタンよりFacebookプラグインをインストール
-3.facebookを検索しインストール
Facebookログイン実装のプラグインの目印はプラグインの右側の作成者欄がby Bubbleになっていることです。こちら.bubble公式から出ているプラグインの印です。
installボタンを押したら下のDONEを押してプラグイン管理画面にいきましょう！続いてFacebook接続編にまいります！
ソーシャルログイン実装編「Facebook接続」
現在Facebookプラグインの設定画面は上のようになっていると思います
ここから.bubbleエディタと同時並行で「Developper Console」というサイトを使っていきます。こちらは各ソーシャルログイン先ごとに別サイトがあります。
先に予告しておきますと今回Facebookログイン実装は3つの項目の入力のみです
① AppIDを入力
② App Secretを入力
③ redirect URLにチェックをつけてDevelopper Consoleに入力
以上3点です。
では早速いってみましょう！
-1.Developper Consoleを開く
Google Chromeなどのブラウザにて「Facebook Developper Console」と検索します。今回はこちらのリンクからもDevelopper Consoleに飛べるようにしておきますね
今回検索した「Facebook Developper Console」のFacebookの部分を任意のサービスに変えることで他のサービスのDevelopper Consoleにもアクセスできます！(LINEとかGoogleとか…)
Developper Consoleを開くとFacebookの場合初期の画面はこのような感じになっていると思います。(背景は一定時間で変わる仕様になっていると思うので違っても慌てないでください)
そうしましたら右上のヘッダーメニューのログインをクリックです。すでにFacebook Developper Consoleにアクセスしたことがある方はここがマイアプリになっていると思います。
マイアプリをクリックすると次のような画面が出てきます！ここでFacebookのビジネスアカウントが必要になりますので作ってない方はここでアカウント作成をしましょう！
アカウントが作成できたら、再度Developper Consoleにログインしてください
Facebookアカウントは作れたけど普通のFacebookのページにしか行かないよ！という方はhttps://developers.facebook.com/apps/で検索してみてください！
先ほどまでログインだったボタンがスタートガイドに変わっていると思います。そうしましたらスタートガイドの指示通りにアカウント認証を行ってください。
アカウント認証が済んだらこのようなポップアップが表示されます。
ドキュメントをチェックして何ができるのか学んでもいいのですが、今回はソーシャルログインを実装するだけですので最初のアプリを作成をクリックです。
すでにFacebookのアカウントがあるよという方はDevelopper Consoleからマイアプリをクリックするとこのような画面になると思いますので、右上のアプリを作成をクリックです。
どちらもアプリを作成をクリックすると
このようなポップアップが出てきます。
今回はFacebookログインを実装しますので上から3つ目のコネクテッドエクスペリエンスを構築にチェックをつけて次へ
次にこのようなポップアップが出現します。ここにFacebookログインを実装させたい.bubbleのサービス名とご自身のメールアドレスを入力します。
セキュリティチェックを済ませると…
こんな感じの画面が出てきます。そうしましたら右上のFacebookログインの設定ボタンをクリック
次にこんな画面になると思いますが、こちらクイックスタートと書いてありますが、このクイックスタートあくまでYESコード向けのクイックスタートになっていますので、NoCodeでは無視します
それではいよいよ.bubbleエディタとの接続設定です
-2. .bubbleエディタとDevelopper Consoleを接続する
ではまず左のメニューバーから設定→ベーシックをクリックします
こちらの上に記載されているアプリIDとapp secretをメモしておきましょう。こちらあとで.bubbleエディタに記入します。
下にあるアプリドメインの項目に「bubbleapps.io」と入力しましょう。.bubble側で有料課金をして独自ドメインを登録している場合は、そちらのドメインを入力して問題ありません。
入力が済みましたらしたの変更を保存ボタンを押してください(こちらのボタンを押さないと入力したアプリドメインなどが保存されませんので注意してください)
そうしましたら一旦.bubbleエディタに戻ります
.bubbleのFacebookプラグインの設定画面にいきましたら、App ID/APIKeyにDevelopper Consoleで先ほどメモしたApp IDを入力、App SecretにもDevelopper ConsoleのApp Secretを入力してください。
この時、上と下に2つApp IDとApp Secretの設定項目があることに気づく方がいるかと思いますが、こちら上はサイトを公開した時の本番環境の設定項目。したの- dev.とある方は.bubbleエディタでPreviewするときのテスト環境の設定項目です。こちらは面倒ですが両方とも設定しておくことをおすすめします。
続いてredirect URLの設定にまいります
.bubbleプラグイン設定の本番環境とテスト環境の間にredirect URLと書かれたURLがあると思います。こちらのURLをDevelopper Consoleに入力するのですが、redirect URLの右側に見えづらいですがチェックボックスがありますのでこちら忘れずにチェックを入れてURLをコピーしておきましょう！
コピーしましたらFacebook Developper Consoleに戻り、メニューバーからプロダクト→Facebookログイン→設定にいきます
このような画面が表示されたら有効なOAuthリダイレクトURIという項目に先ほどコピーしたredirect URLを貼り付けます。その後の変更を更新も忘れずに。
埋め込みブラウザーOAuthログインにもチェックを入れて「はい」にしておいてください
ここまでの設定が終わりましたら、一番下のリダイレクトURI検証ツールに先ほど入力したredirect URLを入力して設定が正常に行えているかのテストを行ってください。
このような表示が出たら.bubbleとFacebookの接続設定は終了です。違う表示が出たらここまでの内容を確認してみてください。
ソーシャルログイン実装編「Facebookログイン」
ここまでの内容ができた方はいよいよ.bubbleエディタにFacebookログインボタンを作成していきます。
.bubbleエディタにボタンを作成しFacebookでログインと記載します
そうしましたらこちらのボタンにワークフローを作成し、
Click here to add an actionからAccount→Signup/login with a social networkをクリックしましょう。
OAuth providerにFacebookを設定したらこれでFacebookソーシャルログインの完成です！
Previewにてテストをして無事Facebookログインができれば、Facebookログインの実装が完了しました！お疲れ様でした。
Previewの際、Facebookログインの後にポップアップを表示させたりページ遷移をするとわかりやすいかもしれません。
あとがき
今回のFacebookログインの設定は以上です。
似たような流れでできるソーシャルログインが.bubbleプラグインには、LINEやGoogle,Instagramなどなど僕が確認している限り現在19個存在します。
今後こちらのプラグイン紹介をシリーズ化してコツコツ投稿していこうと思っていますが、ソーシャルログインが好評でしたら他サービスのソーシャルログインの違いの説明などもするかもしれません。
今後の紹介して欲しい.bubbleのプラグインや機能等ありましたら、僕のTwitterのDM等にコメントいただけますと幸いです。
