Skip to main content
Liquid template language で作成したページテンプレートを使用すると、 ページをカスタマイズできます。ページテンプレートでは、ログインボックスや チャレンジなど、Universal Login のプロンプトの周囲に表示するコンテンツを定義できます。同じページテンプレートがすべてのログインフローページで使用されるため、このカスタマイズ方法を使えば、統一されたブランド体験をユーザーに簡単に提供できます。 カスタマイズしたページテンプレートを使用するには、テナントに カスタムドメイン を設定する必要があります。さらに、Universal Login のページテンプレートを更新できるのは Management API のみです。
prompt という用語は、サインアップページや MFA チャレンジなど、ログインフロー内の特定のステップを指します。このページの変数やコードサンプルでは、prompt または widget という用語が使われている場合があります。これらの用語は Universal Login の文脈では同義ですが、コード内では互換的に使用できません。正しくカスタマイズするため、コードに追加する要素には、記載されている適切な用語を使用していることを確認してください。

ページテンプレートの要件

Universal Login のページテンプレートを作成する際は、次のタグを含める必要があります。 ページ上で プロンプト を中央に配置するには、<body> 要素に class="_widget-auto-layout" を追加します。必要に応じて プロンプト を手動で配置する場合は、この属性を省略できます。
ページテンプレートの制限事項:
  • Auth0 がプロジェクトをビルドするたびに、CSS クラス名は変更されます。これらのクラスを対象とするカスタム CSS は、新しいビルドのたびに機能しなくなります。
  • Universal Login ページの HTML 構造は変更される可能性があります。中断を防ぐため、HTML 構造に依存するカスタマイズは避けてください。
