Auth0のActions、Forms、Flow、Vaultの関係性を最低限構成でテストしてみた

Auth0のActions、Forms、Flow、Vaultの関係性を最低限構成でテストしてみた

はじめに

少し前に、Auth0のUniversal LoginにUIも簡単に追加したり、ログインフローをカスタマイズできるForms機能がリリースされました。
全体フローの理解には少し複雑な部分がありまして、今回は最低限の構成で全体のカスタマイズしたログインフローをテストして、理解してみようと思います。

構成図的にはこういう感じです：

手順

<info>
最新の Actions/Forms/Flow/Vault は、SAVEやPublish/Applyなどを忘れずに！
</info>

M2M アプリケーションの準備

実際にAPIを呼び出す権限はM2Mにあるので、最初はM2Mアプリを作成します：

• M2M アプリを作成
• 使う API の権限をすべて確認
• M2M アプリ情報をメモ
• API Audience(Identifier) をメモ
  メモした情報は、あとで Forms 配下で Vault を作成するときに使います。

Form、Form-Vault、Form-Flow の作成

まずは Form を作る前に Vault を作成します：

• ダッシュボードからFormsに移動する
• Vault を作成します
• 先程メモした M2M とAPIの情報をVaultに追加する

情報が正しければ、警告マークなしで Vault が接続済みになるはず。

次に Form を作成します：

• Start from scratch から Form を作成
• Form編集画面の一番したにあるボタンでFlowを作成
• Step と Ending Screen の間に Flow を配置
• 先程作成した Vault を Flow にアサインする
• Edit Flow をクリックして Flow の詳細を編集
• USER ID パラメータを追加（添付コードをご参考ください）
• BODY にFlowが呼び出される際に変更したい内容を追加する（添付コードをご参考ください）

参考リンク：

• https://auth0.com/docs/customize/forms/variables
• https://auth0.com/docs/api/management/v2/users/patch-users-by-id

USER ID

{{context.user.user_id}}

Body

{
    "nickname": "Test: Actions -> Forms -> Flow -> Vault -> M2mFullPermissionApp -> UpdateUser"
}

これで Form 周りは一通り完了。

Action を作成

ここでは、さっき作った Form を呼び出して、実際のログインフローに繋げる Action を作る。

• ダッシュボードから Actions -> Library に移動
• Create Custom Action をクリック
• 名前を付けて、Login/Post Login を選択（新規サインアップ後は自動ログインされる。また、Form は Post Login でのみ利用可能）。詳細は Restrictions and Limitations を確認
• 作成した Action のコードを、あなたの Form ID に合わせて修正（添付コードをご参考ください）
• 続いて Actions -> Triggers の post-login を開く
• ほかは外して、Start と Complete の間に今作った Action を配置

/**
* @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) => {
  api.prompt.render('your-form-id');
}

/**
* @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.onContinuePostLogin = async (event, api) => {
  //  Your logic after completing the form
}

テスト

• サンプルアプリを起動（自分は React SPA サンプルアプリ を使いました）
• 画面の signup ボタンから登録して、そのままログインまで進む
• 結果を確認

ちゃんと "nickname": "Test: Actions -> Forms -> Flow -> Vault -> M2mFullPermissionApp -> UpdateUser" になって、全体フローが想定通り動きました。

以上