見出し画像

【Auth0×Bubble】ソーシャルログインを実装する

たかし＠コードの書けないエンジニア

こちらの記事は「ソーシャルログイン実装編」です。Auth0での設定がまだお済みでない方は以下の記事から設定を完了させてください。

ここまで来た人は下のニコちゃんマークを確認した方ですね。よく見ると目をパチパチさせていて可愛いです。

Bubble側の設定

まずは「API Connector」をインストールします。PluginsのAdd pluginsから検索してインストールして下さい。１秒でインストールが完了しますが、ちゃんとインストールできているので安心してください。

次にAPI Connectorの設定を行います。黒塗りのところ以外は上記画像の通りに入力して下さい。API Nameはbubble内でAPIを使うときに出現する名前です。お好きな名前を入力してください。

黒塗り部分ですがApp ID(=Dev.App ID)とApp Secret(=Dev.secret)にはそれぞれ前の記事で作成したAuth0のApplicationのSettingsにあるClient IDとClient Secretを入力して下さい。Login dialog redirect / Access token endpoint / User profile endpoint にはDomainを入力してください。

 Name「API CALL」と書いてある枠が下の方にあるのでそれをexpandします。そして出てきた枠の中に上記画像の通りに入力して下さい。Nameの部分は自由に設定して大丈夫です。青枠部分には先ほどのDomainを入力します。以上がBubble側での設定です。お疲れ様でした。

Auth0側の設定

ApplicationページのSettingsに２つ情報を入力していきます

1. Allowed Callback URLs：API Connector内のUse a generic redirect URLに表記されているURL

2.Allowed Web Origins ： BubbleのページをPreviewした際のURLから「version-test?debug_mode=true」を削除したもの

3.その他
Token Endpoint Authentication MethodはBasicでもPostでも動作することを確認しています。デフォルトがPostなのでそのままにしておきます。
Application Logoは変更するとアプリのロゴが変更されるだけでログイン時の盾ロゴが変更されるわけではありません。

アプリページのConnectionsを開くとログインさせる方法を選択させることができます。ここにはAuth0と連携を済ませたSNSサービスが表示されます。今回はDatabase, Amazon, Google, Lineの４つを選択しました。

そして最後に「SAVE CHANGES」を押して完了です。お疲れ様でした。

ソーシャルログインを行う

普通のボタンを設置しworkflowに飛びます。AccountにあるSignup/login with a social networkを選択し、OAuth provider はAPI-(API名)にします。ここまで完了したらそのページをプレビューしましょう。（ブラウザがChromeならログイン情報が残ってしまって面倒なのでシークレットモードでプレビューするのがオススメです）

このようなページが出現すれば成功です。図のCrosselectに当たる部分はAuth0アプリの名前が表示されます。ソーシャルログインの下にあるメールアドレスとパスワードを要求するインプットは先ほどAuth0アプリのConnectionsにてDatabaseを選択したために表示されています。ソーシャルログインに関しては前回の記事で動作することが確認されていますので、今回はDatabaseの方でサインアップしてみます。detarame@detarame-mail.com と言うデタラメなメールアドレスを入力してサインアップしました。

するとプレビュー画面はただサインアップしただけなので変化ありませんが、DataのApp dataのUserにしっかりとデタラメユーザーが追加されていることを確認できます。

またAuth0側のUsers&Rolesにおいてもデタラメユーザーが追加されていることが確認できます。以上でソーシャルログインの実装は終了です。

終わりに

Bubbleのプラグインの中に「instagram」「facebook」「twitter」など様々なAPI活用プラグインが入っています。Auth0なんか使わなくてもソーシャルログインを実装することは可能です。しかしながら、登録経路に応じて設定が必要になってくるので煩雑です。Auth0はリダイレクトURL１つだけで全ての登録経路に対応でき、またプラグインもAPI Connector１つだけで済むのです。筆者が執筆現状Auth0のステマをしていないことを最後に誓って終了とさせて頂きます。ここまで読んで頂きまして有り難うございました。

Twitterをやっていますのでフォローお願いします
▶︎ https://twitter.com/NoCoderT