> ## 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を通じて管理できます。方法については、[ACULを設定する](/docs/ja-jp/customize/login-pages/advanced-customizations/configure/overview)を参照してください。
APIスキーマ全体については、[`PATCH /v2/prompts/{prompt}/screen/{screen}/rendering`](/docs/ja-jp/api/management/v2/prompts/patch-rendering)エンドポイントを確認してください。
レンダリング設定には、次のプロパティが含まれます。
| **プロパティ** | **型** | **説明** |
| ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
| `rendering_mode` | string | 画面のレンダリング方法を制御します。`standard` または `advanced` を受け付けます。 |
| `head_tags` | array | ページの `` に注入されるHTML要素の配列です。`rendering_mode` が `advanced` の場合は必須で、少なくとも1つの `script` タグを含める必要があります。 |
| `default_head_tags_disabled` | boolean | `true` の場合、デフォルトのUniversal Login ヘッドタグ (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 実装を使用するかを決定します。
* **Standard**: 画面はデフォルトの [Universal Login](/docs/ja-jp/customize/login-pages/universal-login) UI でレンダリングされます。[partials](/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts) と [template variables](/docs/ja-jp/customize/login-pages/universal-login/customize-templates#page-template-variables) を使って画面をカスタマイズできます。
* **Advanced**: 画面は、`head_tags` を通じて読み込まれるカスタムの JavaScript と CSS アセットを使ってレンダリングされます。Partials は適用されません。デフォルトでは、高度なモードはテナント内のすべてのアプリケーションと組織に適用されます。
* **Advanced (filtered)**: 画面は、`filters` で定義された条件 (特定のアプリケーション、組織、またはカスタムドメイン) に一致するリクエストに対して ACUL でレンダリングされます。フィルターに一致しないリクエストは標準レンダリングにフォールバックし、その場合は partials が適用されます。
フィルターモードを使用するには、`rendering_mode` を `advanced` に設定し、`match_type` (`includes_any` または `excludes_any`) と少なくとも 1 つのエンティティ配列 (`clients`、`organizations`、または `domains`) を含む `filters` オブジェクトを指定します。各エンティティは、`id` または `metadata` のキーと値のペアで識別できます。
## ヘッドタグ
ヘッドタグは、カスタム UI を ACUL のホストページに読み込むための主要な仕組みです。Auth0 が Advanced モードで画面をレンダリングすると、最小限の 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セグメント
ヘッドタグのURLでは、Liquidテンプレート構文を使った動的セグメントをサポートしており、現在のauthenticationのコンテキストに応じて異なるアセットバンドルを配信できます。たとえば、マルチブランド対応のために、クライアントごとまたは組織ごとに異なるJavaScriptバンドルを読み込めます。
動的セグメントで使用できる変数は次のとおりです。
* **prompt と画面**: `{{ 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"
}
}
]
}
```
分析スクリプト、カスタムフォント、またはメタタグを読み込むために、ヘッドタグ を使用することもできます。
デフォルトの Universal Login の ヘッドタグ (favicon など) を独自のものに置き換えるには、`default_head_tags_disabled` を `true` に設定します。
## コンテキストデータ
コンテキストデータでは、実行時に Auth0 がどのテナント、クライアント、組織、ブランディング情報をカスタム画面に送信するかを制御します。Auth0 は、このデータをホストページ上の `universal_login_context` オブジェクトを通じて提供します。アプリケーションコードでは、コンテキストデータにアクセスするために [ACUL React SDK](/docs/ja-jp/libraries/acul/react-sdk) のフックまたは [ACUL JS SDK](/docs/ja-jp/libraries/acul/js-sdk) のメソッドを使用します。
画面で利用できるようにしたい各値は、`context_configuration` 配列に明示的に指定する必要があります。詳細については、[ACUL の設定、追加データ](https://auth0.com/docs/customize/login-pages/advanced-customizations/configure/overview#auth0-dashboard)を参照してください。
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`。
* ユーザーのアプリのメタデータには `user.app_metadata.YOUR_KEY`。
* ユーザーのメタデータには `user.user_metadata.YOUR_KEY`。