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

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

​

フォームをゼロから作成する

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

1. ［Auth0 Dashboard］>［Actions（アクション）］>［Forms（フォーム）］ の順に選択して、フォームエディターを開きます。
2. ［Create Form（フォームを作成）］ > ［Start from scratch（初めから作成する）］ の順に選択します。

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

​

ステップノードを構成する

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

1. ［Components menu（コンポーネントメニュー）］ から ［Rich text（リッチテキスト）］ フィールドを ［Step（ステップ）］ ノードにドラッグします。

   • ［Rich text（リッチテキスト）］ ：カスタムメッセージを入力します。。
   • ［Save（保存）］ を選択します。

2. ［Text（テキスト）］ フィールドを ［Step（ステップ）］ ノードにドラッグします。

   • Id ：full_nameを入力します。
   • ［Label（ラベル）］ ：フルネームを入力します。
   • ［Label（ラベル）］ ：チェックボックスを有効にします。
   • ［Required（必要）］ ：チェックボックスを有効にします。
   • ［Save（保存）］ を選択します。

3. ［Text（テキスト）］ フィールドを ［Step（ステップ）］ ノードにドラッグします。

   • Id ：job_titleを入力します。
   • ［Label（ラベル）］ ：役職を入力します。
   • ［Label（ラベル）］ ：チェックボックスを有効にします。
   • ［Required（必要）］ ：チェックボックスを有効にします。
   • ［Save（保存）］ を選択します。

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

​

フローノードの構成

次の手順に従って、 ［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. 下の画像のように ［Step（ステップ）］ と ［Ending Screen（終了スクリーン） ノードに ［Flow（フロー）］ ノードをリンクします。

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

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

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

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

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

   • User ID（ユーザー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（公開）］を選択し、保存します。

​

フォームレンダーコードを取得する

次の手順に従って、フォームレンダーコードを取得して、カスタムのログイン後アクションを使ったフォームを視覚的にレンダリングします。

• Formディターから <>［Render（レンダー）］ を選択します。
• ［Copy（コピー）］ を選択します。

​

ポストログインアクションの作成

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

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

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

   • ［Name（名前）］ ：［Render Additional Signup 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.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（追加サインアップフォームのレンダリング）］ アクションを ［Login（ログイン）］ フローにドラッグ＆ドロップします。

   

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

​

実装のテスト

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

• 新規ユーザーでアプリケーションにサインアップします。
• ログインフローのログイン後アクションでは、フォームがレンダリングされ、情報の入力が求められます。
• ［Auth0 Dashboard（Auth0ダッシュボード）］>［User Management（ユーザー管理）］>［Users（ユーザー）］ を選択し、新しいユーザーを見つけ、その属性full_nameおよびjob_titleが追加サインアップステップからの情報を含んでいることを検証します。