> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-react-sdk-reference.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# ユースケース：Formsを使用してプログレッシブプロファイルフォームを構成する
> Forms for Actionsを使用してプログレッシブプロファイルフォームを構成する方法を説明します。
1. 以下のスコープを有効にして、[マシンツーマシンアプリケーション](https://auth0.com/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. マシンツーマシンアプリケーションの資格情報を使って[Vault接続](/docs/ja-jp/customize/forms/vault)を追加します。
Forms for Actionsを使用すると、プログレッシブプロファイリングフローを作成して、会社名や役職などの不足している情報を収集し、それらを`user_metadata`属性として保管するようユーザーに求めるタイミングを決定できます。
以下のセクションでは、ノードとフローを使用してプログレッシブプロファイルフォームを作成する方法と、フォームを[ログイン後のアクション](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger)に追加する手順について説明します。
## フォームをゼロから作成する
情報を収集するためのフォームを作成するには、次の手順に従ってください。
1. **［Auth0 Dashboard］>［Actions（アクション）］>［Forms（フォーム）］** の順に選択して、フォームエディターを開きます。
2. **［Create Form（フォームを作成）］** > **［Start from scratch（初めから作成する）］** の順に選択します。
特に設定を変更しない限り、新しいフォームには開始ノード、ステップノード、および終了スクリーンノードが含まれます。
### ステップノードを構成する
ステップノードはユーザーに表示されるグラフィカルインターフェイスです。次の手順に従って、ステップノードに[フィールド](/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（公開）］** を選択して保存します。
### フローノードを構成する
以下の手順に従って、 **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`（user\_metadata更新）と入力します。
* **［Create（作成）］** を選択します。
* **［Save（保存）］** を選択します。
4. 下の画像のように **Flow（フロー）** ノードを **Step（ステップ）** ノードと **Ending Screen（終了画面）** ノードにリンクします。
5. **［Publish（公開）］** を選択して保存します。
Auth0ユーザー更新アクションをフローに追加するには、次の手順に従います。
1. **［Update user\_metadata（user\_metadata更新）］** フローを選択してから **［Edit flow（フローの編集）］** を選択し、新しいタブにフローエディターを開きます。
2. アクションの **［Start（開始）］** の下にある **［+］** アイコンを選択し、 **Update user（ユーザー更新）** アクションを追加します。以下のフィールドに入力して、 **［Save（保存）］** を選択します。
* **Connection（接続）** ：ドロップダウンからM2MアプリケーションへのVault接続を選択します。
* **User ID（ユーザー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（公開）］** を選択して保存します。
### フォームのレンダーコードを取得する
フォームのレンダーコードを取得して、カスタムのログイン後アクションでフォームを視覚的にレンダリングするには、以下の手順に従います。
* フォームエディターから **［Render（レンダー）］** を選択します。
* **［Copy（コピー）］** を選択します。
## ログイン後のアクションを作成する
ログイン後のアクションを作成してフォームをレンダリングするには、次の手順に従います。
1. **［Auth0 Dashboard（Auth0ダッシュボード）］>［Actions（アクション）］>［Flows（フロー）］>［Login（ログイン）］** に移動します。
2. **［+］** アイコンを選択し、 **［Build from scratch（初めから構築する）］** を選択します。
* **Name（名前）** ：`Render Progressive Profile Form`（プログレッシブプロファイルフォームのレンダリング）と入力します。
* **Trigger（トリガー）** ：［`Login / Post Login`（ログイン/ログイン後）］を選択します。
* **Runtime（ランタイム）** ：推奨バージョンを選択します。
3. **［Create（作成）］** を選択します。
ログイン後のアクションを構成するには、以下を行います。
1. 既存のコードをコードエディターから削除します。
2. フォームの埋め込みコードをコードエディターに貼り付けます。
3. コードを編集して、フォームをレンダリングする条件ロジックを定義します。
```javascript lines theme={null}
/**
* @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.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) => { }
```
上の例にあるコードでは、ユーザーのログイン回数が3以上で、ユーザーのメタデータにcompany\_nameプロパティとjob\_titleプロパティがない場合にフォームが表示されます。
4. **［Deploy（デプロイ）］** を選択します。
5. **Render Progressive Profile Form（プログレッシブプロファイルフォームのレンダリング）** アクションを **Login（ログイン）** フローにドラッグ＆ドロップします。
6. **［Apply（適用）］** を選択します。
### 実装をテストする
次の手順に従って実装をテストします。
1. ログインを3回以上実行済みで、`user_metadata`属性の`company_name`と`job_title`に値がない既存のユーザーでログインします。
2. ログインフローのログイン後アクションがフォームをレンダリングして、情報の入力を求めます。
3. **［Auth0 Dashboard］>［User Management（ユーザー管理）］>［Users（ユーザー）］** に移動し、ユーザーを見つけて、`user_metadata`属性の`company_name`と`job_title`に情報が含まれていることを確認します。