Okta Customer Identity Cloud(旧 Auth0)のForms for ActionsがEAになったよ

はじめに

こんにちは。ドワンゴ教育事業バックエンドエンジニアの金子です。

Okta Customer Identity Cloud(旧 Auth0。以下 Okta CIC)の新機能「Forms for Actions」(以下 Forms)がEarly Accessになりました。本番環境での使用も想定されているステージです。

教育事業での採用も見据えて、どんな機能なのか調べてみたので内容を紹介します。

Forms for Actionsとは

Okta CICの認証フローをカスタマイズできる機能です。ログイン成功時のActions¹内でFormを呼び出し、ユーザーへ表示できます。

例えば下記のようなユースケースが想定されています。

プログレッシブプロファイリング
規約への同意の取得
サインアップ・ログインフローの追加ステップ
- メールアドレス検証の必須化
- 決済情報の入力
- など

何がうれしいのか

Formsを使わなくても、上記のようなユースケースの実現は可能でした。では、この機能の何がうれしいのでしょうか。

私の意見では、Universal Login²の内部で独自のビジネスロジックを動かせるようになったことです。このおかげで従来よりも簡単に、安全な認証フローを構築できるようになります。

例えば、Formsを使わずにプログレッシブプロファイリングを実現しようとすると、下記のような作業が必要です。

外部サイトへリダイレクトするActionsのスクリプトを書く
フォームを表示するサイトを用意する
フォームへの入力後、Okta CICのログインフローへリダイレクトできるようにする

外部サイトへのリダイレクトを挟むため、慎重に設計・検証しなければいけませんでした。

Formsを使うとこれらが不要になり、Universal Login内部のページ遷移でプログレッシブプロファイリングなどのユースケースを実現できます。より一貫した、安全な認証体験をユーザーへ提供できるようになります。

動かしてみる

このようにうれしい新機能であるFormsですが、具体的にどのように使えるのでしょうか。試しに簡単なユースケースを動かしてみます。

やりたいこと

今回は「ログイン時に利用規約への同意を取得」できるようにしていきます。利用規約を更新して、再度同意を取得しなければならない場合などを想定しています。

下記のようなログインフローを設定します。

ログイン画面を表示する
ログイン成功したら利用規約画面へ遷移する
利用規約画面で利用規約と同意チェックボックスを表示する
ユーザーの同意フラグと同意日時をapp_metadataに保存する

設定方法

では実際に設定していきます。

なお、FormsはEarly Accessステージですので、General availabilityになるまでに変更が加わる可能性があります。ご承知ください。

事前準備

同意の保存に使用するため、下記権限が付与されたMachine to Machine Applicationを用意してください。

read:users
update:users
create:users
read:users_app_metadata
update:users_app_metadata
create:users_app_metadata

まだ無い場合はこちらを参考に作成してください。

1. Formsエディターを開く

ダッシュボードのサイドバー内の Actions → Forms を選択する

別タブでFormの一覧画面が表示される
Create Form を選択する
Start from scratch を選択する

初期状態のFormsエディターが表示されます。中央にあるのが Step ノードです。ユーザーへ表示される画面を表します。

2. 利用規約画面の設定

サイドバーから Rich Text を Step ノードへドラッグ&ドロップする
適切な規約の内容を入力する
サイドバーから Legal を Step ノードへドラッグ&ドロップする
同意チェックボックスのテキストを入力する

3. 同意の保存

画面中央下部の Flow を選択する
Flow ノードが作成されるので選択する
Create New Flow を選択する
Flow name を入力する
Stepノードと Ending screenノードの間のリンクを削除する
Stepノードと Flowノード、Ending screenノードを下記画像のようにつなぐ

右上の Publish を選択する (まだユーザーには表示されません)

続いて、Flowノードで実行する処理の内容を設定します。

作成したFlowノードを選択する
Edit Flow を選択する

別タブで、初期状態のFlowエディターが表示されます。

+ アイコンを選択する
表示されるアクションの中から Update user を選択する
Vault connection の + アイコンを選択する
任意の Connection name を入力する
事前準備で用意したMachine to Machine Applicationの情報を入力する (Applicationの詳細画面から取得できます)
- Tenant domain
- Client ID
- Client secret
User ID に {{context.user.user_id}} を入力する
Body に下記JSONを入力する

{
  "app_metadata": {
    "privacy_policies": true,
    "privacy_policies_timestamp": "{{ functions.toTimestamp() }}"
  }
}

Save を選択する
Publish を選択する

以上でFormsでの設定は完了です。最後に、ActionsからFormsを呼び出すようにします。

Formsエディターに戻る
Render を選択する

表示されるスクリプトをコピーしておく

ここで、別タブでOkta CICのダッシュボードを開きます。

サイドバーの Actions → Flows を選択する
Login を選択する
Add Action セクションの+ボタン → build from scratch を選択する
Create Actionモーダルで適切な Action name を入力する
その他の項目は初期値のまま Create を選択する
Actionsエディターが開く

Formsエディターで表示されたスクリプトを貼り付ける
貼り付けたスクリプトへif文を追加して、下記のように修正する

/**
* @param {Event} event - Details about the user and the context in which they are logging in.
* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
*/
exports.onExecutePostLogin = async (event, api) => {
  const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';

  if (event.user.app_metadata.privacy_policies !== true) {
    api.prompt.render(FORM_ID);
  }
}

exports.onContinuePostLogin = async (event, api) => { }