メインコンテンツへスキップ
Liquidテンプレート言語で作成したページテンプレートを提供することで、ユニバーサルログインページをカスタマイズできます。ページテンプレートを使用して、ログインボックスやチャレンジなどの、ユニバーサルログインプロンプトに関して表示するコンテンツを定義できます。同じページテンプレートがすべてのログインフローページに使用されるため、このカスタマイズ手法は、ユーザーに対して一貫性のあるブランドエクスペリエンスの実装を簡単にします。 カスタマイズされたページテンプレートを使用するには、テナントに対してカスタムドメインを構成する必要があります。さらに、Management APIを使用してのみ、ユニバーサルログインのページテンプレートを更新できます。
prompt(プロンプト)という用語は、サインアップページやMFAチャレンジなどのログインフローに含まれる特定のステップを指します。このページにある変数やサンプルコードでは、prompt(プロンプト)または widget(ウィジェット)という用語が使われています。これらの用語は、ユニバーサルログインに関しては同義ですが、コードの中では置き換えて使用できるものではありません 。カスタマイズに問題が生じないように、コードに追加する要素には適切な用語を使用してください。

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

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

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

ページテンプレートは、ページのレンダリング方法に影響を与える様々なコンテキスト変数をサポートしています。 たとえば、これらの変数を以下のために使用できます。
  • ログインフローに関連するアプリケーションによって、様々なコンテンツをレンダリングする。たとえば、異なるページデザインを必要とする2つのブランドを管理する場合。
  • 特定のプロンプトによって、様々なコンテンツをレンダリングする。たとえば、ログインページにアプリケーションが提供する内容についての情報を追加したいが、MFAチャレンジプロンプトのみを表示するMFAフローを選びたい場合。
  • サポートページや連絡先情報へのリンクなど、ユーザーサポート情報が記載されたフッターを追加する。

利用できる変数

ページテンプレートは以下の変数をサポートしています。

アプリケーション

ブランディング

テナント

Organizations

以下の変数は、Auth0 Organizations機能を参照します。

現在のユーザー情報

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

現在のウィンドウ情報

プロンプト

promptという用語は、ログインフローの特定の手順を意味します。特定のプロンプトは、1つ以上のウィンドウからなります。Auth0 DashboardまたはManagement APIのプロンプトエンドポイントで、プロンプトを管理できます。 以下のセクションでは、利用できるそれぞれのプロンプトについて詳細を説明しています。

スクリーン:redeem-ticket

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

スクリーン:consent

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の参考スクリーンショット

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

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

スクリーン:reset-password-mfa-phone-challenge

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

スクリーン:reset-password-mfa-push-challenge-push

reset-password-mfa-push-challenge-pushの参考スクリーンショット

スクリーン:reset-password-mfa-recovery-code-challenge

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

スクリーン:reset-password-mfa-sms-challenge

reset-password-mfa-sms-challengeの参考スクリーンショット

スクリーン:reset-password-mfa-voice-challenge

reset-password-mfa-voice-challengeの参考スクリーンショット

スクリーン:reset-password-mfa-webauthn-platform-challenge

reset-password-mfa-webauthn-platform-challengeの参考スクリーンショット

スクリーン:reset-password-mfa-webauthn-roaming-challenge

reset-password-mfa-webauthn-roaming-challengeの参考スクリーンショット

スクリーン:passkey-enrollment

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

スクリーン:passkey-enrollment-local

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

スクリーン:phone-identifier-challenge

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

スクリーン:phone-identifier-enrollment

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

スクリーン:signup

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

スクリーン:signup-id

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

スクリーン:signup-password

signup-passwordの参考スクリーンショット

Screen: status

status reference screenshot

Screen: brute-force-protection-unblock

brute-force-protection-unblock reference screenshot

Screen: brute-force-protection-unblock-success

brute-force-protection-unblock-success reference screenshot

Screen: brute-force-protection-unblock-failure

brute-force-protection-unblock-failure reference screenshot

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

