> ## 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 de l’objet de configuration de rendu ACUL et de ses propriétés
# 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](/fr-CA/docs/customize/login-pages/advanced-customizations/configure/overview). Pour le schéma d’API complet, consultez le point de terminaison [`PATCH /v2/prompts/{prompt}/screen/{screen}/rendering`](/fr-CA/docs/api/management/v2/prompts/patch-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 `` 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 `` 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](/fr-CA/docs/customize/login-pages/universal-login) par défaut. Vous pouvez utiliser des [Partial](/fr-CA/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts) et des [variables de modèle](/fr-CA/docs/customize/login-pages/universal-login/customize-templates#page-template-variables) 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 ``
Les balises `` 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 `` 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)](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 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.
```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 `` pour charger des scripts d’analyse, des polices personnalisées ou des balises méta.
Pour remplacer les balises `` 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](/fr-CA/docs/libraries/acul/react-sdk) ou les méthodes du [ACUL JS SDK](/fr-CA/docs/libraries/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-`