> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> ACUL のレンダリング設定オブジェクトとそのプロパティのリファレンス
# ACUL レンダリング設定リファレンス
各 Universal Login 画面には、その画面ごとのレンダリング設定があります。これは、Auth0 がその画面をどのようにレンダリングするかを制御する JSON オブジェクトです。レンダリング設定では、レンダリングモード、カスタム UI を構成する JavaScript アセットと CSS アセット、実行時にアプリケーションで利用できるコンテキストデータを定義します。
レンダリング設定は、Auth0 Dashboard、Infrastructure-as-Code ツール、または Auth0 Management API で管理できます。手順については、[Configure ACUL](/ja/docs/customize/login-pages/advanced-customizations/configure/overview) を参照してください。API スキーマ全体については、[`PATCH /v2/prompts/{prompt}/screen/{screen}/rendering`](/ja/docs/api/management/v2/prompts/patch-rendering) エンドポイントを確認してください。
レンダリング設定には、次のプロパティが含まれます。
| **Property** | **Type** | **Description** |
| ---------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
| `rendering_mode` | string | 画面のレンダリング方法を制御します。`standard` または `advanced` を指定できます。 |
| `head_tags` | array | ページの `` に挿入する 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](/ja/docs/customize/login-pages/universal-login) UI でレンダリングされます。[partials](/ja/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts) と [template variables](/ja/docs/customize/login-pages/universal-login/customize-templates#page-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 タグ
`head タグ` は、カスタム UI を ACUL のホストページに読み込むための主要な仕組みです。Auth0 が画面を高度モードでレンダリングすると、最小限の HTML ページを返し、`head_tags` で定義された要素をページの `` に挿入します。これらのタグは、カスタム認証画面を構成する 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)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) を使用します。
### 動的 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` 属性には空白で区切った複数のハッシュを指定でき、いずれかのハッシュが一致すればブラウザーはそのリソースを読み込みます。
```json theme={null}
{
"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_disabled` を `true` に設定します。
## コンテキストデータ
コンテキストデータでは、実行時に Auth0 がカスタム画面へ送信するテナント、クライアント、組織、ブランディングの情報を制御します。Auth0 は、ホストページ上の `universal_login_context` オブジェクトを通じてこのデータを提供します。アプリケーションコードでは、[ACUL React SDK](/ja/docs/libraries/acul/react-sdk) のフック、または [ACUL JS SDK](/ja/docs/libraries/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`