また、コンテキスト内でクエリパラメーターを使用できます。認証要求の開始時にクエリパラメーターを/authorizeエンドポイントに渡します。これらのカスタムクエリパラメーターには、接頭辞ext-を付ける必要があります。 以下の例では、ログインページのテンプレートにext-gaおよびext-testクエリパラメーターを使用しています。
カスタムサインアッププロンプトを使用する場合は、カスタムページテンプレートを有効にする必要があります。以下は、カスタムサインアッププロンプトのレンダリングを可能にする最低限のテンプレートです。
  • <body>要素にclass="_hide-prompt-logo"を追加して、テナントロゴを非表示にできます。
  • <body>要素にclass="_use-custom-prompt-logo"を追加して、カスタムロゴを指定できます。これにより、たとえば、アプリケーションによって、ログインページのロゴを変更できます。
  • ext-パラメーター名は、ext-で始まり、[a-zA-z0-9_-]のみを含む、28文字以内のものでなければならない(例:/^ext-[\w-]{1,28}$/
  • ext-パラメーターの値は、[a-zA-Z0-9-.*~@+ /:]のみを含み、255文字以内で指定する必要がある(例:/^[-\w.*~@+ /:]{1,255}$/

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

詳細については、「サインアップとログインプロンプトのカスタマイズ」を参照してください。 以下のテンプレートは、ログイン/サインアップページでログインボックスを左に、画像を右に表示します。残りのページは、デフォルトのものが表示されます。

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

メールユーザー名/パスワードのあるユニバーサルログインボックスと画像レイアウトの例

ページのフッター

ページテンプレートを設定するには、を使用する必要があります。まず最初に、update:brandingread:brandingdelete:brandingスコープでManagement APIトークンを取得する必要があります。トークンの生成にAPI Explorer Applicationを使用している場合は、これらのスコープがAuth0 Management APIで有効になっていることを確認してください。
メールアドレス/パスワードのあるユニバーサルログインボックスとフッターレイアウトの例

ページテンプレートAPI

テンプレートを設定するには、以下のエンドポイントを使用する必要があります。 テンプレートを取得するには、以下のエンドポイントを使用する必要があります。 テンプレートを削除するには、以下のエンドポイントを使用する必要があります。 ページテンプレートの最大サイズは100KBです。これが十分でない場合は、画像/cssファイルをページテンプレートコードの外に出すことを検討してください。
ページテンプレートの制限:
  • CSSクラス名は、Auth0がプロジェクトをビルドするたびに変わります。これらのクラスに適用するカスタムCSSは、新しいビルドごとに破棄されます。
  • ユニバーサルログインページのHTML構造は変更される場合があります。中断を防ぐため、HTML構造に依存するカスタマイズは避けてください。
詳細については、「CSSのカスタマイズ」を参照してください。

CSSのカスタマイズ

ページテンプレートの制限:
  • CSSクラス名は、Auth0がプロジェクトをビルドするたびに変わります。これらのクラスに適用するカスタムCSSは、新しいビルドごとに破棄されます。
  • ユニバーサルログインページのHTML構造は変更される場合があります。中断を防ぐため、HTML構造に依存するカスタマイズは避けてください。
  • ページテンプレートが適用されたログインページを示すStorybookのブラウザーウィンドウ:
    • --prompt-widthを使用して、コンテナー幅を調整します。デフォルト値は400pxです。
    • フォームの場合:--form-max-widthを使用して、フォームの最大幅を設定します。デフォルト値は500pxです。
      • コードをフォームページのみに適用するには、{% if prompt.name == "custom-form" %}<head>要素に含めます。
  • Googleフォントを使用するには、Googleフォントをインポートして、CSS変数の--font-familyをオーバーライドします。
  • テナントのロゴを非表示にするには、class="_hide-prompt-logo"<body>要素に追加します。
  • カスタムのロゴを指定するには、class="_use-custom-prompt-logo"<body>要素に追加します。そうすることで、たとえば、アプリケーションに応じてログインページのロゴを変更できます。
現在の実装では、これ以上のCSSのカスタマイズはサポートしていません。生成されるHTMLを見ると、以下のようなコードが確認できます。
Auth0 CLIを使用して、簡単にページテンプレートを更新できます。

Auth0 CLIを使用する

Auth0 CLIで、以下を実行します。 auth0 universal-login templates update Auth0 CLIが、2つのウィンドウを開きます。 これで、ページテンプレートコードを変更でき、ブラウザーウィンドウで変更をプレビューできます。
  • ページテンプレートコードのデフォルトエディター:
Page Templates Storybook
  • ページテンプレートコードのあるデフォルトのエディター:
undefined
ウィンドウを閉じると、テンプレートを保存するか尋ねられます。[Yes(はい)] と答えると、テンプレートがテナントにアップロードされます。 テンプレートが適用されない場合は、{customDomain}/authorizeに進んでいるか確認してください。{yourDomain}/authorizeに進んでいる場合、Auth0はページテンプレートをレンダリングしません。

トラブルシューティング

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