メインコンテンツへスキップ
各 Universal Login 画面には、その画面ごとのレンダリング設定があります。これは、Auth0 がその画面をどのようにレンダリングするかを制御する JSON オブジェクトです。レンダリング設定では、レンダリングモード、カスタム UI を構成する JavaScript アセットと CSS アセット、実行時にアプリケーションで利用できるコンテキストデータを定義します。 レンダリング設定は、Auth0 Dashboard、Infrastructure-as-Code ツール、または Auth0 Management API で管理できます。手順については、Configure ACUL を参照してください。API スキーマ全体については、PATCH /v2/prompts/{prompt}/screen/{screen}/rendering エンドポイントを確認してください。 レンダリング設定には、次のプロパティが含まれます。
PropertyTypeDescription
rendering_modestring画面のレンダリング方法を制御します。standard または advanced を指定できます。
head_tagsarrayページの <head> に挿入する HTML 要素の配列です。rendering_modeadvanced の場合は必須で、少なくとも 1 つの script タグを含める必要があります。
default_head_tags_disabledbooleantrue の場合、デフォルトの Universal Login の head タグ (favicon など) を削除します。デフォルトは false です。
context_configurationarray実行時にブラウザへ送信するコンテキスト値の一覧です。rendering_modeadvanced の場合は必須です。
use_page_templatebooleantrue の場合、定義されていれば ACUL 画面をテナントのカスタムページテンプレート内でレンダリングします。デフォルトは false です。
filtersobjectACUL のレンダリングを特定のアプリケーション、組織、またはカスタムドメインに制限します。省略した場合、ACUL はテナント全体に適用されます。

レンダリングモード

rendering_mode プロパティは、画面でデフォルトの Universal Login UI を使用するか、カスタムの ACUL 実装を使用するかを決定します。
  • 標準: 画面はデフォルトの Universal Login UI でレンダリングされます。partialstemplate variables を使用して画面をカスタマイズできます。
  • 高度: 画面は、head_tags で読み込まれるカスタムの JavaScript アセットと CSS アセットを使用してレンダリングされます。partials は適用されません。デフォルトでは、高度モードはテナント内のすべてのアプリケーションと組織に適用されます。
  • 高度 (フィルター適用) : 画面は、filters で定義された条件 (特定のアプリケーション、組織、またはカスタムドメイン) に一致するリクエストに対して ACUL でレンダリングされます。フィルターに一致しないリクエストは標準レンダリングにフォールバックし、その場合は partials が適用されます。
フィルター適用モードを使用するには、rendering_modeadvanced に設定し、match_type (includes_any または excludes_any) と、少なくとも 1 つのエンティティ配列 (clientsorganizations、または domains) を含む filters オブジェクトを指定します。各エンティティは、id または metadata のキーと値のペアで識別できます。

head タグ

head タグ は、カスタム UI を ACUL のホストページに読み込むための主要な仕組みです。Auth0 が画面を高度モードでレンダリングすると、最小限の HTML ページを返し、head_tags で定義された要素をページの <head> に挿入します。これらのタグは、カスタム認証画面を構成する JavaScript および CSS のアセットバンドルを読み込みます。 head_tags 配列の各エントリは、次のプロパティを持つオブジェクトです。
PropertyTypeDescription
tagstringHTML 要素の種類。有効な値: script, link, style, meta, title, base, noscript, template
attributesobjectHTML 要素の属性 (例: src, href, defer, integrity) 。タグごとに指定できる属性は最大 10 個です。
contentstring要素の開始タグと終了タグの間に入るテキストまたはマークアップ。最大 250 文字です。
integrity 属性は、script タグとスタイルシートタグでは必須です。Auth0 は、アセットが改変されていないことを検証するために Subresource Integrity (SRI) を使用します。

動的 URL セグメント

Head タグの URL では、Liquid テンプレート構文を使った動的セグメントをサポートしており、現在の認証コンテキストに応じて異なるアセットバンドルを配信できます。たとえば、マルチブランディングに対応するために、クライアントごとまたは組織ごとに異なる JavaScript バンドルを読み込めます。 動的セグメントで使用できる変数は次のとおりです。
  • プロンプトと画面: {{ screen.name }}, {{ prompt.name }}, {{ locale }}
  • クライアント: {{ client.id }}, {{ client.name }}, {{ client.metadata.KEY_NAME }}
  • 組織: {{ organization.id }}, {{ organization.name }}, {{ organization.metadata.KEY_NAME }}
動的 URL セグメントを使用する場合は、想定されるアセットの各バリアントについて SRI ハッシュを指定してください。integrity 属性には空白で区切った複数のハッシュを指定でき、いずれかのハッシュが一致すればブラウザーはそのリソースを読み込みます。
{
  "head_tags": [
    {
      "tag": "script",
      "attributes": {
        "src": "https://cdn.example.com/assets/{{ client.name }}/bundle.js",
        "defer": true,
        "integrity": "sha256-hashForClientA sha256-hashForClientB"
      }
    },
    {
      "tag": "link",
      "attributes": {
        "rel": "stylesheet",
        "href": "https://cdn.example.com/assets/{{ client.name }}/styles.css",
        "integrity": "sha256-cssHashForClientA sha256-cssHashForClientB"
      }
    }
  ]
}
head タグを使用して、分析用スクリプト、カスタムフォント、または meta タグを読み込むこともできます。 既定の Universal Login の head タグ (favicon など) を独自のものに置き換えるには、default_head_tags_disabledtrue に設定します。

コンテキストデータ

コンテキストデータでは、実行時に Auth0 がカスタム画面へ送信するテナント、クライアント、組織、ブランディングの情報を制御します。Auth0 は、ホストページ上の universal_login_context オブジェクトを通じてこのデータを提供します。アプリケーションコードでは、ACUL React SDK のフック、または ACUL JS SDK のメソッドを使用してコンテキストデータにアクセスします。 画面で利用できるようにしたい各値は、context_configuration 配列に明示的に指定する必要があります。Auth0 は、空または null になるキーをペイロードから削除します。 以下の静的なコンテキスト値を利用できます。
説明
branding.settingsテナントのブランディング設定 (色、ロゴ)
branding.themes.defaultデフォルトの Universal Login テーマ
client.logo_uriアプリケーションのロゴ URL
client.descriptionアプリケーションの説明
organization.display_name組織の表示名
organization.branding組織のブランディング設定
screen.texts現在の画面のローカライズ済みテキスト文字列
tenant.nameテナント名
tenant.friendly_nameテナントのフレンドリー名
tenant.logo_urlテナントのロゴ URL
tenant.enabled_localesテナントで有効になっているロケール
untrusted_data.submitted_form_data以前に送信されたフォームデータ
untrusted_data.authorization_params.login_hint認可リクエストのログインヒント
untrusted_data.authorization_params.screen_hint認可リクエストの画面ヒント
untrusted_data.authorization_params.ui_localesリクエストされた UI ロケール
user.organizationsユーザーが所属している組織
transaction.custom_domain.domain現在のトランザクションのカスタムドメイン
ドット記法を使用して動的キーを追加することもできます。
  • アプリケーションメタデータの場合は client.metadata.YOUR_KEY
  • 組織メタデータの場合は organization.metadata.YOUR_KEY
  • カスタムドメインメタデータの場合は transaction.custom_domain.domain_metadata.YOUR_KEY
  • ext- プレフィックスを付けて /authorize エンドポイントに渡すカスタムクエリパラメーターの場合は untrusted_data.authorization_params.ext-YOUR_KEY