> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

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

### 前提条件

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

### Signup Prompt にフィールドを追加する

[Management API](https://auth0.com/docs/ja-jp/api/management/v2/prompts/put-custom-text-by-language.md) を使用して、[エントリポイント](https://auth0.com/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts.md#-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」セクションが表示されます。

![](https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/580LNGMxSkRlazJEdcVNpn/5fa98d4b414ac2133d1d6f4e327cea5a/Screenshot_2023-10-05_at_4.07.38_PM.png)

### Pre-User Registration トリガーで Action を作成する

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

![](https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/52VSznphe2TyoJQnAn4nQg/ed54ca48dea191916a3173b648463fd8/Create_Action_-_EN.png)

コードエディターで、`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);
};
```

### フローに Action を追加する

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

![](https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/5JmjwcdZCX7pDukNa90cgD/dae853b10cf4c41d2d3543a8e167aae7/3333.png)

### Actionをテストする

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

![](https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/7qIWCsP8doFWPJGvMTNXJY/1225f9b3ff7ac01a7e9b59f03ca5e139/2024-01-31_16-10-10.png)

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

![](https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/6TaK1VQyKGELMGmhuRIbVA/b453fe2eb97c95d92e4fbd68ce3cbd6a/2024-01-31_16-12-01.png)

### user\_metadata にデータが保存されたことを確認する

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

![](https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/3x5lyrSJJgJQhbjsxoTmG6/033820476be7f67dc688da993fee7924/2024-01-31_16-13-35.png)