> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-actions-modules-ga.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Auth0 Actions を使用して、カスタマイズした Universal Login の signup ページにあるカスタムフィールドのデータを検証し、保存します。

# Signup Prompt のカスタマイズで収集したエンドユーザーデータを検証して保存するために Actions を使用する

[Signup Prompt のカスタマイズ](/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts) と `pre-user-registration` トリガーを使用すると、signup prompt でエンドユーザーが入力したデータ (ユーザーの電話番号や所在地など) を `user_metadata` に追加できます。必要に応じて、このデータを検証し、プロンプトにバリデーションエラーを表示することもできます。

<h3 id="prerequisites">
  前提条件
</h3>

* テナントで [カスタムドメイン](/docs/ja-jp/customize/custom-domains) が検証済みであること
* テナントで [ページテンプレート](/docs/ja-jp/customize/login-pages/universal-login/customize-templates) が設定されていること

<h3 id="add-a-field-to-the-signup-prompt">
  Signup Prompt にフィールドを追加する
</h3>

[Management API](https://auth0.com/docs/api/management/v2/prompts/put-custom-text-by-language) を使用して、[エントリポイント](/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts#-signup-prompt-entry-points) のいずれかから、プロンプトにカスタムフィールドを挿入します。この例では、`ulp-container-form-content-start` の挿入ポイントに次の内容を追加します：

```html lines theme={null}
<div class="ulp-field">
  <label for="first-name">First Name</label>
  <input type="text" name="ulp-first-name" id="first-name">
</div>
```

その結果、Signup Prompt に「First Name」セクションが表示されます。

<Frame>
  <img src="https://mintcdn.com/docs-staging-actions-modules-ga/XUY0i-O8y4wYuXzV/docs/images/cdy7uua7fh8z/580LNGMxSkRlazJEdcVNpn/5fa98d4b414ac2133d1d6f4e327cea5a/Screenshot_2023-10-05_at_4.07.38_PM.png?fit=max&auto=format&n=XUY0i-O8y4wYuXzV&q=85&s=d45547c2a6567e42c81631bbe301fc0e" alt="" width="627" height="1196" data-path="docs/images/cdy7uua7fh8z/580LNGMxSkRlazJEdcVNpn/5fa98d4b414ac2133d1d6f4e327cea5a/Screenshot_2023-10-05_at_4.07.38_PM.png" />
</Frame>

<h3 id="create-an-action-in-the-pre-user-registration-trigger">
  Pre-User Registration トリガーで Action を作成する
</h3>

カスタムの pre-user registration Action は、[**Actions > Library > Build Custom**](https://manage.auth0.com/dashboard/us/dev-6endizjt/actions/library)**.** に移動して作成できます。

<Frame>
  <img src="https://mintcdn.com/docs-staging-actions-modules-ga/XUY0i-O8y4wYuXzV/docs/images/cdy7uua7fh8z/52VSznphe2TyoJQnAn4nQg/ed54ca48dea191916a3173b648463fd8/Create_Action_-_EN.png?fit=max&auto=format&n=XUY0i-O8y4wYuXzV&q=85&s=7a66928d3a760ef1e2f0a1e763a82bc5" alt="" width="502" height="555" data-path="docs/images/cdy7uua7fh8z/52VSznphe2TyoJQnAn4nQg/ed54ca48dea191916a3173b648463fd8/Create_Action_-_EN.png" />
</Frame>

コードエディターで、`onExecutePreUserRegistration` ハンドラーを更新します。

```js lines theme={null}
exports.onExecutePreUserRegistration = async (event, api) => {
  const firstName = event.request.body['ulp-first-name'];
  api.user.setUserMetadata("firstName", firstName);
};
```

必要に応じて、`api.validation.error` メソッドを呼び出してユーザー入力を検証し、バリデーションエラーを返してから、Actionをデプロイできます:

```js lines theme={null}
exports.onExecutePreUserRegistration = async (event, api) => {
  const firstName = event.request.body['ulp-first-name'];
  if(!firstName) {
    api.validation.error("invalid_payload", "Missing first name");
    return;
  }

  api.user.setUserMetadata("firstName", firstName);
};
```

<h3 id="add-the-action-to-the-flow">
  フローに Action を追加する
</h3>

[**Actions > Flows > Pre User Registration > Action を追加 > カスタム**](https://manage.auth0.com/dashboard/us/dev-6endizjt/actions/flows/pre-user-signup/) に移動し、新しい Action を登録フローにドラッグ＆ドロップして、**Apply** を選択します。

<Frame>
  <img src="https://mintcdn.com/docs-staging-actions-modules-ga/_vHZo--51Aha0KWo/docs/images/cdy7uua7fh8z/5JmjwcdZCX7pDukNa90cgD/dae853b10cf4c41d2d3543a8e167aae7/3333.png?fit=max&auto=format&n=_vHZo--51Aha0KWo&q=85&s=acb0bed9e77d33f00c25d4f17c47f135" alt="" width="2222" height="795" data-path="docs/images/cdy7uua7fh8z/5JmjwcdZCX7pDukNa90cgD/dae853b10cf4c41d2d3543a8e167aae7/3333.png" />
</Frame>

<h3 id="test-the-action">
  Actionをテストする
</h3>

テスト用のフローでアカウント登録を行い、**First Name** フィールドを空欄のままにします。送信すると、エラーが表示されます。

<Frame>
  <img src="https://mintcdn.com/docs-staging-actions-modules-ga/PFGXbDbxlrQUNaew/docs/images/cdy7uua7fh8z/7qIWCsP8doFWPJGvMTNXJY/1225f9b3ff7ac01a7e9b59f03ca5e139/2024-01-31_16-10-10.png?fit=max&auto=format&n=PFGXbDbxlrQUNaew&q=85&s=69e26cb36e69f37b4744837c43fe6a0d" alt="" width="369" height="773" data-path="docs/images/cdy7uua7fh8z/7qIWCsP8doFWPJGvMTNXJY/1225f9b3ff7ac01a7e9b59f03ca5e139/2024-01-31_16-10-10.png" />
</Frame>

その後、**First Name** フィールドに名前を入力すると、正常に送信できます。

<Frame>
  <img src="https://mintcdn.com/docs-staging-actions-modules-ga/HUG1HenOThCKU6DB/docs/images/cdy7uua7fh8z/6TaK1VQyKGELMGmhuRIbVA/b453fe2eb97c95d92e4fbd68ce3cbd6a/2024-01-31_16-12-01.png?fit=max&auto=format&n=HUG1HenOThCKU6DB&q=85&s=1ccd37169365ccbbc4430b4f3d8e321b" alt="" width="325" height="722" data-path="docs/images/cdy7uua7fh8z/6TaK1VQyKGELMGmhuRIbVA/b453fe2eb97c95d92e4fbd68ce3cbd6a/2024-01-31_16-12-01.png" />
</Frame>

<h3 id="verify-that-the-data-was-saved-on-user_metadata">
  user\_metadata にデータが保存されたことを確認する
</h3>

[**User Management > Users**](https://manage.auth0.com/dashboard/us/dev-6endizjt/users) に移動し、Details タブでデータが保存されていることを確認します。

<Frame>
  <img src="https://mintcdn.com/docs-staging-actions-modules-ga/1VGQpxUWqmiToshG/docs/images/cdy7uua7fh8z/3x5lyrSJJgJQhbjsxoTmG6/033820476be7f67dc688da993fee7924/2024-01-31_16-13-35.png?fit=max&auto=format&n=1VGQpxUWqmiToshG&q=85&s=59a379f5895722d51e55ed8ac1b6286b" alt="" width="1427" height="629" data-path="docs/images/cdy7uua7fh8z/3x5lyrSJJgJQhbjsxoTmG6/033820476be7f67dc688da993fee7924/2024-01-31_16-13-35.png" />
</Frame>