メインコンテンツへスキップ
各 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 エンドポイントを確認してください。 レンダリング設定には、次のプロパティが含まれます。

​
レンダリングモード

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 タグ

head タグ は、カスタム UI を ACUL のホストページに読み込むための主要な仕組みです。Auth0 が画面を高度モードでレンダリングすると、最小限の HTML ページを返し、head_tags で定義された要素をページの <head> に挿入します。これらのタグは、カスタム認証画面を構成する JavaScript および CSS のアセットバンドルを読み込みます。 head_tags 配列の各エントリは、次のプロパティを持つオブジェクトです。 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 タグを使用して、分析用スクリプト、カスタムフォント、または meta タグを読み込むこともできます。 既定の Universal Login の head タグ (favicon など) を独自のものに置き換えるには、default_head_tags_disabled を true に設定します。

​
コンテキストデータ

コンテキストデータでは、実行時に Auth0 がカスタム画面へ送信するテナント、クライアント、組織、ブランディングの情報を制御します。Auth0 は、ホストページ上の universal_login_context オブジェクトを通じてこのデータを提供します。アプリケーションコードでは、ACUL React SDK のフック、または ACUL JS SDK のメソッドを使用してコンテキストデータにアクセスします。 画面で利用できるようにしたい各値は、context_configuration 配列に明示的に指定する必要があります。Auth0 は、空または null になるキーをペイロードから削除します。 以下の静的なコンテキスト値を利用できます。 ドット記法を使用して動的キーを追加することもできます。
  • アプリケーションメタデータの場合は client.metadata.YOUR_KEY
  • 組織メタデータの場合は organization.metadata.YOUR_KEY
  • カスタムドメインメタデータの場合は transaction.custom_domain.domain_metadata.YOUR_KEY
  • ext- プレフィックスを付けて /authorize エンドポイントに渡すカスタムクエリパラメーターの場合は untrusted_data.authorization_params.ext-YOUR_KEY