ユースケース：Formsを使用してプログレッシブプロファイルフォームを構成する

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

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

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

1. ［Auth0 Dashboard］>［Actions（アクション）］>［Forms（フォーム）］の順に選択して、フォームエディターを開きます。

2. ［Create Form（フォームを作成）］>［Start from scratch（初めから作成する）］の順に選択します。

特に設定を変更しない限り、新しいフォームには開始ノード、ステップノード、および終了スクリーンノードが含まれます。

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

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（公開）］を選択して保存します。

以下の手順に従って、Step（ステップ）ノードの後に​​Flow（フロー）ノードを追加し、user_metadataを更新して認証フローを再開します。

1. フォームエディターの下にある［Flow（フロー）］を選択します。

2. Step（ステップ）ノードとEnding Screen（終了画面）ノードの間にある既存のリンクを削除します。

3. 新たに［Flow（フロー）］&gt ［Click to add a flow（クリックしてフローを追加する）］>［Create a new flow（新しいフローを作成する）］を選択します。

   • ［Name（名前）］フィールドにUpdate user_metadata（user_metadata更新）と入力します。

   • ［Create（作成）］を選択します。

   • ［Save（保存）］を選択します。

4. 下の画像のようにFlow（フロー）ノードをStep（ステップ）ノードとEnding Screen（終了画面）ノードにリンクします。

5. ［Publish（公開）］を選択して保存します。

Auth0ユーザー更新アクションをフローに追加するには、次の手順に従います。

1. ［Update user_metadata（user_metadata更新）］フローを選択してから［Edit flow（フローの編集）］を選択し、新しいタブにフローエディターを開きます。

2. アクションの［Start（開始）］の下にある［+］アイコンを選択し、Update user（ユーザー更新）アクションを追加します。以下のフィールドに入力して、［Save（保存）］を選択します。

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

   • User ID（ユーザーID）：{{context.user.user_id}}と入力します。

   • Body（ボディー）：以下のコードをコピーして貼り付け、job_titleとcompany_nameのプロパティを含むuser_metadataを更新します。

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

     Was this helpful?

     Yes /No

   • ［Save（保存）］を選択します。

3. ［Publish（公開）］を選択して保存します。

フォームのレンダーコードを取得して、カスタムのログイン後アクションでフォームを視覚的にレンダリングするには、以下の手順に従います。

• フォームエディターから［Render（レンダー）］を選択します。

• ［Copy（コピー）］を選択します。

ログイン後のアクションを作成してフォームをレンダリングするには、次の手順に従います。

1. ［Auth0 Dashboard（Auth0ダッシュボード）］>［Actions（アクション）］>［Flows（フロー）］>［Login（ログイン）］に移動します。

2. ［+］アイコンを選択し、［Build from scratch（初めから構築する）］を選択します。

   • Name（名前）：Render Progressive Profile Form（プログレッシブプロファイルフォームのレンダリング）と入力します。

   • Trigger（トリガー）：［Login / Post Login（ログイン/ログイン後）］を選択します。

   • Runtime（ランタイム）：推奨バージョンを選択します。

3. ［Create（作成）］を選択します。

ログイン後のアクションを構成するには、以下を行います。

1. 既存のコードをコードエディターから削除します。

2. フォームの埋め込みコードをコードエディターに貼り付けます。

3. コードを編集して、フォームをレンダリングする条件ロジックを定義します。

   /**
   * @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.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) => { }

   Was this helpful?

   Yes /No
   上の例にあるコードでは、ユーザーのログイン回数が3以上で、ユーザーのメタデータにcompany_nameプロパティとjob_titleプロパティがない場合にフォームが表示されます。

4. ［Deploy（デプロイ）］を選択します。

5. Render Progressive Profile Form（プログレッシブプロファイルフォームのレンダリング）アクションをLogin（ログイン）フローにドラッグ＆ドロップします。

   

6. ［Apply（適用）］を選択します。

次の手順に従って実装をテストします。

1. ログインを3回以上実行済みで、user_metadata属性のcompany_nameとjob_titleに値がない既存のユーザーでログインします。

2. ログインフローのログイン後アクションがフォームをレンダリングして、情報の入力を求めます。

3. ［Auth0 Dashboard］>［User Management（ユーザー管理）］>［Users（ユーザー）］に移動し、ユーザーを見つけて、user_metadata属性のcompany_nameとjob_titleに情報が含まれていることを確認します。