Skip to main content
Liquid テンプレート言語 で作成したページテンプレートを指定することで、 ページをカスタマイズできます。ページテンプレートを使用すると、ログインボックスや チャレンジなど、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 つのブランドを管理している場合です。
  • 特定のプロンプトに応じて、異なるコンテンツを表示する。たとえば、ログインページにはアプリケーションが提供する内容に関する情報を追加しつつ、MFA フローでは MFA チャレンジのプロンプトのみを表示したい場合があります。
  • サポートページへの links や連絡先情報など、ユーザーサポート情報を含むフッターを追加する。

使用できる変数

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

アプリケーション

ブランディング

テナント

組織

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

テナント

追跡

Correlation ID は現在 Early Access (EA) です。この機能を使用すると、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 の prompts エンドポイントから管理できます。 以下のセクションでは、使用可能な各プロンプトの詳細を示します。

画面: 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 の参照スクリーンショット

画面: 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 参照スクリーンショット

画面: 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 参照用スクリーンショット

画面: mfa-detect-browser-capabilities

mfa-detect-browser-capabilities 参考スクリーンショット

画面: mfa-enroll-result

mfa-enroll-result 参考スクリーンショット

画面: mfa-login-options

mfa-login-options 参考スクリーンショット

画面: mfa-begin-enroll-options

mfa-begin-enroll-options 参考スクリーンショット

画面: 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 参照スクリーンショット

画面: mfa-push-enrollment-qr

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

画面: mfa-push-challenge-push

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

画面: mfa-push-list

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

画面: mfa-recovery-code-enrollment

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

画面: mfa-recovery-code-challenge

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

画面: mfa-country-codes

mfa-country-codes 参照スクリーンショット

画面: mfa-sms-enrollment

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

画面: mfa-sms-challenge

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

画面: mfa-sms-list

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

画面: mfa-voice-enrollment

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

画面: mfa-voice-challenge

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

画面: 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 の参照用スクリーンショット

画面: 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 リファレンススクリーンショット

画面: reset-password-email

reset-password-email 参照スクリーンショット

画面: reset-password

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

画面: reset-password-success

reset-password-success リファレンススクリーンショット

画面: reset-password-error

reset-password-error リファレンススクリーンショット

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

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

画面: 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 参照スクリーンショット

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

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

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

カスタムサインアッププロンプトを使用するには、カスタムページテンプレートを有効にする必要があります。以下は、カスタムサインアッププロンプトを表示するために必要な最小限のテンプレートです。
詳しくは、サインアップおよびログインのプロンプトをカスタマイズするを参照してください。

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

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

ページフッター

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

ページテンプレート API

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

CSS のカスタマイズ

ページテンプレートの制限事項:
  • Auth0 がプロジェクトをビルドするたびに、CSS クラス名は変更されます。これらのクラスを対象にしたカスタム CSS は、新しいビルドごとに機能しなくなります。
  • Universal Login ページの HTML 構造は変更される可能性があります。中断を避けるため、HTML 構造に依存するカスタマイズは行わないでください。
CSS を使用してカスタマイズできる項目がいくつかあります。
  • 以下の変数を <head> 要素内の <style> タグで囲むことで、ログインプロンプトのサイズを変更できます。
    • --prompt-width を使用してコンテナの幅を調整します。デフォルト値は 400px です。
    • Forms の場合: --form-max-width を使用してフォームの最大幅を設定します。デフォルト値は 500px です。
      • コードを Form ページにのみ適用するには、<head> 要素に {% if prompt.name == "custom-form" %} を含めます。
  • Google Fonts は、インポートして --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 はページテンプレートをレンダリングしません。