メインコンテンツへスキップ

始める前に

  1. テナントで Custom Domain が設定されていることを確認します。
  2. すべてのサインアップおよびログイン プロンプトで Universal Login を使用していることを確認し、ログイン プロンプトでは Customize Login Page トグルが無効になっていることを確認します。
  3. Custom Page Template が設定されていることを確認します。
Customize Signup and Login Prompts は、 と Custom Page Template を有効にしているお客様が、アプリのサインアップおよびログイン プロンプトにカスタム フィールドやコンテンツを追加できる機能です。

​
ユースケース

Customize Signup and Login Prompts は、カスタムコンテンツとデータ収集という 2 つのユースケースをサポートしています。 カスタムコンテンツとは、サインアップ プロンプトやログイン プロンプトに直接配置する、テキスト、リンク、画像などの静的コンテンツです。 データ収集では、サインアップ プロンプトやログイン プロンプトに動的に追加されるフォーム要素を使用します。これは、ユーザーの同意や、姓などのユーザー入力データを収集して検証する場合に役立ちます。
機密データまたは規制対象データの伝達や収集のために Signup and Login Prompt Customizations を使用する場合は、Okta との契約で許可されている範囲内に限定してください。

​
用語

プロンプトは、認証フロー内の特定のステップです。各プロンプトには少なくとも 1 つの画面があり、テナントの設定に応じて、サポートされる各画面には 4 つまたは 6 つのエントリポイントがあります。エントリポイントとは、画面内でカスタムコード (partials) を挿入できる場所のことです。 次のプロンプトはカスタマイズできます。 ログイン画面
  • 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
partials では、条件付きロジックや動的変数を実現するために、HTML、CSS、JavaScript、および Liquid syntax を使用できます。さらに、Page Template で使用できる Liquid 変数もすべてサポートされています。 これらのエントリポイントは、データベース接続またはパスワードレス接続が有効な場合に使用できます。
  • form-content-start
  • form-content-end
  • form-footer-start
  • form-footer-end
次のエントリポイントは、少なくとも 1 つのソーシャル接続またはエンタープライズ接続が有効な場合に使用できます。
  • secondary-actions-start
  • secondary-actions-end
各 Custom Prompt オプションとそれぞれの partials のスクリーンショット

​
Auth0 Dashboard を使用して Partials を管理する

Dashboard を使用すると、partials を使って Login 画面と Signup 画面にカスタムフィールドやコンテンツを挿入できます。
  1. Auth0 Dashboard > Branding > Universal Login に移動し、Enhance screens with partials を選択します。
  2. partials エディターでカスタマイズする 画面 を選択します。
画面 では、次の レンダリングモード を使用できます。
  • STANDARD: screen はデフォルトの Universal Login UI でレンダリングされます。partials を使用して、コードスニペットや テンプレート変数 を挿入できます。
  • ADVANCED: screen は ACUL を使用してレンダリングされるため、partials は適用されません。
  • ADVANCED (FILTERED): screen は特定のアプリケーションと組織に ACUL を適用してレンダリングされます。partials は、ACUL フィルターの対象外である screens にのみ適用されます。
  1. エントリポイントを選択し、コードスニペットとテンプレート変数を挿入します。
  2. を選択して、選択したエントリポイントに コードスニペット を追加します。
  3. { } を選択して、選択したエントリポイントに テンプレート変数 を追加します。
  4. ACTIONS を選択して、Actions を追加し、partials のフィールドとコンテンツを使用してカスタムロジックを適用します。
  5. Save and Publish を選択して、画面 を更新します。
[partials]

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

Auth0 Management API (GET /prompts/{prompts_name}/partials) を使用して Partials を管理できます。Partials を追加、更新、または削除する際は、すべてのプロンプトで screen を指定する必要があります。Partials は最大 10,000 文字です。 Partials は、ターミナルで auth0 ul customize を実行して、Auth0 CLI の Customize Interface を使用して管理することもできます。
Partials のコマンドラインインターフェースを示す画像。

​
フォーム入力のスタイル適用と検証

Customize Signup and Login Prompts では、特定の HTML フォーム要素に対して、組み込みのスタイルとクライアント側バリデーションを利用できます。サポートされている要素は次のとおりです。
  • <input type="text">
  • <input type="number">
  • <input type="checkbox">
  • <input type="password">
  • <input type="email">
  • <input type="tel">
  • <input type="url">
  • <select>
  • <textarea>
組み込みの入力スタイルを使用するには、対象のフォーム要素を ulp-field クラスを持つ <div> で囲みます。同様に、組み込みのエラースタイルを使用するには、同じ <div> に ulp-error クラスを追加します。ulp-error-info 要素が存在する場合は、スタイル付きのエラーメッセージも表示されます。 partials エディターを使用すると、組み込みのコードスニペットを確認できます。

​
クライアント側の検証

