> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-chore-events-autoupdate.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Forms for Actions を使用してプログレッシブプロファイルフォームを設定する方法を学びます
# ユースケース: Forms を使用してプログレッシブプロファイルフォームを設定する
1. 次のスコープを有効にした [Machine-to-Machine Application](/docs/ja-jp/get-started/auth0-overview/create-applications/machine-to-machine-apps) を作成します。
* `read:users`
* `update:users`
* `create:users`
* `read:users_app_metadata`
* `update:users_app_metadata`
* `create:users_app_metadata`
2. M2M アプリケーションの認証情報を使用して [Vault 接続](/docs/ja-jp/customize/forms/vault) を追加します。
Forms for Actions では、会社名や役職などの不足している情報を収集するために、どのタイミングでユーザーに入力を促すかを判断するプログレッシブプロファイリングフローを作成し、それらを `user_metadata` 属性として保存できます。
以下のセクションでは、ノードとフローを使用してプログレッシブプロファイルフォームを作成する方法と、そのフォームを [Post Login Action](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) に追加する手順について説明します。
情報を収集するフォームを作成するには、次の手順に従います。
1. **Auth0 Dashboard > Actions > Forms** を選択して、フォームエディターを開きます。
2. **Create Form** > **Start from scratch** を選択します。
デフォルトでは、新しいフォームには Start ノード、Step ノード、Ending screen ノードが含まれています。
Step ノードは、ユーザーに表示されるグラフィカルインターフェースです。以下の手順に従って Step ノードに [Fields](/docs/ja-jp/customize/forms/nodes-and-components) を追加し、ユーザーの会社名と役職を収集します。
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** を選択します。
`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. **Update user\_metadata** フローを選択し、次に **Edit Flow** を選択して、新しいタブで Flow エディターを開きます。
2. **Start** アクションの下にある **+** アイコンを選択して **Update user** アクションを追加します。以下の項目を入力し、続けて **Save** を選択します。
* **Connection**: ドロップダウンから、M2M アプリケーション用の Vault 接続を選択します。
* **User ID**: `{{context.user.user_id}}` と入力します。
* **Body**: 次のコードをコピー&ペーストして、`job_title` と `company_name` プロパティで `user_metadata` を更新します。
```json lines theme={null}
{
"user_metadata": {
"job_title": "{{fields.job_title}}",
"company_name": "{{fields.company_name}}"
}
}
```
* **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 Progressive Profile Form` と入力します。
* **Trigger**: `Login / Post Login` を選択します。
* **Runtime**: 推奨バージョンを選択します。
3. **Create** を選択します。
post-login Action を設定するには、次の手順に従います。
1. Code editor から既存のコードを削除します。
2. フォームの埋め込みコードを Code editor に貼り付けます。
3. フォームを表示する条件ロジックを定義するようにコードを編集します。
```javascript lines theme={null}
/**
* @param {Event} event - ユーザーおよびログイン時のコンテキストに関する詳細。
* @param {PostLoginAPI} api - ログインの動作を変更するために使用できるメソッドを備えたインターフェース。
*/
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) => { }
```
上記のコード例では、ユーザーのログイン回数が 2 回を超えており、ユーザー metadata の `company_name` と `job_title` プロパティがない場合にフォームが表示されます。
4. **Deploy** を選択します。
5. **Render Progressive Profile Form** Action を **Login** フローにドラッグ＆ドロップします。
6. **Apply** を選択します。
実装のテスト
次の手順で実装をテストします。
1. ログイン回数が 2 回を超えていて、`user_metadata` 属性の `company_name` と `job_title` に値が設定されていない既存ユーザーでログインします。
2. Login フローの Post Login Action によってフォームが表示され、情報の入力を求められます。
3. **Auth0 Dashboard > User Management > Users** を選択し、該当するユーザーを見つけて、`user_metadata` 属性の `company_name` と `job_title` に情報が含まれていることを確認します。