> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Référence sur l’objet de configuration du rendu ACUL et ses propriétés
# 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](/docs/fr-ca/customize/login-pages/advanced-customizations/configure/overview).
Pour consulter le schéma complet de l’API, reportez-vous au point de terminaison [`PATCH /v2/prompts/{prompt}/screen/{screen}/rendering`](/docs/fr-ca/api/management/v2/prompts/patch-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 `` 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](/docs/fr-ca/customize/login-pages/universal-login) par défaut. Vous pouvez utiliser des [partials](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts) et des [variables de gabarit](/docs/fr-ca/customize/login-pages/universal-login/customize-templates#page-template-variables) 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 `` 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)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) 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.
```json theme={null}
{
"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](/docs/fr-ca/libraries/acul/react-sdk) ou les méthodes du [ACUL JS SDK](/docs/fr-ca/libraries/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](https://auth0.com/docs/customize/login-pages/advanced-customizations/configure/overview#auth0-dashboard).
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.