この機能のクライアント側検証フレームワークでは、HTML 属性を使用して 1 つ以上のカスタム検証関数を実行し、ユーザー入力を検証できます。検証関数は Partial に直接含めることも、ページテンプレートの <head> に含めることもできます。 フォーム要素にクライアント側の検証を追加するには、次のようにします。
  • <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" を使用して、スクリーンリーダーが検証エラーを読み上げられるようにします。
サインアップページでサードパーティの JavaScript を使用する場合は注意してください。機密性の高いセキュリティ関連情報がサインアップページを通過することが多いため、クロスサイトスクリプティングのリスクにさらされるおそれがあります。可能な限り、Auth0 は送信前にユーザーが提供したデータを検証することを推奨しています。

​
コンテンツのローカライズ

一部のコンテンツは、Custom Text API を使用して新しいカスタムテキスト変数を定義することでローカライズできます。画面と言語の組み合わせごとに、カスタムテキスト変数は最大30個まで定義できます。

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

カスタムテキスト変数は、Custom Text API を使用して管理します。カスタムテキスト変数を追加、更新、または削除する呼び出しでは、screen を指定する必要があります。カスタムテキスト変数は、var-<name> の命名規則に従います。Markdown リンクがサポートされており、ユーザーに表示される前に HTML の <a> 要素に変換されます。 以下は、英語とスペイン語で利用規約チェックボックスのラベルテキスト用の変数を追加する呼び出し例です。詳細については、 を参照してください。 
# 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 でカスタムテキスト変数を使用する

カスタムテキスト変数は、Partial 内で prompts.screen.text オブジェクトを使って参照します。前のセクションの var-tos の例に対応する参照は、prompt.screen.text.varTos です。以下に、以前に作成した変数を Signup ID プロンプトの Partial で使用する例を示します。Management API の var-tos 変数は、Partial では varTos として参照される点に注意してください。 
# 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>

​
収集したデータを検証して保存する

カスタムフォーム要素で収集したデータは Actions で利用できます。Auth0 では、収集したデータを保存または送信する前に検証することを推奨しています。
カスタムフォーム要素を使用する場合は、データを Actions で利用できるように、すべての input 名に ulp- プレフィックスを含める必要があります。
各 Action は、収集されたデータを event.request.body 上のオブジェクトとして受け取ります。お客様は api.validation.error 関数を使用して、検証エラーを返すことができます。 データベース接続を使用する場合:
  • サインアップ プロンプトのデータは、pre-user-registration トリガーで利用できます。トリガーから検証エラーが返されると、ユーザーは登録できません。
  • ログイン プロンプトのデータは、post-login トリガーで利用できます。検証エラーはお客様のアプリケーションのエラーページに転送されます。
カスタムデータベース接続を使用する場合:
  • サインアップ プロンプトのデータは、次のカスタムデータベース Action スクリプトとともに pre-user-registration トリガーで利用できます: Create User と Login。
  • ログイン プロンプトのデータは、次のカスタムデータベース Action スクリプトとともに post-login トリガーで利用できます: Login と Change Password。
カスタムデータベース Action スクリプトを使用するには、カスタムデータベース接続で Context objects in database scripts を有効にしてください。詳細については、Enable context object を参照してください。
パスワードレス接続を使用する場合:
  • サインアップ プロンプトと ログイン プロンプトの両方のデータは、post-login トリガーで利用できます。検証エラーはお客様のアプリケーションのエラーページに転送されます。
passkey プロンプトを使用する場合:
  • passkey-enrollment プロンプトのデータは、pre-user-registration トリガーで利用できます。トリガーから検証エラーが返されると、ユーザーは登録できません。
  • passkey-enrollment プロンプトと passkey-enrollment-local プロンプトでは、Post Login トリガーでデータが収集されることはありません。
  • passkey-enrollment-local プロンプトのデータにはアクセスできません。これは、このプロンプトが常に post-login トリガーの実行後に表示されるためです。
ソーシャル接続またはエンタープライズ接続を使用する場合:
フォームで収集したデータは、保存または表示する前に必ずサニタイズしてください。
  • 保存するデータは、必ず Liquid の {{escape}} ヘルパー関数 を通してください
  • データを Email Template に表示する場合は、Liquid 構文を削除してください
  • データを Web ページに表示する場合は、HTML エンティティをエスケープしてください
  • データをデータベースに保存する場合は、パラメータ化クエリを使用してください
  • データをクエリ文字列に渡す場合は、{{encodeURI}} または {{encodeURIParam}} などを使用してエンコードしてください
リスク軽減策と、データを安全に保存するためのベストプラクティスの詳細については、このチートシート を参照してください。

​
ユーザーメタデータに保存する

Action では、取得したデータを検証および保存のために外部 API に送信したり、api.user.setUserMetadata を使用してユーザーの user_metadata に保存したりできます。 
// サインアップフォームに以下のコードがある場合
// <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);
};

​
詳細