詳細については、CSS のカスタマイズを参照してください。
テンプレートの例:
次の例は、必要なタグを含む、作成可能な最もシンプルなUniversal Loginのページテンプレートです。
Storybook を使ってテンプレートを表示する場合、<script> タグはこれらのタグを正しく解析できないため、レンダリングが崩れる点に注意してください。回避策として、テンプレートコードに <script> タグを適切に注入するには、バッククォート (`) とプラス記号 (+) を使用します。:<scr`+`ipt>console.log("test");</scr`+`ipt>

ページテンプレート の変数

ページテンプレート では、ページのレンダリング方法に影響するさまざまなコンテキスト変数をサポートしています。 たとえば、これらの変数を使用して次のことができます。
  • ログインフローに関連付けられたアプリケーションに応じて、異なるコンテンツをレンダリングする。たとえば、異なるページデザインが必要な 2 つのブランドを管理している場合があります。
  • 特定の プロンプト に応じて、異なるコンテンツをレンダリングする。たとえば、Login page にはアプリケーションで提供している内容に関する情報を追加しつつ、MFA フローでは MFA challenge プロンプト のみを表示したい場合があります。
  • サポートページへのリンクや連絡先情報など、ユーザーサポート情報を含むフッターを追加する。

利用可能な変数

ページテンプレートでは、次の変数を使用できます。

アプリケーション

ブランディング

テナント

Organizations

以下の変数は、Auth0 Organizations 機能に関連します。

テナント

トラッキング

Correlation ID は現在、早期アクセス段階です。この機能を使用することで、Okta の Master Subscription Agreement に記載された該当する Free Trial 条項に同意したものとみなされます。Auth0 の製品リリースサイクルの詳細については、Product Release Stages をご覧ください。このプログラムに参加するには、Auth0 Support または担当の Technical Account Manager までお問い合わせください。
一意の correlation_id には、Personally Identifiable Information (PII) やその他の機密情報を絶対に使用しないことを強く推奨します。

カスタムドメイン

以下の変数は、現在のセッションで使用されているカスタムドメインを表します。これらの変数を使用すると、ユーザーがアクセスしているカスタムドメインに応じて異なるコンテンツをレンダリングしたり、そのドメインに設定されたドメインメタデータを取得したりできます。

現在のユーザー情報

以下の変数は、認証後にレンダリングされるページでのみ使用できます。

現在の画面情報

プロンプト

prompt という用語は、ログインフロー内の特定のステップを指します。1 つのプロンプトは、1 つ以上の画面で構成される場合があります。プロンプトは、Auth0 Dashboard または Management API のプロンプト endpoints で管理できます。 以下のセクションでは、利用可能な各プロンプトの詳細を紹介します。

画面: brute-force-protection-unblock

brute-force-protection-unblock 参照用スクリーンショット

画面: brute-force-protection-unblock-success

brute-force-protection-unblock-success 参照用スクリーンショット

画面: brute-force-protection-unblock-failure

brute-force-protection-unblock-failure 参照用スクリーンショット

画面: redeem-ticket

redeem-ticket 参考スクリーンショット

画面: 同意

consent の参考スクリーンショット

画面: device-code-activation

device-code-activation の参考スクリーンショット

画面: device-code-activation-allowed

device-code-activation-allowed の参考スクリーンショット

画面: device-code-activation-denied

device-code-activation-denied の参考スクリーンショット

画面: device-code-confirmation

device-code-confirmation の参考スクリーンショット

画面: email-otp-challenge

email-otp-challenge 参照スクリーンショット

画面: email-verification-result

email-verification-result の参照スクリーンショット

画面: accept-invitation

accept-invitation の参照スクリーンショット

画面: login

login の参照スクリーンショット

画面: login-id

login-id reference screenshot

画面: login-password

login-password 参照用スクリーンショット

画面: login-passwordless-email-code

login-passwordless-email-code 参照スクリーンショット
login-passwordless-email-link 参照スクリーンショット

画面: login-passwordless-sms-otp

login-passwordless-sms-otp 参照スクリーンショット

画面: login-email-verification

login-email-verification 参照スクリーンショット

画面: logout

logout reference screenshot

画面: mfa-detect-browser-capabilities

mfa-detect-browser-capabilities reference screenshot

画面: mfa-enroll-result

mfa-enroll-result reference screenshot

画面: mfa-login-options

mfa-login-options reference screenshot

画面: mfa-begin-enroll-options

mfa-begin-enroll-options reference screenshot

画面: mfa-email-challenge

mfa-email-challenge の参照スクリーンショット

画面: mfa-email-list

mfa-email-list の参照スクリーンショット

画面: mfa-otp-enrollment-qr

mfa-otp-enrollment-qr 参照用スクリーンショット

画面: mfa-otp-enrollment-code

mfa-otp-enrollment-code 参照用スクリーンショット

画面: mfa-otp-challenge

mfa-otp-challenge 参照用スクリーンショット

画面: mfa-phone-challenge

mfa-phone-challenge の参考スクリーンショット

画面: mfa-phone-enrollment

mfa-phone-enrollment の参考スクリーンショット

画面: mfa-push-welcome

mfa-push-welcome reference screenshot

画面: mfa-push-enrollment-qr

mfa-push-enrollment-qr reference screenshot

画面: mfa-push-challenge-push

mfa-push-challenge-push reference screenshot

画面: mfa-push-list

mfa-push-list reference screenshot

画面: mfa-recovery-code-enrollment

mfa-recovery-code-enrollment の参照スクリーンショット

画面: mfa-recovery-code-challenge

mfa-recovery-code-challenge の参照スクリーンショット

画面: mfa-country-codes

mfa-country-codes reference screenshot

画面: mfa-sms-enrollment

mfa-sms-enrollment reference screenshot

画面: mfa-sms-challenge

mfa-sms-challenge reference screenshot

画面: mfa-sms-list

mfa-sms-list reference screenshot

画面: mfa-voice-enrollment

mfa-voice-enrollment reference screenshot

画面: mfa-voice-challenge

mfa-voice-challenge reference screenshot

画面: mfa-webauthn-platform-enrollment

mfa-webauthn-enrollmentの参照スクリーンショット

画面: mfa-webauthn-roaming-enrollment

mfa-webauthn-guidance-enrollment 参照スクリーンショット

画面: mfa-webauthn-platform-challenge

mfa-webauthn-challenge-user-initiated 参照スクリーンショット

画面: mfa-webauthn-roaming-challenge

mfa-webauthn-challenge-user-initiated 参照スクリーンショット

画面: mfa-webauthn-change-key-nickname

mfa-webauthn-change-key-nickname 参照スクリーンショット

画面: mfa-webauthn-enrollment-success

mfa-webauthn-enrollment-success 参照スクリーンショット

画面: mfa-webauthn-error

mfa-webauthn-error reference screenshot

画面: mfa-webauthn-not-available-error

mfa-webauthn-not-available-error reference screenshot

画面: organization-selection

organization-selection の参考スクリーンショット

画面: organization-picker

organization-picker の参考スクリーンショット

画面: reset-password-request

reset-password-request reference screenshot

画面: reset-password-email

reset-password-email reference screenshot

画面: reset-password

reset-password reference screenshot

画面: reset-password-success

reset-password-success reference screenshot

画面: reset-password-error

reset-password-error reference screenshot

画面: reset-password-mfa-email-challenge

reset-password-mfa-email-challenge reference screenshot

画面: reset-password-mfa-otp-challenge

reset-password-mfa-otp-challenge reference screenshot

画面: reset-password-mfa-phone-challenge

reset-password-mfa-phone-challenge reference screenshot

画面: reset-password-mfa-push-challenge-push

reset-password-mfa-push-challenge-push reference screenshot

画面: reset-password-mfa-recovery-code-challenge

reset-password-mfa-recovery-code-challenge reference screenshot

画面: reset-password-mfa-sms-challenge

reset-password-mfa-sms-challenge reference screenshot

画面: reset-password-mfa-voice-challenge

reset-password-mfa-voice-challenge reference screenshot

画面: reset-password-mfa-webauthn-platform-challenge

reset-password-mfa-webauthn-platform-challenge reference screenshot

画面: reset-password-mfa-webauthn-roaming-challenge

reset-password-mfa-webauthn-roaming-challenge reference screenshot

画面: passkey-enrollment

passkey-enrollment の参照スクリーンショット

画面: passkey-enrollment-local

passkey-enrollment-local 参考スクリーンショット

画面: phone-identifier-challenge

phone-identifier-challenge の参照スクリーンショット

画面: phone-identifier-enrollment

phone-identifier-enrollment 参照スクリーンショット

画面: signup

サインアップ参照スクリーンショット

画面: signup-id

signup-id 参照スクリーンショット

画面: signup-password

signup-password reference screenshot

画面: ステータス

status reference screenshot

カスタムクエリパラメータ

Auth0 では、ext- パラメータは攻撃者が操作できる URL 入力値になり得るため、信頼しない値として扱うことを推奨しています。セキュリティ上の懸念を軽減するため、以下の推奨手順に従ってください。
  • テンプレートでは HTML エスケープした出力を使用する
  • <script> ブロックやイベントハンドラー属性内で ext- の値を埋め込まない
  • これらの値を URL で使用する前に、JavaScript スキームや data スキームでないことを検証する
文字の許可リストを使用しても、あらゆるレンダリングコンテキストにおける XSS リスクをすべて排除できるわけではない点に注意してください。セキュリティガイドラインと推奨事項の詳細については、Security Guidance を参照してください。
認証リクエストを開始する際に、/authorize エンドポイントにクエリパラメータを渡すことで、コンテキスト内でも使用できます。これらのカスタムクエリパラメータには、ext- 接頭辞が付いている必要があります。 次の例では、ext-gaext-test のクエリパラメータをログインページテンプレートで使用しています。
ユーザー定義のクエリパラメータには、次の制限があります。
  • ext- パラメータ名は一意である必要があります
  • 1 つの認可リクエストに含められる ext- パラメータは最大 10 個です
  • ext- パラメータ名は ext- で始まり、使用できるのは [a-zA-z0-9_-] のみで、最大 28 文字です。次のとおりです: /^ext-[\w-]{1,28}$/
  • ext- パラメータ値に使用できるのは [a-zA-Z0-9-.*~@+ /:_] のみで、最大 255 文字です。次のとおりです: /^[-\w.*~@+ /:]{1,255}$/

カスタムサインアッププロンプト

カスタムサインアッププロンプトを使用する場合は、カスタムページテンプレートを有効にする必要があります。以下は、カスタムサインアッププロンプトをレンダリングするための最小限のテンプレートです。
詳しくは、Signup と Login のプロンプトをカスタマイズするをご覧ください。

使用例

ログインボックス + 画像レイアウト

次のテンプレートでは、ログイン/サインアップページでのみ、左側にログインボックス、右側に画像が表示されます。その他のページはデフォルトの表示になります。
メール、ユーザー名/パスワード、画像レイアウトを含むUniversal Loginボックスの例

ページのフッター

以下の例では、プライバシーポリシーと利用規約へのリンクを含む灰色のフッターを追加します。
メールアドレス/パスワードとフッターのレイアウトを示したUniversal Loginボックスの例

ページテンプレート API

ページテンプレートを設定するには、を使用します。まず、update:brandingread:brandingdelete:branding のスコープを持つ Management API トークンを取得する必要があります。API Explorer Application を使用してトークンを生成する場合は、Auth0 Management API でこれらのスコープが有効になっていることを確認してください。 テンプレートを設定するには、次のエンドポイントを使用します: テンプレートを取得するには、次のエンドポイントを使用します。 テンプレートを削除するには、次のエンドポイントを使用します。 ページテンプレートの最大サイズは 100KB です。これで足りない場合は、画像や CSS ファイルをページテンプレートのコードの外に移すことを検討してください。

CSS のカスタマイズ

ページテンプレートの制限事項:
  • CSS のクラス名は、Auth0 がプロジェクトをビルドするたびに変わります。これらのクラスを対象にしたカスタム CSS は、ビルドのたびに機能しなくなります。
  • Universal Login ページの HTML 構造は変更される可能性があります。問題を避けるため、HTML 構造に依存するカスタマイズは行わないでください。
CSS を使ってカスタマイズできる項目がいくつかあります。
  • <head> 要素内の <style> タグに以下の変数を記述することで、ログインプロンプトのサイズを変更できます。
    • --prompt-width を使ってコンテナーの幅を調整できます。既定値は 400px です。
    • フォーム の場合: --form-max-width を使ってフォームの最大幅を設定できます。既定値は 500px です。
      • コードを Form ページにのみ適用するには、<head> 要素に {% if prompt.name == "custom-form" %} を含めます。
  • Google フォントは、インポートして --font-family CSS 変数を上書きすることで使用できます。
  • <body> 要素に class="_hide-prompt-logo" を追加すると、テナントロゴを非表示にできます。
  • <body> 要素に class="_use-custom-prompt-logo" を追加すると、カスタムロゴを指定できます。これにより、たとえばアプリケーションに応じてログインページのロゴを変更できます。
現在の実装では、これ以上 CSS をカスタマイズすることはできません。生成される HTML を見ると、次のようなコードが表示されます。

Auth0 CLI の使用

Auth0 CLI を使用すると、ページテンプレートを簡単に更新できます。 Auth0 CLI で次を実行します。 auth0 universal-login customize Auth0 CLI を実行すると、2 つのウィンドウが開きます。
  • ページテンプレートが適用されたログインページを表示する Storybook を開いたブラウザーウィンドウ:
ページテンプレートの Storybook
  • ページテンプレートのコードを表示する既定のエディター:
undefined
これでページテンプレートのコードを変更し、その変更をブラウザーウィンドウでプレビューできます。 ウィンドウを閉じると、テンプレートを保存するかどうかを確認されます。Yes を選択すると、テンプレートがテナントにアップロードされます。

トラブルシューティング

テンプレートが適用されない場合は、{customDomain}/authorize にアクセスしていることを確認してください。{yourDomain}/authorize にアクセスしていると、Auth0 はページテンプレートをレンダリングしません。