ユースケース: Forms を使用したプログレッシブプロファイルフォームの設定

Forms for Actions を使用してプログレッシブプロファイルフォームを設定する方法を説明します

始める前に

1. 次のスコープを有効にして、Machine-to-Machine Application を作成します。

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

2. M2M アプリケーションの認証情報を使用して、Vault 接続 を追加します。

Forms for Actions を使用すると、会社名や役職などの不足している情報を収集するために、どのタイミングでユーザーにプロンプトを表示するかを制御するプログレッシブプロファイリングフローを作成し、それらを user_metadata 属性として保存できます。

以下のセクションでは、ノードとフローを使用してプログレッシブプロファイルフォームを作成する方法と、そのフォームを Post Login Action に追加する手順について説明します。

​

フォームを最初から作成する

情報を収集するためのフォームを作成するには、次の手順に従います。

1. Auth0 Dashboard > Actions > Forms を選択して、フォームエディターを開きます。
2. Create Form > Start from scratch を選択します。

デフォルトでは、新しいフォームには Start ノード、Step ノード、Ending screen ノードが含まれています。

​

Step ノードを設定する

Step ノードは、ユーザーに表示されるグラフィカルインターフェースです。以下の手順に従って Fields を Step ノードに追加し、ユーザーの会社名と役職を収集します。

1. Components menu から Rich text フィールドを Step ノードにドラッグします。

   • Rich text: カスタムメッセージを入力します。

     • Example: プロフィールを完成させましょう。エクスペリエンスをパーソナライズするために、プロフィール情報の入力が必要です。

   • Save を選択します。

2. Text フィールドを Step ノードにドラッグします。

   • ID: company_name を入力します。
   • Label: チェックボックスをオンにします。
   • Label: Company name を入力します。
   • Required: チェックボックスをオンにします。
   • Save を選択します。

3. Text フィールドを Step ノードにドラッグします。

   1. ID: job_title を入力します。
   2. Label: Job title を入力します。
   3. Label: チェックボックスをオンにします。
   4. Required: チェックボックスをオンにします。
   5. Save を選択します。

4. 保存するには Publish を選択します。

​

Flow ノードを設定する

次の手順に従って、user_metadata を更新し、認証フローを再開するために、Step ノードの後に Flow ノードを追加します。

1. フォームエディターの下部で Flow を選択します。

2. Step ノードと Ending Screen ノードの間にある既存のリンクを削除します。

3. 新しい Flow > Click to add a flow > Create a new flow. を選択します。

   • Name フィールドに Update user_metadata と入力します。
   • Create を選択します。
   • Save を選択します。

4. 以下の図のように、Flow ノードを Step ノードと Ending Screen ノードに接続します。

5. 保存するには Publish を選択します。

次の手順に従って、フローに Auth0 の Update user アクションを追加します。

1. Update user_metadata フローを選択し、次に Edit Flow を選択して、新しいタブで Flow エディタを開きます。

2. Start アクションの下にある + アイコンを選択して Update user アクションを追加します。以下のフィールドを入力し、続行するには Save を選択します。

   • Connection: ドロップダウンから、M2M アプリケーション用の Vault 接続を選択します。

   • User ID: {{context.user.user_id}} と入力します。

   • Body: 次のコードをコピーして貼り付け、job_title と company_name プロパティで user_metadata を更新します。

     {
        "user_metadata": {
           "job_title": "{{fields.job_title}}",
           "company_name": "{{fields.company_name}}"
        }
     }
     

   • Save を選択します。

3. 保存するには Publish を選択します。

​

フォームのレンダリングコードを取得する

次の手順に従ってフォームのレンダリングコードを取得し、カスタムの Post Login Action でフォームを視覚的にレンダリングします。

• フォームエディターで、<> Render を選択します。
• Copy を選択します。

​

Post Login Action を作成する

次の手順に従って、フォームを表示する Post Login Action を作成します。

1. Auth0 Dashboard > Actions > Flows > Login に移動します。

2. + アイコンを選択し、Build from scratch を選択します。

   • 名前: Render Progressive Profile Form と入力します。
   • トリガー: Login / Post Login を選択します。
   • ランタイム: 推奨バージョンを選択します。

3. Create を選択します。

Post Login Action を設定するには、次の手順を実行します。

1. Code editor から既存のコードを削除します。

2. フォームの埋め込みコードを Code editor に貼り付けます。

3. フォームを表示する条件ロジックを定義するようにコードを編集します。

   /**
   * @param {Event} event - ユーザーと、そのユーザーのログイン時のコンテキストに関する詳細。
   * @param {PostLoginAPI} api - ログインの動作を変更するために使用できるメソッドを提供するインターフェース。
   */
   exports.onExecutePostLogin = async (event, api) => {
     const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';
   
     if (
       event.stats.logins_count > 2 &&
       !event.user.user_metadata.company_name &&
       !event.user.user_metadata.job_title
     ) {
       api.prompt.render(FORM_ID);
     }
   }
   
   exports.onContinuePostLogin = async (event, api) => { }
   
   上記のコード例では、ユーザーのログイン回数が 2 回を超えており、ユーザーメタデータの company_name プロパティと job_title プロパティが設定されていない場合にフォームを表示します。

4. デプロイ を選択します。

5. Render Progressive Profile Form Action を Login フローにドラッグ＆ドロップします。

   

6. Apply を選択します。

​

実装をテストする

次の手順で実装をテストします。

1. ログイン回数が 2 回を超えていて、user_metadata 属性の company_name と job_title に値が設定されていない既存のユーザーでログインします。
2. Login フローの post-login Action によってフォームが表示され、情報の入力を求められます。
3. Auth0 Dashboard > User Management > Users を選択し、対象のユーザーを見つけて、user_metadata 属性の company_name と job_title に情報が含まれていることを確認します。