> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Forms for Actions を使用してプログレッシブプロファイルフォームを設定する方法を説明します
# ユースケース: Forms を使用したプログレッシブプロファイルフォームの設定
1. 次のスコープを有効にして、[Machine-to-Machine Application](/ja/docs/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 接続](/ja/docs/customize/forms/vault) を追加します。
Forms for Actions を使用すると、会社名や役職などの不足している情報を収集するために、どのタイミングでユーザーにプロンプトを表示するかを制御するプログレッシブプロファイリングフローを作成し、それらを `user_metadata` 属性として保存できます。
以下のセクションでは、ノードとフローを使用してプログレッシブプロファイルフォームを作成する方法と、そのフォームを [Post Login Action](/ja/docs/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](/ja/docs/customize/forms/nodes-and-components) を Step ノードに追加し、ユーザーの会社名と役職を収集します。
1. **Components menu** から **Rich text** フィールドを **Step** ノードにドラッグします。
* **Rich text**: カスタムメッセージを入力します。
* **Example**: `プロフィールを完成させましょう。エクスペリエンスをパーソナライズするために、プロフィール情報の入力が必要です。`
* **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** を選択します。
### 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. **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** を選択します。
* **名前**: `Render Progressive Profile Form` と入力します。
* **トリガー**: `Login / Post Login` を選択します。
* **ランタイム**: 推奨バージョンを選択します。
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 回を超えており、ユーザーメタデータの company\_name プロパティと job\_title プロパティが設定されていない場合にフォームを表示します。
4. **デプロイ** を選択します。
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` に情報が含まれていることを確認します。