皆さん、こんにちは！今回は、Auth0を利用して Bubble でSSOを実装する方法について、ご紹介したいと思います。
今では様々なサービスに利用されているシングルサインオン（SSO）ですが、開発者、ユーザーどちらにもメリットの大きい機能ですので、ぜひ使い方をマスターして実装をお試しいただければと思います！
- 1. SSOとは
- 2. Auth0のSSOのログインの方式と種類
- 3. 今回作成するSSOのイメージと流れ
- 4. Auth0の設定
- 5. 2つ目のアプリの作成と設定
- 6.動作確認
- 7.注意点
- 8.有料プラグインについて
- 9.まとめ
1. SSOとは
SSOとはシングルサインオン(Single Sign-On)の略称で、システム利用時のユーザー認証 (ログイン) を行うと、複数のシステムを利用開始する際に、都度認証を行う必要がない仕組みのことです。
例えばgoogleのアカウントでgmailにログインした後、他のサービス（googleカレンダーやgoogleドライブ）に再度ログインする必要なく利用ができると思いますが、これがSSOとなります。
これを利用することで、パスワード管理の手間が減り、すぐに別のサービスにアクセスができることから利便性が上がることがメリットです。
2. Auth0のSSOのログインの方式と種類
次にAuth0のSSOログインの方式と概要についてご紹介します。
Auth0のSSOログインの方式は全部で3つあります。
| 認証方法 | 概要 |
|---|---|
| ユニバーサルログインを使用したSSO | ユーザーが自分のIDを証明する必要があるたびに、アプリケーションはユニバーサルログインにリダイレクトされ、Auth0がユーザーのIDを保証するために必要なことを自動実行する方法。 |
| サービスプロバイダーが開始するSSO | サービスプロバイダにまず認証要求を行った際に、リダイレクトが行われIDプロバイダーに認証を行った後、ユーザーのIDを保証するために必要なことを自動実行する方法。 |
| IDプロバイダーが開始するSSO | IDプロバイダーに認証要求から承認までのIDを保証するために必要なことを実行したのちにサービスプロバイダにログインする方法。 |
今回はユニバーサルログインを使用したSSOを使って実際にSSOを実現する方法を一緒に作っていきたいと思います。
なお、これらのSSOの詳細については以下ドキュメントをご参考頂けますと幸いです。
3. 今回作成するSSOのイメージと流れ
今回はBubbleのアプリを2つ作成して、ユニバーサルログインを使用したSSOを実装していきます。
ただ実際にどのように裏で動いているかが概要説明だけでは分からないと思いますのでイメージと流れを改めて説明いたします。
アプリAへのログイン
①BubbleのアプリAにログイン
②Auth0の認証サーバーにリダイレクト
③Auth0の認証サーバーにてログイン
④SSO cookieの発行&BubbleのアプリAにリダイレクト
⑤④のリダイレクト時にIDトークン（アクセストークン）を発行
⑥アクセストークンを用いてユーザー情報を取得
⑦⑥のユーザー情報を用いてアプリAにログイン
アプリBへのSSOログイン
⑧BubbleのアプリBにログイン
⑨Auth0の認証サーバーにリダイレクト
⑩認証サーバにてSSOcookieを保持しているか確認
※ここでSSOcookieが確認できれば、認証画面は表示されず自動認証されます
⑪認証後アプリBにリダイレクトしてIDトークン（アクセストークン）を発行
⑫アクセストークンを用いてユーザー情報を取得
⑬のユーザー情報を用いてアプリBにログイン
全体としてこのような流れとなります。
ユニバーサルログインでは、初回認証時にSSOcookieを発行します。
別アプリでログインする際には、このSSOcookieを用いて認証サーバーが認証情報を自動確認することで
自動ログインを行うような流れを構築しています。
図で示すとこのような形となります。
ユニバーサルログインではこのSSOcookieが大切な役割となっています。
では早速実際に構築してみましょう。
4. Auth0の設定
ではまずAuth0の設定を行っていきましょう。
設定にあたり、Auth0のサインアップができていない方は以下の記事を参考に登録をしておきましょう。
blog.nocodelab.jp
4-1. アプリケーションの作成
アカウントの発行ができたら、アプリケーションを作成していきます。
ここで作成する Auth0 アプリに Bubble から接続を行うことで、SSO機能を利用することができるようになります。
まずはサイドバーからapplicationを選択し、右上のcreate applicationをクリック。
Nameに任意のアプリ名を入れて、Regular Web applicationsを選択し、create しましょう！
※今回は通常のWebアプリケーションであるため、こちらを選択します。
こちらのアプリケーションは利用するアプリによって作成するものを変えましょう。
以下簡単に説明させて頂きます。
Native ：携帯にインストールされているようなアプリケーションとの連携
Single Page Web Applications：ホームページやLP等Webページ等との連携
Regular Web Applications：サーバー上で利用される一般的なWebアプリとの連携
Machine to Machine Applications： バックエンドで実行されるサービスとの連携
詳細は以下をご覧いただければと思います。
アプリを作成したらBubbleの設定を行っていきます。
4-2. Bubbleアプリの作成とAPI connetorのインストール
ではBubbleのアプリを作成していきます。
各項目の質問に回答して
「create a new app」をクリック。
アプリを作成したら、早速API connectorをインストールします。
pluginのタブより「Add plugins」をクリック。
検索ボックスに「API」と入力すると、「API connector」が表示されますので、そちらを インストールしていきましょう。
インストールができたら、API connetorの設定をしていきます。
4-3. API connetorの設定
pluginタブより、インストールしたAPI connetorのページの「Add another API」をクリックしていきます。
ここでAuthenticationの「Oauth2 User-Agent Flow」を選択します。
これを選択することで、APIを利用する際にユーザーデータの受け渡しが可能になります。
今回はAuth0に登録されたユーザーデータを用いてSSOサインインを実行したいのでこちらの設定を進めていきます。
次にそれぞれ以下の項目を埋めていきます。
| 入力項目 | 値 |
|---|---|
| API Name | 任意のAPI名を入力。 |
| 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 |
なお、Auth0のclient ID、client Secret及びAuth0テナントのドメイン名はAuth0で作成したアプリのsettingページに記載されていますので、そちらをコピペしていきましょう。
実際に入力するとこのような形となります。
ここまでできればプラグインの設定は一旦完了です。
4-4. サインイン画面の作成
続いて、簡易的なログイン画面を作成していきましょう。
ボタン2つを配置して、それぞれサインイン、サインアウトとしましょう。
そして右上にテキストで「current user's email」を設定しておきます。 これはログイン後にユーザーがサインインできてるか画面上で確認するために配置しておきます。
次にサインイン、サインアウトのワークフローを設定していきます。
まずはサインインのbuttonからStart/Edit Workflowをクリックしましょう。
ここでは先ほどAPI connectorで設定したAPIを使ってサインインを実装します。
「click here add action」から「Account」→「Sign up/login with a social network」を選択。
API connectorで作成したAPI call名が選択できるので、そちらを選択しましょう。
これでサインインのワークフローの設定は完了です。
サインアウトのボタンはログアウトされるように設定しておきましょう。
これでアプリ側の設定は完了です。
4-5.Auth0アプリの設定
ではここまでできたら、再度Auth0のアプリに戻って設定値を入力していきます。
Applicationsから作成したアプリを選択して、下にスクロールすると Applications URIs の[Application Callback URLs」という設定画面がありますので、 そちらにBubbleで作成したアプリのURLを入力していきます。
ここで入力するURLはAPI connectorで作成したAPIのUse a generic redirect URLと記載された箇所に 表示されていますので、そちらをコピペしましょう。
https://Bubbleで作成したドメイン/api/1.1/oauth_redirect
この設定を行うことで、認証後にリダイレクトする先を決めることができました。
設定が完了したらスクロールして忘れずに「Save Changes」で設定を保存しましょう。
これで1つめのアプリの設定の完了です！
4-6.ログインの動作確認
では1つ目のアプリの動作確認をしてみましょう。
Bubbleより作成したアプリからプレビューをしてサインインをクリック。
すると設定したAPIが実行され、Auth0のログイン画面が表示されます。
現在Auth0にユーザー情報が登録されていないので、赤枠のsign up から登録を行いましょう。
画面が切り替わったら、メールアドレスとパスワードを入力して 「Continue」をクリック。
するとログイン画面に戻り、以下の画面が表示されます。
APIが正常に実行された旨のポップアップとなりますので、無事認証が通りました！
画面右上に設定したログインメールアドレスも表示されているかと思います。
またユーザーテーブルを確認すると、同じメールアドレスでユーザーが登録されていることが 確認できます。
5. 2つ目のアプリの作成と設定
1つ目のアプリの設定が完了したので、続いて2つ目のアプリの設定を行っていきます。
設定方法は全く一緒ですので、上述したNo4-1～4-5についてを再度作成していきましょう。
画面が同じような見た目となってしまうとわかりにくいので、 今回は左上に2つ目のアプリということがわかるように「SSO_2」と入れておきました。
2つ目のBubbleのアプリとAuth0のアプリが作成できたら完了です。
6.動作確認
では2つ目のアプリをプレビューしてサインインしてみましょう！
サインインをクリックすると、、、
認証画面が表示されることなく、右上にメールアドレスが表示されれば、ログイン完了です！
こちらのユーザーテーブルでも1つ目のアプリでログインしたメールアドレスが登録されていることが確認できます。
これでログインIDやパスワード不要で、Auth0のログイン情報を用いてログインすることができました！
7.注意点
今回紹介する方法はcookieを用いたSSOとなります。
そのため、1回目の認証の後、ブラウザを変えて（例えばgoogleからedgeに変更）ログインしようとすると再度認証が必要となりますのでご注意ください。
なおブラウザを変更しても、Auth0に登録したユーザーであれば認証画面でsign upではなく、 sign inから認証できますのでそちらもぜひお試しください。
8.有料プラグインについて
BubbleにはAuth0を使った有料プラグイン「Auth0 User Login SSO OIDC SAML」もございますので、そちらもご紹介させて頂きます。
このプラグインではAuth0に接続して、他の複数のIDプロバイダーとの中間IDプロバイダーとして使用することができます。
つまり、Auth0（中間IDプロバイダー）を通して、各サービスプロバイダーに認証を行い、その情報を取得してログインできるようになるものです。
そのため、ユーザーにとっては登録をせずに、利用しているサービス（例えば、GoogleやTwitter等）の情報で簡単にログインができるシステムを構築することができます。
Bubbleでこれらを構築しようと思ったら、各サービスのdeveloperサイトでAPI keyやclient IDを発行し、それをBubbleで利用できるように設定する必要があります。
しかしこちらを利用することでそれらの設定作業が割愛できるもの開発者としては便利ですね！ ただし、プラグインページを確認すると以下の3つのみの接続しかまだ対応しておりません。
それ以外のサービスプロバイダーの情報を取得したい場合は、自分で構築する必要がありそうなのでご注意ください。 詳しい使い方については以下を参照して頂ければと思います。
9.まとめ
今回はAuth0を使ってSSOを実装する方法についてご紹介させて頂きました。
SSOを利用することで、ユーザーにとっては間違いなく使いやすいものになるので
ぜひ今後のアプリ作成で使ってみてはいかがでしょうか？
