> ## Documentation Index > Fetch the complete documentation index at: https://docs-staging-update-anonymous-sessons-ea.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Découvrez comment ajouter des champs personnalisés et du texte aux prompts d'inscription et de connexion d'Auth0 Universal Login. # Personnaliser les prompts d'inscription et de connexion 1. Assurez-vous qu’un [**Custom Domain**](/docs/fr-ca/customize/custom-domains) est configuré pour votre tenant. 2. Confirmez que vous utilisez [**Universal Login**](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) pour tous les prompts d'inscription et de connexion, et assurez-vous que la bascule **Customize Login Page** est désactivée pour les prompts de connexion. 3. Vérifiez qu’un [modèle de page personnalisé](/docs/fr-ca/customize/login-pages/universal-login/customize-templates#custom-sign-up-prompts) est configuré. **Personnaliser les prompts d'inscription et de connexion** est une fonctionnalité qui permet aux clients ayant activé Custom Domain et un modèle de page personnalisé d’ajouter des champs personnalisés et du contenu aux prompts d’inscription et de connexion de leur application.

Cas d’utilisation

Personnaliser les prompts d'inscription et de connexion prend en charge deux cas d’utilisation : **le contenu personnalisé** et **la saisie de données**. Le **contenu personnalisé** correspond à du contenu statique, comme du texte, des liens ou des images, placé directement dans les prompts d’inscription et de connexion. La **saisie de données** utilise des éléments de formulaire ajoutés dynamiquement aux prompts d’inscription et de connexion, ce qui est utile pour recueillir et valider le consentement de l’utilisateur ou des données saisies par l’utilisateur, comme le nom de famille. Utilisez les personnalisations des prompts d’inscription et de connexion uniquement pour communiquer ou recueillir des données sensibles ou réglementées, dans la mesure permise par votre entente avec Okta.

Terminologie

Un **prompt** est une étape précise d’un flux d’**authentification** donné. Chaque prompt comporte au moins un **écran** et, selon la configuration du tenant, chaque écran pris en charge comporte soit quatre, soit six **points d’entrée**, c’est-à-dire des emplacements dans l’écran où il est possible d’insérer du code personnalisé (**partials**). Les prompts suivants peuvent être personnalisés : **Écrans de connexion** * `login` * `login-id` * `login-password` * `login-passwordless-sms-otp` * `login-passwordless-email-code` * `passkey-enrollment` * `passkey-enrollment-local` **Écrans d’inscription** * `signup` * `signup-id` * `signup-password` * `passkey-enrollment` * `passkey-enrollment-local` Les partials prennent en charge le HTML, le CSS, JavaScript et la [syntaxe Liquid](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) pour la logique conditionnelle et les variables dynamiques. De plus, toute variable Liquid offerte dans le [Page Template](/docs/fr-ca/customize/login-pages/universal-login/customize-templates) est également prise en charge. Ces points d’entrée sont offerts lorsqu’une connexion de base de données ou une connexion Passwordless est activée : * `form-content-start` * `form-content-end` * `form-footer-start` * `form-footer-end` Les points d’entrée suivants sont offerts lorsqu’au moins une connexion sociale ou une connexion d’entreprise est activée : * `secondary-actions-start` * `secondary-actions-end` Captures d’écran de chaque option de prompt personnalisé et de leurs partials

Captures d’écran de chaque option de prompt personnalisé et de leurs partials

Utilisez Auth0 Dashboard pour gérer les Partials

