Référence de la configuration du rendu ACUL

Chaque écran de Universal Login possède sa propre configuration du rendu, un objet JSON qui contrôle la manière dont Auth0 affiche cet écran. La configuration du 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 mises à la disposition de votre application à l’exécution. Vous pouvez gérer la configuration du rendu depuis l’Auth0 Dashboard, à l’aide d’outils d’infrastructure-as-code ou de l’Auth0 Management API. Pour savoir comment faire, consultez Configurer ACUL. Pour consulter le schéma complet de l’API, reportez-vous au point de terminaison PATCH /v2/prompts/{prompt}/screen/{screen}/rendering. La configuration du rendu comprend les propriétés suivantes :

Propriété	Type	Description
`rendering_mode`	string	Contrôle la façon dont l’écran est rendu. Accepte `standard` ou `advanced`.
`head_tags`	array	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`	boolean	Lorsque `true`, supprime les balises head par défaut de Universal Login (comme le favicon). La valeur par défaut est `false`.
`context_configuration`	array	Une liste de valeurs de contexte à envoyer au navigateur à l’exécution. Obligatoire lorsque `rendering_mode` est `advanced`.
`use_page_template`	boolean	Lorsque `true`, rend l’écran ACUL dans le modèle de page personnalisé du tenant, s’il y en a un. La valeur par défaut est `false`.
`filters`	object	Restreint le rendu ACUL à des applications, des organisations ou des domaines personnalisés précis. Lorsqu’il est omis, ACUL s’applique à l’échelle du tenant.

Modes de rendu

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

Standard : L’écran est rendu à l’aide de l’interface Universal Login par défaut. Vous pouvez utiliser des partials et des variables de gabarit pour personnaliser l’écran.
Advanced : L’écran est rendu à l’aide de vos ressources JavaScript et CSS personnalisées chargées au moyen de head_tags. Les partials ne s’appliquent pas. Par défaut, le mode avancé s’applique à toutes les applications et organisations du tenant.
Advanced (filtered) : 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 partials 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 ACUL. Lorsqu’Auth0 affiche un écran en mode avancé, il sert une page HTML minimale et injecte dans le <head> de la page les éléments définis dans head_tags. Ces balises chargent les lots de ressources JavaScript et CSS qui composent votre écran d’authentification personnalisé. Chaque entrée du tableau head_tags est un objet ayant 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	Texte ou balisage entre les balises d’ouverture et de fermeture de l’élément. Maximum de 250 caractères.

L’attribut integrity est requis pour les balises script et les feuilles 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 des balises head prennent en charge des segments dynamiques à l’aide de la syntaxe de modèle Liquid, ce qui vous permet de diffuser différents asset bundles selon le contexte d’authentication actuel. Par exemple, vous pouvez charger un bundle JavaScript différent par client ou par organization pour prendre en charge le multi-branding. Les variables disponibles pour les segments dynamiques comprennent :

Prompt et Screen : {{ screen.name }}, {{ prompt.name }}, {{ locale }}
Client : {{ client.id }}, {{ client.name }}, {{ client.metadata.KEY_NAME }}
Organization : {{ organization.id }}, {{ organization.name }}, {{ organization.metadata.KEY_NAME }}

Lorsque vous utilisez des segments d’URL dynamiques, fournissez un hachage SRI pour chaque variante d’asset possible. L’attribut integrity accepte plusieurs hachages séparés par des espaces; le navigateur charge la ressource si l’un des hachages 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 meta. 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 tenant, le client, l’organisation et l’image de marque Auth0 envoie à votre écran personnalisé à l’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 souhaitez rendre disponible dans votre écran doit être explicitement indiquée dans le tableau context_configuration. Pour en savoir plus, consultez Configurer ACUL, données supplémentaires.

Auth0 supprime de la charge utile les clés dont la valeur est vide ou null.

Les valeurs de contexte statiques suivantes sont disponibles :

Valeur	Description
`branding.settings`	Paramètres d’image de marque du tenant (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 tenant
`tenant.friendly_name`	Nom convivial du tenant
`tenant.logo_url`	URL du logo du tenant
`tenant.enabled_locales`	Paramètres régionaux activés sur le tenant
`untrusted_data.submitted_form_data`	Données de formulaire précédemment soumises
`untrusted_data.authorization_params.login_hint`	Indice de connexion provenant de la requête d’autorisation
`untrusted_data.authorization_params.screen_hint`	Indice d’écran provenant de la requête d’autorisation
`untrusted_data.authorization_params.ui_locales`	Paramètres régionaux de l’UI demandés
`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-.
user.app_metadata.YOUR_KEY pour les métadonnées d’application de l’utilisateur.
user.user_metadata.YOUR_KEY pour les métadonnées de l’utilisateur.

Personnalisation de l’image de marque

Personnalisation du code

Personnalisation par un tiers

Référence de la configuration du 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