サインアップとログインのカスタマイズが一般提供

企業によってユーザー登録やログインの要件は異なります。例えば、サインアップ時に姓名を入力してもらう必要があったり、アカウントを作成する前に利用規約に同意頂く必要があったりします。

このような特定のビジネスニーズやユースケースに対応するために、ユニバーサルログインのサインアップとログインの UX をプロコードでカスタマイズできる機能を導入しました。この機能はエンタープライズおよびプロフェッショナルプランのお客様にご利用いただけます。

この機能を使用すると、サインアップおよびログイン画面に追加の入力項目や独自コンテンツなどを挿入し、クライアント側およびサーバー側の検証を行うことができます。

以下のような用途に利用できます:

• 必要な顧客情報（名前、電話番号、Eメール、好み、同意など）を収集するための新しい入力項目の追加
• サインアップ前にサービス利用規約やプライバシーポリシーを提示し、同意を取得するための新しいフォーム要素の追加
• URL、画像、マーケティング情報などの独自コンテンツの追加
• カスタム要素をさまざまな言語にローカライズ

はじめに

新しい Partials API を使うことで、サインアップやログイン画面に任意の HTML、CSS、JavaScript を挿入することができます。新しい入力項目やカスタムコンテンツを挿入することができますし、JavaScript を使って非同期でクライアントサイドの入力検証を実行したり、 Liquid テンプレート を利用して変数を条件にして切り替えることでアクセスに応じたコンテンツにしたりするといったことができます。以下は、ユーザ登録画面にカスタムのコードを追加する例です。:

# eg: PUT /api/v2/prompts/signup/partials

# Request Body
{
  "signup": {
    "form-content-start": "<div class='ulp-field'><label for='first-name'>Full Name</label><input type='text' name='ulp-full-name' id='full-name'></div>",
    "form-content-end": "<div class='ulp-field'><input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'><label for='terms-of-service'>I agree to the <a href='https://my.app/terms' target='_blank'>Terms of service</a></label></div>",
  }
}

ユーザがサインアップで追加の入力項目に入力した内容は Actions でアクセスできます。以下は、ユーザが入力したデータをユーザの user_metada に保存する例です。

/**
* Given this code in the signup form:
* <div class="ulp-field">
*   <label for="full-name">Full Name</label>
*   <input type="text" name="ulp-full-name" id="full-name">
* </div>
* <div class="ulp-field">
*   <label for="terms-of-service">
*     I agree to the <a href='https://my.app/terms' target='_blank'>Terms of service</a>
*   </label>
*   <input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'>
* </div>
**/

exports.onExecutePreUserRegistration = async (event, api) => {
  const fullName = event.request.body['ulp-full-name'];
  const terms = event.request.body['ulp-terms-of-service'];
  
  if(!fullName) {
    api.validation.error("invalid_payload", "Missing Name");
    return;
  }
  
  if(!terms) {
    api.validation.error("invalid_payload", "Acceptance is Required");
    return; 
  }

  api.user.setUserMetadata("fullName", fullName);
  api.user.setUserMetadata("termsAcceptance", terms);
};

サインアップやログインのプロンプトをカスタマイズする仕組みやチュートリアル、サンプルについては、公開されているドキュメントを参照してください。

• ドキュメント: サインアップとログインのプロンプトをカスタマイズ
• Management API ドキュメント: Auth0 Management API v2: Manage Partials

(英語ブログからの翻訳: ソリューションエンジニア 辻 義一)