> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-update-anonymous-sessons-ea.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 を使用すると、サインアップフローやログインフローに追加のステップを作成し、ユーザーがアプリケーションにアクセスする前にそれらを必須にできます。
以下のセクションでは、ノードとフローを使用して追加のサインアップステップ用フォームを作成する方法と、そのフォームを [Post Login](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) Action に追加する手順について説明します。
情報を収集するためのフォームを作成するには、次の手順に従います。
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**: カスタムメッセージを入力します。
* **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** を選択します。
以下の手順に従って、`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` を更新します。
```json lines theme={null}
{
"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. フォームを表示する条件ロジックを定義するようにコードを編集します。
```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.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` に追加のサインアップ手順で入力した情報が含まれていることを確認します。