bubbleで作るWebアプリにAuth0を使ってログインできるのか

bubbleで作るWebアプリにAuth0を使ってログインできるのか

Clock Icon2021.10.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Bubbleというノーコードツールを使って社内用途に使うWebアプリを作れないか検証しているのですが、 認証に関してパスワード認証だけでなく、ソーシャルログインやADを繋いでログインするなども考慮に入れています。

本記事ではAuth0を使ってbubbleにログインする方法を調べたのでやり方を記載しようと思います。

Auth0のアプリケーションを準備

Auth0のダッシュボードにログインし、Regular Web Applicationでアプリを作成します。

Client ID、Client Secret はのちに必要なので控えておきます。

コネクション(ログイン方法)を作成後、アプリケーションの設定画面で有効にします。

今回は Auth0のDatabase接続, Facebook, google-oauth2のソーシャル接続を有効にしました。

Bubbleでapp準備

Bubbleにサインアップした後、appを作成します。

作成が完了するとアプリの編集画面に遷移します。

デフォルトでアプリのテンプレートが当たっていますが、今回はStart with a blank pageをクリックしてまっさらな状態で試します。

アプリのコンポーネントはドラッグアンドドロップで配置できます。

テキストとボタンを配置してみました。

※ ページの右上にあるPreviewボタンを押すと現在編集しているアプリをプレビューできます

Auth0に接続できるようにする

先ほど配置したボタンを押したらAuth0のログイン画面に遷移し、ログインを行う というシナリオでやっていきます。

これを行うには、Auth0のAPIにBubbleから接続できるようにしないといけませんでした。

そこで必要なのはBubbleが提供しているAPI Connectorというプラグインになります。

左メニューのPliginsをクリックし、Add Pluginsボタンを押します。

APIと検索し、API Connectorをインスコします。

Auth0 API接続設定

API Connectorがインストールできたら、Auth0に接続するための設定を行なっていきます。

Add Another APIをクリックし、設定画面を出します。

設定内容ですが、

  • API Name
    • API名を記入
  • Authentication
    • OAuth2 User-Agent Flow を選択
  • App ID
    • Auth0アプリケーションのClient ID を記入
  • App Secret
    • Auth0アプリケーションのClient Secret を記入
  • Dev. App ID
    • Auth0アプリケーションのClient ID を記入 (開発環境用です)
  • Dev. secret
    • Auth0アプリケーションのClient Secret を記入 (開発環境用です)
  • Scope
    • openid email profile を記入。必要に応じて追加しましょう。
  • Authentication goes in the header
    • チェックを入れる
  • Use a generic redirect URL
    • チェックを入れる
  • Header key
    • Authorization: Bearer
  • Login dialog redirect
    • https://<<Auth0テナントのドメイン名>>.auth0.com/authorize
  • Access token endpoint
    • https://<<Auth0テナントのドメイン名>>.auth0.com/oauth/token
  • User profile endpoint
    • https://<<Auth0テナントのドメイン名>>.auth0.com/userinfo
  • User ID key path
    • sub
  • User email key path
    • email

とします。

Auth0を使ってログインした後、ログインユーザーの名前などをアプリで取得して表示したい場合は、Call部分のexpandを押して設定していきます。

GETで、https://<<Auth0テナントのドメイン名>>.auth0.com/userinfoを入力します。

Initialize callを押して設定を保存する必要がありますが、以下のように失敗します。

これを行うにはまずAPIをランモードでテストする必要があるとのことでした。

のちにBubbleアプリのワークフロー設定を行うので、それが終わった後テストすることにします。

You haven't tested this API in run mode and authenticated with Auth0 API yet. You need to do this first to setup calls and to test the URLs and keys.To do this, setup a login workflow, run your app in run mode (with debug_mode=true in the URL) and authenticate with the service. Once done, your access token will be used to initate the API calls and the API will be marked as valid.IMPORTANT: make sure not to have a change page action in the workflow you use to authenticate while testing

Auth0アプリケーションの設定追加

Auth0で作ったアプリケーションの Allowed Callback URLs、Allowed Web Originsの設定をします。

リダイレクトのURLは、BubbleのAPI Connectorで設定したUse a generic redirect URLに記載されているURLをコピーして設定します。

Web OriginsのURLは, https://<<Bubbleのアプリ名>>.bubbleapps.io です。

Bubbleの画面設定

テキストとボタンを配置していましたが、Bubbleでボタンを押した時などに実行する処理をworkflowという機能を使って設定できます。

今回はボタンを押した時にAuth0のユニバサルログイン画面に遷移するようにしてみましょう。

ボタンのコンポーネントをダブルクリックすると設定メニューダイアログが表示されるので、そこにあるStart/Edit workflowをクリックします。

ボタンをクリックした時に、AccountにあるSignup/login with a social networkを行うようにします。

OAuth Providerには、先ほどAPI Connectorで作成したAPI接続があるので選択します

Previewボタンを押して動作を確認していきます

※ ランモードで起動します。?debug_mode=true というパラメーターがつく

設定が正しければ、画面上のボタンを押すとAuth0のログイン画面が表示されるはずなので、ログインしてみましょう。

ログインが成功すると、Bubbleアプリに戻ってきます。

ここで初期化が成功しました というメッセージが表示されました。

You have successfully initialized the OAuth2 connection for API - Auth0 API. You can go back to the Editor and keep building!

これで前工程で失敗していたinitialize callが行えます。

API Connectorのinitialize call

API Connectorプラグインの設定画面に行き、initialize callを押してみます

先ほどログインしたユーザーの情報をAuth0のAPIから受け取れるので、SAVEボタンで保存します。

これを行うことによりログイン後のユーザー情報をBubbleのアプリ内で表示することができます。

ログイン後の画面にユーザー名を表示させる

せっかくなので、ログイン後のユーザー情報を表示させてみます。

APIから受け取った情報を使用することができますので、早速設定してみましょう。

配置しておいたテキストをダブルクリックし、立ち上がった編集ダイアログのinsert dynamic dataをクリックします。

Get data from an external APIというのを選択することで、APIから受け取れたデータを使用できます。

作成したAPIを選択しましょう。

moreというところをクリックすると、どのデータを使うか選択することができます。

表示させたい情報をクリックしましょう。

nicknameを選択すると、アプリの編集画面は上記画像のようになります

設定後、Previewボタンを押して画面を表示すると、テスト と表示されていた部分が Auth0に設定されているユーザーのnickname に変わって表示されるようになりました。

まとめ

BubbleとAuth0を連携してログインするところまで行ってみました。

Bubbleを使うとコードを書かなくてもある程度のアプリを作れるので非常に便利だなと思います。

今回はログインだけでしたが、ユーザーがログインしているかどうかの判定やページリダイレクト、Auth0からのログアウトなどもコードを書かずに実装できるので別の機会に紹介したいと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.