Référence de la configuration de rendu ACUL

Chaque écran Universal Login possède sa propre configuration de rendu, un objet JSON qui contrôle la façon dont Auth0 affiche cet écran. La configuration de rendu définit le mode de rendu, les ressources JavaScript et CSS qui composent votre interface utilisateur personnalisée, ainsi que les données de contexte accessibles à votre application dans l’environnement d’exécution. Vous pouvez gérer la configuration de rendu dans l’Auth0 Dashboard, à l’aide d’outils d’infrastructure en tant que code ou de l’Auth0 Management API. Pour savoir comment faire, consultez Configure ACUL. Pour le schéma d’API complet, consultez le point de terminaison PATCH /v2/prompts/{prompt}/screen/{screen}/rendering. La configuration de rendu comprend les propriétés suivantes :

Propriété	Type	Description
`rendering_mode`	chaîne	Contrôle la façon dont l’écran est affiché. Accepte `standard` ou `advanced`.
`head_tags`	tableau	Un tableau d’éléments HTML injectés dans le `<head>` de la page. Obligatoire lorsque `rendering_mode` est `advanced` ; doit inclure au moins une balise `script`.
`default_head_tags_disabled`	booléen	Lorsque la valeur est `true`, supprime les balises `<head>` par défaut de Universal Login (comme le favicon). La valeur par défaut est `false`.
`context_configuration`	tableau	Une liste de valeurs de contexte à envoyer au navigateur dans l’environnement d’exécution. Obligatoire lorsque `rendering_mode` est `advanced`.
`use_page_template`	booléen	Lorsque la valeur est `true`, affiche l’écran ACUL dans le modèle de page personnalisé du locataire, s’il en existe un. La valeur par défaut est `false`.
`filters`	objet	Restreint le rendu ACUL à des applications, des organisations ou des domaines personnalisés précis. Lorsqu’elle est omise, ACUL s’applique à l’échelle du locataire.

Modes de rendu

La propriété rendering_mode détermine si un écran utilise l’interface utilisateur Universal Login par défaut ou votre implémentation ACUL personnalisée.

Standard : L’écran est rendu à l’aide de l’interface utilisateur Universal Login par défaut. Vous pouvez utiliser des Partial et des variables de modèle pour personnaliser l’écran.
Avancé : L’écran est rendu à l’aide de vos ressources JavaScript et CSS personnalisées chargées via head_tags. Les Partial ne s’appliquent pas. Par défaut, le mode avancé s’applique à toutes les applications et organisations du locataire.
Avancé (filtré) : L’écran est rendu avec ACUL pour les requêtes qui correspondent aux critères définis dans filters (applications, organisations ou domaines personnalisés précis). Les requêtes qui ne correspondent pas aux filtres reviennent au rendu standard, où les Partial s’appliquent.

Pour utiliser le mode filtré, définissez rendering_mode sur advanced et fournissez un objet filters avec un match_type (includes_any ou excludes_any) et au moins un tableau d’entités (clients, organizations ou domains). Chaque entité peut être identifiée par id ou par une paire clé-valeur dans metadata.

Balises `<head>`

Les balises <head> constituent le principal mécanisme pour charger votre interface utilisateur personnalisée dans la page hôte d’ACUL. Lorsqu’Auth0 affiche un écran en mode avancé, il fournit une page HTML minimale et injecte dans le <head> de la page les éléments définis dans head_tags. Ces balises chargent les ressources JavaScript et CSS groupées qui composent votre écran d’authentification personnalisé. Chaque entrée du tableau head_tags est un objet comportant les propriétés suivantes :

Propriété	Type	Description
`tag`	string	Le type d’élément HTML. Valeurs valides : `script`, `link`, `style`, `meta`, `title`, `base`, `noscript`, `template`.
`attributes`	object	Les attributs de l’élément HTML (par exemple, `src`, `href`, `defer`, `integrity`). Maximum de 10 attributs par balise.
`content`	string	Le texte ou le balisage entre les balises d’ouverture et de fermeture de l’élément. Maximum de 250 caractères.

L’attribut integrity est obligatoire pour les balises script et les balises de feuille de style. Auth0 utilise Subresource Integrity (SRI) pour vérifier qu’aucune modification n’a été apportée aux ressources.

