> ## 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.

> post-login または pre-user-registration Action を使用して、ログインまたはサインアップフロー中に Form をレンダリングする方法を説明します。

# Actions を使って フォーム をレンダリングする

フォームを作成したら、`api.prompt.render()` メソッドを使用して [Actions](/docs/ja-jp/customize/actions) でレンダリングできます。

```javascript lines theme={null}
// post-loginトリガーを使用した例

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後のロジックをここに追加
}
```

form\_id を Form の ID に置き換えます。ID は、たとえば `ap_pUMG...` のように Form の URL で確認するか、Form エディタの **Render** タブで選択できます。
[Actions Code editor](/docs/ja-jp/customize/actions/write-your-first-action#create-an-action) では、Form をいつ、どのようにレンダリングするかを決めるビジネスロジックを定義できます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {

  // company_nameメタデータが存在しないユーザーにのみフォームをレンダリングする
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後のロジックをここに追加する
}
```

これらのオブジェクトの詳細については、次を参照してください。

* [Event Object](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object): Event オブジェクトとそのプロパティについて説明します。
* [API object](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object): API オブジェクトとそのメソッドについて説明します。

<div id="populate-values-for-existing-fields-and-hidden-fields-client-side">
  ## 既存フィールドと非表示フィールドに値を設定する (クライアント側)
</div>

render メソッドの第2引数として `fields` プロパティを使用すると、既存フィールドと非表示フィールドに値を設定できます。

以下の例では、`Jane` という値が `first_name` フィールドに設定されます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    fields: {
      first_name: 'Jane',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後にロジックを追加してください
}
```

<Warning>
  機密情報は設定しないでください。設定した値はブラウザ (クライアント側) に公開されます。
</Warning>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  第2引数で参照しているフィールド `ID` が、[nodes and components](/docs/ja-jp/customize/forms/nodes-and-components) でクライアント側から利用できることを確認してください。そうでない場合、値は設定されません。
</Callout>

<div id="inject-custom-data-with-shared-variables-server-side">
  ## 共有変数を使ってカスタムデータを渡す (サーバー側)
</div>

render メソッドの第2引数で `vars` プロパティを使うと、サーバー側の変数を渡せます。これにより、機密情報をクライアント側に公開することなく埋め込めます。

以下の例では、値 `123456789` が変数 `external_user_id` に設定されます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    vars: {
      external_user_id: '123456789',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後の処理をここに追加してください
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  共有変数 `{{vars.*}}` にはデータ型の制限はありません。

  共有変数 `{{vars.*}}` は常に自動的にマスクされます。

  `{{fields.*}}` 変数に値を設定する場合とは異なり、`{{vars.*}}` プロパティは値を挿入する前にフォーム内に存在している必要はありません。

  `{{vars.*}}` プロパティを使うと、フォームやそれにリンクされたフローで共有変数を参照できます。詳しくは、[Variables](/docs/ja-jp/customize/forms/variables) をご覧ください。
</Callout>

<div id="fields-and-shared-variables-data-in-actions">
  ## Actions におけるフィールドと共有変数のデータ
</div>

フォームで収集されたフィールドと共有変数のデータは、現在のアクションの resume 関数内で `event.prompt` から自動的に利用できます。

* レンダリングしているプロンプトの ID を持つ `id` プロパティ。
* すべてのフィールドと非表示フィールドのデータを含む `fields` オブジェクト。
* すべての共有変数のデータを含む `vars` オブジェクト。

<Accordion title="event.prompt オブジェクトの例">
  ```json lines theme={null}
  {
    "id": "ap_fuVuFiiQWN3mTEujWTy966",
    "fields": {
      "first_name": "Jane",
      "company_name": "Okta"
    },
    "vars": {
      "external_crm_uuid": "f8f32e6f-2329-49bd-bf21-fa8b0bea2652",
      "api_hostname": "api.example.com"
    }
  }
  ```
</Accordion>

以下の例では、`api.user.setUserMetadata` により、フォームから収集された `event.prompt.fields.company_name` プロパティを使って、`user_metadata` の `company_name` 属性が設定されます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  api.user.setUserMetadata('company_name', event.prompt.fields.company_name);
}
```

<div id="restrictions-and-limitations">
  ## 制約事項と制限
</div>

* 同じ Action 内でユーザーを[リダイレクト](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions)しながらフォームをレンダリングすることはできません。両方を使用する必要がある場合は、別々の Action を使用することを検討してください。
* 1 つの Action でレンダリングできるフォームは 1 つのみです。複数のフォームをレンダリングする必要がある場合は、別々の Action でレンダリングする必要があります。
* `fields` プロパティのサイズ上限は 24 KB です。
* `api.prompt.render()` メソッドは、次のトリガーで使用できます。

  * [post-login](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object)
  * [post-challenge](/docs/ja-jp/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object)