PATCH /v2/prompts/{prompt}/screen/{screen}/rendering エンドポイントを確認してください。
レンダリング設定には、次のプロパティが含まれます。
| Property | Type | Description |
|---|---|---|
rendering_mode | string | 画面のレンダリング方法を制御します。standard または advanced を指定できます。 |
head_tags | array | ページの <head> に挿入する HTML 要素の配列です。rendering_mode が advanced の場合は必須で、少なくとも 1 つの script タグを含める必要があります。 |
default_head_tags_disabled | boolean | true の場合、デフォルトの Universal Login の head タグ (favicon など) を削除します。デフォルトは false です。 |
context_configuration | array | 実行時にブラウザへ送信するコンテキスト値の一覧です。rendering_mode が advanced の場合は必須です。 |
use_page_template | boolean | true の場合、定義されていれば ACUL 画面をテナントのカスタムページテンプレート内でレンダリングします。デフォルトは false です。 |
filters | object | ACUL のレンダリングを特定のアプリケーション、組織、またはカスタムドメインに制限します。省略した場合、ACUL はテナント全体に適用されます。 |
レンダリングモード
rendering_mode プロパティは、画面でデフォルトの Universal Login UI を使用するか、カスタムの ACUL 実装を使用するかを決定します。
- 標準: 画面はデフォルトの Universal Login UI でレンダリングされます。partials と template variables を使用して画面をカスタマイズできます。
- 高度: 画面は、
head_tagsで読み込まれるカスタムの JavaScript アセットと CSS アセットを使用してレンダリングされます。partials は適用されません。デフォルトでは、高度モードはテナント内のすべてのアプリケーションと組織に適用されます。 - 高度 (フィルター適用) : 画面は、
filtersで定義された条件 (特定のアプリケーション、組織、またはカスタムドメイン) に一致するリクエストに対して ACUL でレンダリングされます。フィルターに一致しないリクエストは標準レンダリングにフォールバックし、その場合は partials が適用されます。
rendering_mode を advanced に設定し、match_type (includes_any または excludes_any) と、少なくとも 1 つのエンティティ配列 (clients、organizations、または domains) を含む filters オブジェクトを指定します。各エンティティは、id または metadata のキーと値のペアで識別できます。
head タグ は、カスタム UI を ACUL のホストページに読み込むための主要な仕組みです。Auth0 が画面を高度モードでレンダリングすると、最小限の HTML ページを返し、head_tags で定義された要素をページの <head> に挿入します。これらのタグは、カスタム認証画面を構成する JavaScript および CSS のアセットバンドルを読み込みます。
head_tags 配列の各エントリは、次のプロパティを持つオブジェクトです。
| Property | Type | Description |
|---|---|---|
tag | string | HTML 要素の種類。有効な値: script, link, style, meta, title, base, noscript, template。 |
attributes | object | HTML 要素の属性 (例: src, href, defer, integrity) 。タグごとに指定できる属性は最大 10 個です。 |
content | string | 要素の開始タグと終了タグの間に入るテキストまたはマークアップ。最大 250 文字です。 |
integrity 属性は、script タグとスタイルシートタグでは必須です。Auth0 は、アセットが改変されていないことを検証するために Subresource Integrity (SRI) を使用します。
動的 URL セグメント
- プロンプトと画面:
{{ screen.name }},{{ prompt.name }},{{ locale }} - クライアント:
{{ client.id }},{{ client.name }},{{ client.metadata.KEY_NAME }} - 組織:
{{ organization.id }},{{ organization.name }},{{ organization.metadata.KEY_NAME }}
integrity 属性には空白で区切った複数のハッシュを指定でき、いずれかのハッシュが一致すればブラウザーはそのリソースを読み込みます。
default_head_tags_disabled を true に設定します。
コンテキストデータ
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