ACULの画面を構成する

高度なレンダリングモードはManagement APIのコールを通じて画面ごとに構成されるもので、Deploy CLIとAuth0 Terraform Providerでもサポートされています。

構成オプション

高度なレンダリングモードを使用する画面には、以下の構成オプションがあります。

  • 高度または標準の画面レンダリングモード

  • ページテンプレート内のデフォルトのheadタグを含めるか、または除外します

  • ユニバーサルログインコンテキストに含めるべきオプションのトランザクションおよび構成データ

  • ホストしているアセットバンドルを参照する<head>タグに含めるHTMLタグ

デフォルトのheadタグを削除する

高度なレンダリングモードのページテンプレートには、以下のHTMLタグがデフォルトで追加されており、default_head_tags_disabledの値をtrueに設定することで無効にできます。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<link rel="shortcut icon" href="https://cdn.sass.app/favicon.ico">
<title>My App | Login</title>

Was this helpful?

/

デフォルトのheadタグを削除する場合は、<title>タグとロボットの <meta>タグに代わるものを必ずhead_tagsに含めるようにしてください。

ユニバーサルログインコンテキストにオプションのデータを含める

オプションのデータをユニバーサルログインコンテキストに含めるには、context_configuration配列にそのデータを追加します。オプションのデータすべてがあらゆる画面で利用できるわけではありません。要求されたデータが利用できない場合、APIはエラーを返します。各画面で利用できるデータに関する画面固有の情報については、個々の画面ページを参照してください。

特定のキーを使わずにentity.metadataまたはauthorization_parametersを参照すると、エラーが発生します。セキュリティ上の理由により、完全な承認パラメーターまたはメタデータオブジェクトは公開されていません。

以下は、利用できるオプションのコンテキストデータです。

"context-configuration": [
    "branding.settings",
    "branding.themes.default",
    "client.logo_uri",
    "client.description",
    "client.metadata",
    "organization.display_name",
    "organization.branding",
    "organization.metadata",
    "screen.texts",
    "tenant.name",
    "tenant.friendly_name",
    "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",
    "untrusted_data.authorization_params.ext-"
  ],

Was this helpful?

/

バンドルされたアセットを参照する

高度なレンダリングモードでは、ページテンプレートの<head>に含まれているHTMLタグを定義することで、メタ情報の追加、デフォルトのページタイトルやファビコンの置き換え、バンドルされたアセットの参照を行えます。画面ごとに最大25個のタグを定義でき、それらはすべてJSONオブジェクトの配列として定義されます。

"head_tags": [
  {
    "tag": "",
    "content": "",
    "attributes": {}
  }
]

Was this helpful?

/

タグ

<head>タグで使用できる任意のHTML要素です。詳しくはMDNドキュメントを参照してください。

コンテンツ（オプション）

開始タグと終了タグの間のコンテンツ。コンテンツは最大250文字まで使用できます。

カスタムの<title>タグを使用する場合：

My Company Login | {{client.name}}

Was this helpful?

/

カスタムフォントを使用する場合：

'@font-face {  font-family: "custom-font";  src: url("https://cdn.sass.app/{{client.metadata.custom_font}}");}body {  font-family: custom-font;}'

Was this helpful?

/

content属性を使うと、以下の変数にアクセスできます。これらは、ページテンプレートがブラウザーに返される前にサーバー上で解決されます。

/

  • branding.settings

  • branding.themes.default

  • client.id

  • client.name

  • client.metadata.[key_name]

  • organization.id

  • organization.name

  • organization.branding

  • organization.metadata.[key_name]

  • screen.name

  • prompt.name

  • locale

  • user.id

  • user.metadata.[key_name]

  • user.app_metadata.[key_name]

属性

現在のタグには、最大10個の有効なHTML属性を含めることができます。

URLタイプ属性の動的セグメント

srcやhrefのようなURL属性には、クライアント、組織、ロケールなどの属性に基づいてバンドルを論理パッケージにセグメント化できる動的セグメントが含まれています。

動的セグメントは以下のコンテキストデータにアクセスできます。

/

  • screen.name

  • prompt.name

  • client.id

  • client.name

  • client.metadata.[key_name]

  • organization.id

  • organization.name

  • organization.metadata.[key_name]

  • transaction.locale

Management APIの例

以下は、Management APIを直接呼び出してログインID画面を設定する例です。

/

# PATCH to /api2/v2/prompts/login-id/screen/login-id/rendering
{
  "rendering_mode": "advanced",
  "context_configuration": [
    "branding.themes.default",
    "client.logo_uri",
    "client.description",
    "client.metadata.google_tracking_id",
    "screen.texts",
    "tenant.enabled_locales",
    "untrusted_data.submitted_form_data",
    "untrusted_data.authorization_params.ext-my_param"
  ],
  "head_tags": [
    {
      "tag": "script",
      "attributes": {
        "src": "https://cdn.sass.app/auth-screens/{{client.name}}.js",
        "defer": true,
        "integrity": [
          "sha256-someHash/Abc+123",
          "sha256-someHash/cDe+456"
        ]
      }
    },
    {
      "tag": "link",
      "attributes": {
        "rel": "stylesheet",
        "href": "https://cdn.sass.app/auth-screens/{{client.name}}.css"
      }
    }
  ]
}

Was this helpful?

/

Auth0 Terraform Providerの例

以下は、Auth0 Terraformを呼び出してログインID画面を設定する例です。

/

resource "auth0_prompt_screen_renderer" "apsr" {
  prompt_type     = "login-id"
  screen_name = "login-id"
    rendering_mode = "advanced"
    context_configuration = [
        "branding.settings",
        "branding.themes.default",
        "client.logo_uri",
        "client.description",
        "organization.display_name",
        "organization.branding",
        "screen.texts",
        "tenant.name",
        "tenant.friendly_name",
        "tenant.enabled_locales",
        "untrusted_data.submitted_form_data",
        "untrusted_data.authorization_params.ui_locales",
        "untrusted_data.authorization_params.login_hint",
        "untrusted_data.authorization_params.screen_hint",
        "user.organizations"
    ]
    head_tags = jsonencode([
       {
           attributes: {
               "async": true,
               "defer": true,
               "integrity": [
                   "sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
               ],
               "src": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
           },
           tag: "script"
       }
   ])
}

Was this helpful?

/