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

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

始める前に

1. 以下のスコープを有効にして、マシンツーマシンアプリケーションを作成します。

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

2. マシンツーマシンアプリケーションの資格情報を使ってVault接続を追加します。

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}}"
         }
      }
     

   • ［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) => { }
   

   上の例にあるコードでは、ユーザーのログイン回数が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に情報が含まれていることを確認します。