Utilisez le Dashboard pour insérer des champs personnalisés et du contenu dans les écrans Login et Signup à l’aide de partials. 1. Accédez à [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/universal-login/customize-partials), puis sélectionnez **Enhance screens with partials**. 2. Sélectionnez le **Screen** à personnaliser dans l’éditeur de partials. Les **Screens** peuvent avoir les **modes de rendu** suivants : * **STANDARD** : le `screen` est rendu à l’aide de l’UI [Universal Login](/docs/fr-ca/customize/login-pages/universal-login) par défaut; vous pouvez utiliser des partials pour insérer des extraits de code et des [variables de gabarit](/docs/fr-ca/customize/login-pages/universal-login/customize-templates#page-template-variables). * **ADVANCED** : le `screen` est rendu à l’aide de [ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations), et les partials ne s’appliquent pas. * **ADVANCED (FILTERED)** : le `screen` est rendu avec ACUL appliqué à des applications et à des organizations précises; les partials s’appliquent uniquement aux `screens` exclus des filtres ACUL. 3. Sélectionnez **** **POINTS D’ENTRÉE** pour insérer des extraits de code et des variables de gabarit. 4. Sélectionnez **** pour ajouter des **EXTRAITS DE CODE** au point d’entrée sélectionné. 5. Sélectionnez **\{ }** pour ajouter des **VARIABLES DE GABARIT** au point d’entrée sélectionné. 6. Sélectionnez **** **ACTIONS** pour ajouter des [Actions](/docs/fr-ca/customize/actions/actions-overview) et appliquer une logique personnalisée à l’aide des champs et du contenu de vos Partials. 7. Sélectionnez **Enregistrer et publier** pour mettre à jour votre **Screen**. [partials]

Gérer les Partials par programmation

Vous pouvez gérer les Partials à l’aide de l’[Auth0 Management API](https://auth0.com/docs/api/management/v2/prompts/put-partials) (`GET /prompts/{prompts_name}/partials`). Chaque prompt doit préciser le `screen` lors de l’ajout, de la mise à jour ou de la suppression d’un partial. Les Partials peuvent contenir un maximum de 10 000 caractères. Les Partials peuvent aussi être gérés à l’aide de l’interface de personnalisation de Universal Login dans Auth0 CLI en exécutant `auth0 ul customize` dans votre terminal. Une image montrant l’interface de ligne de commande pour les Partials.

Une image montrant l’interface de ligne de commande pour les Partials.

Styliser et valider les champs de formulaire

Personnaliser les prompts d'inscription et de connexion offre des styles prédéfinis ainsi que la validation côté client pour certains éléments de formulaire HTML. Les éléments suivants sont pris en charge : * `` * `` * `` * `` * `` * `` * `` * `

Pour utiliser les styles de champ prédéfinis, placez l'élément de formulaire de votre choix dans un `<div>` avec la classe `ulp-field`. De même, ajoutez la classe `ulp-error` au même `<div>` pour utiliser les styles d'erreur prédéfinis. Si l'élément `ulp-error-info` est présent, un message d'erreur mis en forme s'affichera aussi.

Vous pouvez trouver des extraits de code prédéfinis dans l'éditeur de [partials](#use-the-auth0-dashboard-to-manage-partials).

<h3 id="client-side-validation">
  Validation côté client
</h3>

Le framework de validation côté client de la fonctionnalité permet aux clients de valider les données saisies par l’utilisateur au moyen d’attributs HTML afin d’exécuter une ou plusieurs fonctions de validation personnalisées. Les fonctions de validation peuvent être incluses directement dans le Partial ou dans le `<head>` du modèle de page.

Pour ajouter une validation côté client à un élément de formulaire :

* Référencez la fonction de validation à l’aide de l’attribut `data-ulp-validation-function` sur l’élément `<div class="ulp-error-info">`.
* Indiquez sur quels événements DOM la fonction de validation doit s’exécuter à l’aide de l’attribut `data-ulp-validation-event-listeners` sur l’élément `<div class="ulp-error-info">`, en notant que les validations s’exécutent automatiquement lors de la soumission.
* Pour assurer la conformité aux WCAG, les champs de saisie doivent être liés par programmation à leurs messages d’erreur — par exemple, au moyen de `aria-describedby="error-id"` et `aria-invalid="true"` — afin que les lecteurs d’écran annoncent les erreurs de validation.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Soyez prudent lorsque vous utilisez du JavaScript tiers sur votre page d’inscription. Des renseignements sensibles liés à la sécurité transitent souvent par la page d’inscription, ce qui la rend vulnérable aux attaques par script intersite.

Dans la mesure du possible, Auth0 recommande de valider les données fournies par l’utilisateur avant la soumission.
</Callout>

<h2 id="localize-content">
  Localiser le contenu
</h2>

On peut localiser une partie du contenu en définissant de nouvelles variables de texte personnalisées à l’aide de la [Custom Text API](/docs/fr-ca/api/management/v2/prompts/put-custom-text-by-language). Il est possible de définir jusqu’à trente variables de texte personnalisées pour chaque combinaison écran-langue.

<h3 id="create-or-update-a-custom-text-variable">
  Créer ou mettre à jour une variable de texte personnalisée
</h3>

Gérez les variables de texte personnalisées avec la [Custom Text API](/docs/fr-ca/api/management/v2/prompts/get-custom-text-by-language). Les requêtes doivent préciser le `screen` lors de l’ajout, de la mise à jour ou de la suppression d’une variable de texte personnalisée. Les variables de texte personnalisées suivent la convention d’appellation `var-<name>`. Les liens Markdown sont pris en charge et convertis en éléments HTML `<a>` avant d’être affichés aux utilisateurs.

Vous trouverez ci-dessous un exemple de requête pour ajouter une variable au libellé d’une case à cocher des Conditions d’utilisation en anglais et en espagnol. Consultez la <Tooltip tip="Management API: Un produit qui permet aux clients d’effectuer des tâches administratives." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Management+API">Management API</Tooltip> pour en savoir plus.

```json lines theme={null}
# PUT /api/v2/prompts/signup-id/custom-text/en
{
  "signup": {
    "var-tos": "I agree with the [Terms of Service](https://en.example.com/tos)"
  }
}

# PUT /api/v2/prompts/signup-id/custom-text/es
{
  "signup": {
    "var-tos": "Estoy de acuerdo con los [Términos de Servicio](https://es.example.com/tos)"
  }
}
```

<h3 id="use-a-custom-text-variable-in-a-partial">
  Utiliser une variable de texte personnalisée dans un Partial
</h3>

Les variables de texte personnalisées sont référencées dans les partials à l’aide de l’objet `prompts.screen.text`; la référence pour l’exemple `var-tos` de la section précédente est `prompt.screen.text.varTos`. Consultez l’exemple ci-dessous pour voir comment utiliser, dans un partial du prompt Signup ID, une variable créée précédemment, en notant que la variable `var-tos` de la Management API y est référencée sous la forme `varTos`.

```html theme={null}
# PUT api/v2/prompts/signup/partials
<div class='ulp-field'>
  <input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'>
  <label for='terms-of-service'>{{ prompt.screen.text.varTos }}</label>
</div>
```

<h2 id="validate-and-save-captured-data">
  Valider et enregistrer les données capturées
</h2>

Les données capturées par des éléments de formulaire personnalisés sont accessibles dans Actions, et Auth0 recommande de valider les données recueillies avant de les enregistrer ou de les soumettre.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Lorsque vous utilisez des éléments de formulaire personnalisés, vous devez inclure le préfixe `ulp-` dans tous les noms de champ afin que les données soient accessibles dans [Actions](/docs/fr-ca/customize/actions/actions-overview).
</Callout>

Chaque Action reçoit les données capturées sous la forme d’un objet dans `event.request.body`. Les clients peuvent renvoyer une erreur de validation à l’aide de la fonction `api.validation.error`.

Lorsque vous utilisez une [connexion de base de données](/docs/fr-ca/authenticate/database-connections#use-auth0-user-store) :

* Les données provenant des prompts d’inscription sont accessibles dans le déclencheur [`pre-user-registration`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger). Une erreur de validation renvoyée par le déclencheur empêche l’utilisateur de s’inscrire.
* Les données provenant des prompts de connexion sont accessibles dans le déclencheur [`post-login`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger). Les erreurs de validation sont transmises à la page d’erreur de l’application du client.

Lorsque vous utilisez des [connexions sociales](/docs/fr-ca/authenticate/identity-providers/social-identity-providers) ou [connexions d’entreprise](/docs/fr-ca/authenticate/identity-providers/enterprise-identity-providers/enable-enterprise-connections) :

Lorsque vous utilisez une [connexion de base de données personnalisée](/docs/fr-ca/authenticate/database-connections/custom-db) :

* Les données provenant des prompts d’inscription sont accessibles dans le déclencheur [`pre-user-registration`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger) avec les scripts d’action de base de données personnalisée suivants : [Create User](/docs/fr-ca/authenticate/database-connections/custom-db/templates/create) et [Login](/docs/fr-ca/authenticate/database-connections/custom-db/templates/login).

* Les données provenant des prompts de connexion sont accessibles dans le déclencheur [`post-login`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) avec les scripts d’action de base de données personnalisée suivants : [Login](/docs/fr-ca/authenticate/database-connections/custom-db/templates/login) et [Change Password](/docs/fr-ca/authenticate/database-connections/custom-db/templates/change-password).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Pour utiliser des scripts d’action de base de données personnalisée, activez **Context objects in database scripts** dans votre connexion de base de données personnalisée. Pour en savoir plus, consultez [Enable context object](https://auth0.com/docs/authenticate/database-connections/custom-db/create-db-connection#enable-context-object).
</Callout>

Lorsque vous utilisez une [connexion Passwordless](/docs/fr-ca/authenticate/passwordless/passwordless-with-universal-login) :

* Les données provenant à la fois des prompts d’inscription et de connexion sont accessibles dans le déclencheur [`post-login`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger). Les erreurs de validation sont transmises à la page d’erreur de l’application du client.

Lorsque vous utilisez les prompts [passkey](/docs/fr-ca/authenticate/database-connections/passkeys) :

* Les données provenant du prompt `passkey-enrollment` sont accessibles dans le déclencheur [`pre-user-registration`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger). Une erreur de validation renvoyée par le déclencheur empêche l’utilisateur de s’inscrire.
* Les prompts `passkey-enrollment` et `passkey-enrollment-local` ne capturent jamais de données dans le déclencheur Post Login.
* Les données provenant du prompt `passkey-enrollment-local` ne sont pas accessibles, puisqu’il est toujours affiché après l’exécution du déclencheur [`post-login`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Assainissez toutes les données que vous recueillez dans le formulaire avant de les enregistrer ou de les afficher.

* Assurez-vous que toutes les données enregistrées sont passées par la [fonction d’assistance `{{escape}}` de Liquid](https://shopify.github.io/liquid/filters/escape/)
  * Si vous affichez des données dans un modèle de courriel, supprimez la syntaxe Liquid
  * Si vous affichez des données sur une page Web, échappez les entités HTML
  * Si vous enregistrez des données dans une base de données, utilisez des requêtes paramétrées
  * Si vous transmettez des données dans une chaîne de requête, encodez-les, par exemple avec : `{{encodeURI}}` ou `{{encodeURIParam}}`

Pour en savoir plus sur l’atténuation des risques et les pratiques exemplaires pour stocker des données de façon sécuritaire, consultez [cette aide-mémoire](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html).
</Callout>

<h3 id="save-to-user-metadata">
  Enregistrer dans les métadonnées utilisateur
</h3>

À partir de l’Action, les données recueillies peuvent être envoyées à une API externe pour validation et stockage, ou enregistrées dans le `user_metadata` de l’utilisateur au moyen de `api.user.setUserMetadata`.

```js lines theme={null}
// Étant donné ce code dans le formulaire d'inscription
// <div class="ulp-field">
//   <label for="full-name">Full Name</label>
//   <input type="text" name="ulp-full-name" id="full-name">
// </div>

exports.onExecutePreUserRegistration = async (event, api) => {
  const fullName = event.request.body['ulp-full-name'];
  if(!fullName) {
    api.validation.error("invalid_payload", "Missing Name");
    return;
  }

api.user.setUserMetadata("fullName", fullName);
};
```

<h2 id="learn-more">
  En savoir plus
</h2>

* [Utiliser des variables dynamiques pour internationaliser des éléments de formulaire personnalisés](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts/use-dynamic-variables-to-internationalize-custom-form-elements)