Segments d’URL dynamiques

Les URL de la balise head prennent en charge les segments dynamiques au moyen de la syntaxe de modèle Liquid, ce qui vous permet de fournir différents bundles de ressources selon le contexte d’authentification actuel. Par exemple, vous pouvez charger un bundle JavaScript différent par application ou par organisation afin de prendre en charge le multimarque. Les variables disponibles pour les segments dynamiques comprennent :

Invite et écran : {{ screen.name }}, {{ prompt.name }}, {{ locale }}
Application : {{ client.id }}, {{ client.name }}, {{ client.metadata.KEY_NAME }}
Organisation : {{ organization.id }}, {{ organization.name }}, {{ organization.metadata.KEY_NAME }}

Lorsque vous utilisez des segments d’URL dynamiques, fournissez un hash SRI pour chaque variante de ressource possible. L’attribut integrity accepte plusieurs hash séparés par des espaces; le navigateur charge la ressource si l’un des hash correspond.

{
  "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"
      }
    }
  ]
}

Vous pouvez aussi utiliser des balises <head> pour charger des scripts d’analyse, des polices personnalisées ou des balises méta. Pour remplacer les balises <head> par défaut de Universal Login (comme le favicon) par les vôtres, définissez default_head_tags_disabled sur true.

Données de contexte

Les données de contexte déterminent quelles informations sur le locataire, l’application, l’organisation et l’image de marque Auth0 envoie à votre écran personnalisé dans l’environnement d’exécution. Auth0 transmet ces données au moyen de l’objet universal_login_context sur la page hôte. Dans le code de votre application, utilisez les hooks du ACUL React SDK ou les méthodes du ACUL JS SDK pour accéder aux données de contexte. Chaque valeur que vous voulez rendre disponible dans votre écran doit être explicitement répertoriée dans le tableau context_configuration. Auth0 retire du payload les clés dont la valeur est vide ou nulle. Les valeurs de contexte statiques suivantes sont disponibles :

Valeur	Description
`branding.settings`	Paramètres d’image de marque du locataire (couleurs, logo)
`branding.themes.default`	Thème Universal Login par défaut
`client.logo_uri`	URL du logo de l’application
`client.description`	Description de l’application
`organization.display_name`	Nom d’affichage de l’organisation
`organization.branding`	Paramètres d’image de marque de l’organisation
`screen.texts`	Chaînes de texte localisées pour l’écran actuel
`tenant.name`	Nom du locataire
`tenant.friendly_name`	Nom convivial du locataire
`tenant.logo_url`	URL du logo du locataire
`tenant.enabled_locales`	Langues activées pour le locataire
`untrusted_data.submitted_form_data`	Données de formulaire soumises précédemment
`untrusted_data.authorization_params.login_hint`	Indice de connexion provenant de la demande d’autorisation
`untrusted_data.authorization_params.screen_hint`	Indice d’écran provenant de la demande d’autorisation
`untrusted_data.authorization_params.ui_locales`	Langues d’interface demandées
`user.organizations`	Organisations auxquelles l’utilisateur appartient
`transaction.custom_domain.domain`	Domaine personnalisé pour la transaction en cours

Vous pouvez aussi ajouter des clés dynamiques à l’aide de la notation par points :

client.metadata.YOUR_KEY pour les métadonnées de l’application
organization.metadata.YOUR_KEY pour les métadonnées de l’organisation
transaction.custom_domain.domain_metadata.YOUR_KEY pour les métadonnées du domaine personnalisé
untrusted_data.authorization_params.ext-YOUR_KEY pour les paramètres de requête personnalisés transmis au point de terminaison /authorize avec le préfixe ext-

Personnalisation de l’image de marque

Personnalisation du code

Personnalisation par un tiers

Référence de la configuration de rendu ACUL

Modes de rendu

Balises `<head>`

Segments d’URL dynamiques

Données de contexte

​Modes de rendu

​Balises <head>

​Segments d’URL dynamiques

​Données de contexte

Modes de rendu

Balises `<head>`

Segments d’URL dynamiques

Données de contexte