Auth0でログインをした時にユーザ毎に表示されるページを指定してみた

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

Auth0を利用している中でユーザ毎にログイン時に表示されるページを制御したいというお話がございましたので検証をしてみました。 対応方法はRulesまたはActionsを利用する方法があり、今回はRulesを利用して設定してみました。

■ (参考資料) Redirect Users from Within Rules
https://auth0.com/docs/rules/redirect-users

※ Actionsを利用する方法について
2021年5月14日にAuth0でActionsがGAされています。
ActionsはRulesとHooksを統合して使いやすくした機能で、Auth0にて推奨されている機能になります。 今回Rulesにて機能実装をしておりますが、Actionsにて同等機能が実装可能な場合はそちらを推奨いたします。

注意事項

今回実装するプログラムは検証を想定して作成しています。
実際の製品にご利用頂く場合はご利用者様にてテスト、検証をおこなってから実装ください。

前提条件

静的ページ(javascript含み)を設置できるWebサーバを用意します。
上記はS3の静的ページのホスティング機能でも動作可能です。
Auth0の環境を1点用意してある状態から開始します。
スクリプトはAuth0サイト内のサンプルスクリプトを利用いたします。

試してみる

Auth0のユーザ設定変更

Auth0の管理画面にログインをおこない左メニューから[User Management] > [Users]を選択します。
テストユーザの詳細画面を表示してapp_metadataの欄を確認します。
metadataにはアプリ側で書き込み/読み込みができる「user_metadata」と読み込みのみの「app_metadata」があります。
今回は「app_metadata」に表示するページのURLを指定します。

テストユーザA

{
  "url": "https://example.com/app/page1"
}

テストユーザB

{
  "url": "https://example.com/app/page2"
}

アプリケーション設定

指定したページはアプリケーション設定のコールバックURLに指定する必要がございます。
左メニューから[Applications] > [Applications]を選択して対象のアプリ設定を表示します。

設定内のApplication URIs > Allowed Callback URLsに移動先のURLを指定します。
複数指定する場合はカンマ(,)で区切って入力します。
移動先が複数ある場合はワイルドカード(*)による指定も可能です。
今回は決まったページのみ移動が出来るようにするためURLを細かく指定します。

https://example.com/app/page1,
https://example.com/app/page2,
https://example.com/app/page3

Rulesの新規登録

ログイン時に指定のページに移動する設定を追加します。
右メニューから[Auth Pipeline] > [Rules]を選択します。
Rulesの新規作成を選択して初期テンプレートを[Empty rule]にします。

Rulesの設定

Rulesの名称は任意でおこないScriptに移動処理を追加します。
Script内にはuserとcontextがあり、下記情報を格納しています。

user：ユーザ情報(メタデータも含む)
context：認証に関する情報、トークン等

今回、ユーザ情報にあるメタデータからURLの情報を取得します。
取得したURLをredirect_uriに指定することで動作を実装します。
context.request.query.protocolをチェックしている理由は、Rulesはログイン処理以外でも利用されるため意図しない画面移動を発生させないようにしています。

function (user, context, callback) {
  if(context.request.query.protocol){
    context.redirect = {
      url: user.app_metadata.url
    };
  }
  # console.log(context);
  return callback(null, user, context);
}

設定は上記で完了になります。

動作の確認

実際に動作検証をしてみます。
検証で利用するプログラムは弊社別記事で利用しているサンプルスクリプトを利用しています。

■ これから始めるAuth0 – ノンコーディングでサンプルアプリケーションを動かそう！ https://dev.classmethod.jp/articles/begin-auth0/

https ://example.com/ : WWW Projectと表示
https ://example.com/app/page1 : Page1と表示
https ://example.com/app/page2 : Page2と表示

テストユーザ1でログイン

テストユーザ1にはapp_metadataに「https ://example.com/app/page1」を設定しています。 ログイン後、ログインボタンがユーザアイコンに変わり画面にPage1と表示されています。

テストユーザ2でログイン

テストユーザ2にはapp_metadataに「https ://example.com/app/page2」を設定しています。 ログイン後、ログインボタンがユーザアイコンに変わり画面にPage2と表示されています。

上記、２点の移動ができることを確認しました。

さいごに

Auth0のRules機能を利用してユーザ毎に表示ページを変更してみました。
今回、app_metadataにURLを保管していますが、user_metadataに保存場所を変更して利用者側でログイン時決まったページを表示するなども対応できそうです。
Rulesを使って実装をしていますが、Actionsを使って同等の事ができないか今度検証してみたいと思います。
少しでもお客様の作りたい物の参考になればと考えております。