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

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

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

     • 例: Complete your profile! We need you to complete your profile to personalize your experience.

   • 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 を選択します。

​

フローノードを設定する

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 を選択します。

   • Name: Render Progressive Profile Form と入力します。
   • Trigger: Login / Post Login を選択します。
   • Runtime: 推奨バージョンを選択します。

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 回を超えており、ユーザー metadata の company_name と job_title プロパティがない場合にフォームが表示されます。

4. Deploy を選択します。

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 に情報が含まれていることを確認します。