Passer au contenu principal
Le mode de rendu avancé est configuré sur une base d’écran par écran via Management API d’appels et est aussi supporté dans l’outil Deploy CLI et le fournisseur Auth0 Terraform.

​
Options de configuration

Les écrans qui utilisent le mode de rendu avancé disposent des options de configuration suivantes :
  • Mode de rendu d’écran avancé ou standard
  • Inclure ou exclure les balises d’en-tête par défaut dans le modèle de page
  • Données de transaction et de configuration facultatives qui doivent être incluses dans le contexte de la connexion universelle
  • Éléments HTML dans la balise <head> qui font référence à vos packs de ressources configurés.

​
Supprimer les balises d’en-tête par défaut

Les balises HTML suivantes sont ajoutées par défaut au modèle de page en mode de rendu avancé et peuvent être désactivées en définissant la valeur de default_head_tags_disabled sur 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>
Incluez toujours des remplacements pour la balise <title> et la balise robots <meta> lors de la suppression des balises d’en-tête par défaut en les incluant dans head_tags.

​
Inclure des données facultatives dans le contexte de la connexion universelle

Les données facultatives peuvent être incluses dans le contexte de connexion universelle en les ajoutant au tableau context_configuration. Toutes les données facultatives ne sont pas disponibles sur chaque écran; si les données demandées ne sont pas disponibles, l’API renvoie une erreur. Consultez les pages d’écran individuelles pour obtenir des informations spécifiques à chaque écran sur les données disponibles pour chaque écran. Le référencement de entity.metadata ou de authorization_parameters sans clé spécifique génère une erreur. Pour des raisons de sécurité, les paramètres d’autorisation complets ou les objets de métadonnées ne sont pas exposés. Vous trouverez ci-dessous les données contextuelles facultatives disponibles : 
"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-"
  ],

​
Référencez vos ressources groupées

Le mode de rendu avancé vous permet d’ajouter des méta-informations, de remplacer les titres de page et les icônes par défaut et de référencer vos ressources groupées en définissant des balises HTML incluses dans le <head> du modèle de page. Vous pouvez définir jusqu’à 25 balises par écran, toutes définies sous la forme d’un tableau d’objets JSON. 
"head_tags": [
  {
    "tag": "",
    "content": "",
    "attributes": {}
  }
]
Balise
Tout élément HTML valide pour une utilisation dans la balise <head>. Consultez la documentation MDN pour plus de détails.
Contenu (optionnel)
Le contenu entre les balises d’ouverture et de fermeture.Le contenu est limité à 250 caractères. Lorsque vous utilisez une balise <title> personnalisée : 
My Company Login | {{client.name}}
Lorsque vous utilisez une police personnalisée : 
'@font-face {  font-family: "custom-font";  src: url("https://cdn.sass.app/{{client.metadata.custom_font}}");}body {  font-family: custom-font;}'
L’attribut content permet d’accéder aux variables ci-dessous; elles sont résolues sur le serveur avant que le modèle de page ne soit renvoyé au navigateur.
  • 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
  • lieu
  • user.id
  • user.metadata.[key_name]
  • user.app_metadata.[key_name]

​
Attributs

Jusqu’à 10 attributs HTML valides peuvent être inclus dans la balise actuelle.

​
Segments dynamiques pour les attributs de type URL

Les attributs d’URL tels que src et href incluent des segments dynamiques qui vous permettent de segmenter des packs en ensembles logiques en fonction d’attributs tels que le client, l’organisation ou les paramètres régionaux. Les segments dynamiques ont accès aux données de contexte suivantes :
  • screen.name
  • prompt.name
  • client.id
  • client.name
  • client.metadata.[key_name]
  • organization.id
  • organization.name
  • organization.metadata.[key_name]
  • transaction.locale
Fournissez toujours des SHA d’intégrité lorsque vous faites référence à des ressources JavaScript pour votre configuration ACUL; consultez la documentation MDN sur SRI pour plus de détails sur la configuration de la prise en charge de l’intégrité des sous-ressources pour vos ressources. Les segments dynamiques vous permettent de concevoir un ensemble de SHA pour un maximum de dix permutations possibles de l’URL résolue.

​
Exemple pour Management API

Vous trouverez ci-dessous un exemple d’appel direct à pour configurer l’écran de l’identifiant de la connexion. 
# PATCH to /api/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"
      }
    }
  ]
}

​
Exemple pour le fournisseur Auth0 Terraform

Vous trouverez ci-dessous un exemple d’appel Auth0 Terraform pour configurer l’écran d’identification de la connexion. 
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"
       }
   ])
}
⌘I