ユースケース: 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 では、サインアップまたはログインフローに追加の手順を作成し、ユーザーがアプリケーションにアクセスする前にそれらを必須にできます。

以下のセクションでは、ノードとフローを使用して追加のサインアップ手順用フォームを作成する方法と、そのフォームを 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: カスタムメッセージを入力します。
   • Save を選択します。

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

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

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

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

4. Publish を選択して保存します。

​

Flow ノードを設定する

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

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 Action を追加します。

1. Flow Update user_metadata > Edit flow を選択し、新しいタブで Flow エディターを開きます。

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

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

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

   • Body: 次のコードをコピー＆ペーストして、full_name と job_title プロパティで user_metadata を更新します。

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

   • 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 Additional Signup 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.user.user_metadata.full_name &&
       !event.user.user_metadata.job_title
     ) {
       api.prompt.render(FORM_ID);
     }
   }
   
   exports.onContinuePostLogin = async (event, api) => { }
   
   上記のコード例では、ユーザーメタデータの full_name プロパティと job_title プロパティがない場合にフォームが表示されます。

4. Deploy を選択します。

5. Render Additional Signup Form Action を Login フローにドラッグ アンド ドロップします。

   

6. Apply を選択します。

​

実装をテストする

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

• 新しいユーザーでアプリケーションにサインアップします。
• Login フローの post-login Action によってフォームが表示され、必要な情報の入力が求められます。
• Auth0 Dashboard > User Management > Users を選択し、新しいユーザーを見つけて、属性 full_name と job_title に追加のサインアップ手順で入力した情報が含まれていることを確認します。