ACULレンダリング設定リファレンス

各Universal Login画面には、その画面ごとのレンダリング設定があります。これは、Auth0がその画面をどのようにレンダリングするかを制御するJSONオブジェクトです。レンダリング設定では、レンダリングモード、カスタムUIを構成するJavaScriptおよびCSSアセット、そして実行時にアプリケーションで利用できるコンテキストデータを定義します。レンダリング設定は、Auth0 Dashboard、Infrastructure as Codeツール、またはAuth0 Management APIを通じて管理できます。方法については、ACULを設定するを参照してください。 APIスキーマ全体については、PATCH /v2/prompts/{prompt}/screen/{screen}/renderingエンドポイントを確認してください。レンダリング設定には、次のプロパティが含まれます。

プロパティ	型	説明
`rendering_mode`	string	画面のレンダリング方法を制御します。`standard` または `advanced` を受け付けます。
`head_tags`	array	ページの `<head>` に注入される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 UI でレンダリングされます。partials と 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 で定義された要素をページの <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セグメント

ヘッドタグの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 属性では、空白区切りで複数のハッシュを指定できます。いずれかのハッシュが一致すれば、ブラウザーはそのリソースを読み込みます。

{
  "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 のフックまたは ACUL JS SDK のメソッドを使用します。画面で利用できるようにしたい各値は、context_configuration 配列に明示的に指定する必要があります。詳細については、ACUL の設定、追加データを参照してください。

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。

ブランドのカスタマイズ

コードのカスタマイズ

サードパーティによるカスタマイズ

ACULレンダリング設定リファレンス

レンダリングモード

ヘッドタグ

動的URLセグメント

コンテキストデータ

​レンダリングモード

​ヘッドタグ

​動的URLセグメント

​コンテキストデータ

レンダリングモード

ヘッドタグ

動的URLセグメント

コンテキストデータ