ユースケース: 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 ノードを設定する

以下の手順に従って、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. 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 を選択します。

   • Name: Render Additional Signup 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.user.user_metadata.full_name &&
       !event.user.user_metadata.job_title
     ) {
       api.prompt.render(FORM_ID);
     }
   }
   
   exports.onContinuePostLogin = async (event, api) => { }
   
   上記のコード例では、ユーザーの user metadata に 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 に追加のサインアップ手順で入力した情報が含まれていることを確認します。