Actions を使用して、サインアッププロンプトのカスタマイズで収集したエンドユーザーデータを検証して保存する

Auth0 Actions を使用して、エンドユーザーのデータを検証して保存する方法を学びます。

Signup Prompt Customization を pre-user-registration トリガーと組み合わせることで、サインアッププロンプトでエンドユーザーが入力したデータ (電話番号や所在地など) を user_metadata に追加できます。必要に応じて、このデータを検証し、プロンプトに検証エラーを表示することもできます。

​

前提条件

• テナントで Custom Domain の検証が完了している
• テナントに Page Template が設定されている

​

サインアッププロンプトにフィールドを追加する

Management API を使用して、Entry Points のいずれかのエントリポイントから、プロンプトにカスタムフィールドを挿入します。この例では、ulp-container-form-content-start の挿入ポイントに次の内容を追加します。

<div class="ulp-field">
  <label for="first-name">First Name</label>
  <input type="text" name="ulp-first-name" id="first-name">
</div>

その結果、サインアップ画面に「First Name」セクションが表示されます:

​

Pre-User Registration Trigger でアクションを作成する

Actions > Library > Build Custom** に移動すると、カスタムの pre-user registration アクションを作成できます。**

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

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

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

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);
};

​

フローにアクションを追加する

Actions > Flows > Pre User Registration > Add Action > Custom に移動し、新しいアクションを登録フローにドラッグ＆ドロップして、Apply をクリックします。

​

アクションをテストする

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

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

​

データが user_metadata に保存されていることを確認する

User Management > Users に移動し、Details タブを開いて、データが保存されていることを確認します。