auth0のSSOログイン機能を利用して単一の資格情報で複数アプリケーションに自動的にログインをしてみた

こんにちは、コンサル部＠大阪オフィスのTodaです。

Auth0にはSSOログイン機能があり、1つのWebサイトにログインすることで別に運用しているWebサイトの認証を自動ログインする機能がございます。
上記を利用する事でユーザーはユーザー名やパスワードなどさまざまなログイン資格情報を使わなくても、複数のシステムにアクセスできます。

例としてGoogleの場合、GmailにログインをすることでYoutubeやgoogle アナリティクスなどログインをしなくてもご利用いただけるかと思います。
上記と同じようにログイン操作をしないで移動が可能になります。

■ SSO ログイン：主な利点と実装 - auth0
https://auth0.com/blog/jp-sso-login-key-benefits-and-implementation/

前提条件

AWSとAuth0の環境が用意されている状態から設定します。
今回、ログインは共通のURLでおこない実際のシステムはお客様毎に区切られたサブドメイン環境で操作いただく想定で設定しています。
環境として下記3点のWebサイトを用意して検証いたします。

・ログイン環境
URL : https://www.example.com/
AWS環境: Route53, S3, CloudFrontにて構築
プログラム: JavaScript

・お客様環境1
URL : https://company1.example.com/
AWS環境: Route53, ALB(認証あり), EC2にて構築

・お客様環境2
URL : https://company2.example.com/
AWS環境: Route53, ALB(認証あり), EC2にて構築

処理イメージ

試してみる

Auth0のアプリケーション設定(ログイン環境)

Auth0の管理画面にログインをおこない左メニューから[Applications] > [Applications]を選択して新規アプリケーションを作成します。
作成時、Choose an application typeの項目は[Regular Web Application]を選択します。

[Settings]をクリックしてApplication URIsの[Allowed Callback URLs]と[Allowed Logout URLs]に 設定内のApplication URIs > Allowed Callback URLsに移動先のURLを指定します。

・Application Properties
Application Type: Regular Web Application
Token Endpoint Authentication Method: None

・Application URIs
Allowed Callback URLs: https://www.example.com/
Allowed Logout URLs: https://www.example.com/

上記、設定後画面に表示されている[domain]と[Client ID]をメモに残します。

ページの作成(ログイン環境)

ログイン用のページを作成します。
検証で利用するプログラムは弊社別記事で利用しているサンプルスクリプトを利用しています。

設定ファイル内にあるauth_config.jsonを編集して上記メモに残した情報を入力します。
入力後、ファイルをS3に配置してWebサイトが表示できる状態にします。

1度正常に動作するか確認をおこない静的ページ > auth0画面 > 認証ができる事を確認します。

ログイン環境の設定は完了になります。

Auth0のアプリケーション設定(お客様環境)

Auth0の管理画面に再度ログインをおこない左メニューから[Applications] > [Applications]を選択して新規アプリケーションを作成します。
作成時、Choose an application typeの項目は[Regular Web Application]を選択します。
[Settings]をクリックして設定と必要情報の取得、ALB認証をOIDCで連携にておこないます。
設定方法は下記記事をご確認ください。

記事内でApplication URIsに関する設定がございます。
条件に合わせて追加変更いたします。

・Application URIs
Allowed Callback URLs: https://*.example.com/oauth2/idpresponse
Allowed Logout URLs: https://www.example.com/

設定後、ALBに設定したURLにアクセスをおこないALB配下のEC2サイトが表示されずauth0のログイン画面が表示される事の確認と、ログイン後サイトが表示されることを確認します。

上記でお客様環境の設定は完了になります。

SSOログインを試してみる

確認はブラウザのプライベートウィンドウにておこないます。
お客様環境にアクセスをするとAuth0のログイン画面が表示されて認証が必要なことを確認します。

ログイン環境に移動をおこない認証操作をおこないます。
ログイン確認後、再度お客様環境にアクセスします。

1~2秒ほど読み込み時間が経過後、EC2サイトの画面が表示される事が確認できました。

上記はSSOログイン機能を利用して認証が自動でおこなわれているためAuth0のログイン画面が表示されず認証処理が完了しています。

環境移動をシンプル化する方法

今回、ログイン環境にて認証をおこない手動でお客様環境に移動をしています。
手動操作をなくす方法としてログインユーザ毎に移動先URLを指定してログイン後移動する方法をおこなうことで上記問題を解決できます。
移動先URLの指定にお客様環境のURLを入れることで移動処理が可能になります。
設定方法は下記記事をご確認ください。

さいごに

Auth0のSSOログイン機能とを利用して複数Webサイトへの自動ログインを実装してみました。
Auth0にて認証を集中しておこない、色々なアプリを提供されるお客様にお勧めの機能になります。
少しでもお客様の作りたい物の参考になればと考えております。