Signup プロンプト と Login プロンプトをカスタマイズする

​

ユースケース

​

用語

• login
• login-id
• login-password
• login-passwordless-sms-otp
• login-passwordless-email-code
• passkey-enrollment
• passkey-enrollment-local

• signup
• signup-id
• signup-password
• passkey-enrollment
• passkey-enrollment-local

• form-content-start
• form-content-end
• form-footer-start
• form-footer-end

• secondary-actions-start
• secondary-actions-end

​

Auth0 DashboardでPartialsを管理する

1. Auth0 Dashboard > Branding > Universal Login に移動し、Enhance screens with partials を選択します。
2. partials エディターでカスタマイズする 画面 を選択します。

3. コードスニペットとテンプレート変数を挿入するには、 ENTRY POINTS を選択します。
4. 選択したエントリポイントに CODE SNIPPETS を追加するには、 を選択します。
5. 選択したエントリポイントに TEMPLATE VARIABLES を追加するには、{ } を選択します。
6. Actions を追加し、partials のフィールドとコンテンツを使ってカスタムロジックを適用するには、 ACTIONS を選択します。
7. 画面 を更新するには、Save and Publish を選択します。

​

Partials をプログラムで管理する

​

Form 入力のスタイル設定とバリデーション

• <input type="text">
• <input type="number">
• <input type="checkbox">
• <input type="password">
• <input type="email">
• <input type="tel">
• <input type="url">
• <select>
• <textarea>

​

クライアントサイドのバリデーション

• <div class="ulp-error-info"> 要素の data-ulp-validation-function 属性を使って、バリデーション関数を参照します。
• <div class="ulp-error-info"> 要素の data-ulp-validation-event-listeners 属性を使って、どの DOM イベントでバリデーション関数を実行するかを指定します。なお、バリデーションは送信時にも自動的に実行されます。
• WCAG に準拠するには、入力欄を対応するエラーメッセージにプログラムで関連付ける必要があります。たとえば、aria-describedby="error-id" や aria-invalid="true" を使用し、スクリーンリーダーがバリデーションエラーを読み上げられるようにします。

​

コンテンツをローカライズする

​

カスタムテキスト変数を作成または更新する

# PUT /api/v2/prompts/signup-id/custom-text/en（英語）
{
  "signup": {
    "var-tos": "I agree with the [Terms of Service](https://en.example.com/tos)"
  }
}

# PUT /api/v2/prompts/signup-id/custom-text/es（スペイン語）
{
  "signup": {
    "var-tos": "Estoy de acuerdo con los [Términos de Servicio](https://es.example.com/tos)"
  }
}

​

Partial でカスタムテキスト変数を使用する

# PUT api/v2/prompts/signup/partials
<div class='ulp-field'>
  <input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'>
  <label for='terms-of-service'>{{ prompt.screen.text.varTos }}</label>
</div>

​

取得したデータをバリデーションして保存する

• Signup プロンプト のデータは pre-user-registration トリガーで利用できます。トリガーでバリデーションエラーが返されると、ユーザーは登録できません。
• Login プロンプト のデータは post-login トリガーで利用できます。バリデーションエラーは、お客様のアプリケーションのエラーページに転送されます。

• Login プロンプト のデータは post-login トリガーで利用できます。バリデーションエラーは、お客様のアプリケーションのエラーページに転送されます。

• Signup プロンプト のデータは、次のカスタムデータベースのアクションスクリプトとともに pre-user-registration トリガーで利用できます: Create User および Login。
• Login プロンプト のデータは、次のカスタムデータベースのアクションスクリプトとともに post-login トリガーで利用できます: Login および Change Password。

• Signup プロンプト と Login プロンプト の両方のデータは post-login トリガーで利用できます。バリデーションエラーは、お客様のアプリケーションのエラーページに転送されます。

• passkey-enrollment プロンプトのデータは pre-user-registration トリガーで利用できます。トリガーでバリデーションエラーが返されると、ユーザーは登録できません。
• passkey-enrollment と passkey-enrollment-local の各プロンプトでは、Post Login トリガーでデータが取得されることはありません。
• passkey-enrollment-local プロンプトのデータは利用できません。これは、このプロンプトが常に post-login トリガーの実行後に表示されるためです。

​

ユーザーのメタデータに保存

// サインアップフォームに以下のコードがある場合
// <div class="ulp-field">
//   <label for="full-name">フルネーム</label>
//   <input type="text" name="ulp-full-name" id="full-name">
// </div>

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

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

​

詳しくはこちら

• 動的変数を使用してカスタムフォーム要素を国際化する