サインアッププロンプトのカスタマイズが収集したエンドユーザーデータの検証と保管にアクションを使用する (1)

サインアッププロンプトのカスタマイズでpre-user-registration（ユーザー登録前）トリガーを使用すると、サインアッププロンプトでエンドユーザーが提供したデータ（ユーザーの電話番号や位置情報など）をuser_metadataに追加することができます。このデータを任意で検証して、プロンプトに検証エラーを表示することもできます。

• テナントに検証済のカスタムドメインがある

• テナントにページテンプレートが設定されている

入力ポイントを使ってプロンプトにカスタムフィールドを挿入するには、Management APIを使用します。この例では、以下のコンテンツを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（ユーザー登録前）アクションを構築するには、［Actions（アクション）］ > ［Library（ライブラリー）］ > ［Build Custom（カスタムの構築）］に移動します。

コードエディターで、以下のように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 Management（ユーザー管理）］ > ［Users（ユーザー）］に移動し、［Details（詳細）］タブでデータが保存されていることを確認します。