> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personnaliser les invites d’inscription et de connexion

> Apprenez à personnaliser les invites d’inscription et de connexion pour la connexion universelle.

<Card title="Avant de commencer">
  1. Assurez-vous qu’un [**domaine personnalisé**](/docs/fr-ca/customize/custom-domains) est configuré pour votre locataire.
  2. Confirmez que vous utilisez la [**connexion universelle**](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) pour toutes les invites d’inscription et de connexion et assurez-vous que **Personnaliser la page de connexion** est désactivé pour les invites de connexion.
  3. Vérifiez que vous avez configuré un [Modèle de page personnalisé](/docs/fr-ca/customize/universal-login-pages/universal-login-page-templates#custom-sign-up-prompts).
</Card>

La **personnalisation des invites d’inscription et de connexion** est une fonctionnalité qui permet aux clients dont le domaine et le modèle de page personnalisés sont activés d’ajouter des champs et du contenu personnalisés aux invites d’inscription et de connexion de l’application.

#### Cas d’utilisation

La personnalisation des invites d’inscription et de connexion prend en charge deux cas d’utilisation : le **contenu personnalisé** et la **capture de données.**

Le **contenu personnalisé** est un contenu statique tel que du texte, des liens ou des images placés directement sur les invites d’inscription et de connexion.

**La capture de données** utilise des éléments de formulaire ajoutés dynamiquement aux invites d’inscription et de connexion, ce qui est utile pour recueillir et valider le consentement de l’utilisateur ou des données produites par l’utilisateur telles que le nom de famille.

La capture de données est possible pour les connexions de base de données authentifiées par mot de passe. Lors de l’utilisation d’une connexion sans mot de passe, la capture de données est possible lors de l’authentification par courriel ou par mot de passe à usage unique par SMS. Les clés d’identification et les Magic Links ne sont pas encore pris en charge.

<Warning>
  N’utilisez les personnalisations des invites d’inscription et de connexion que pour transmettre ou collecter des données sensibles ou réglementées, comme l’autorise votre accord avec Okta.
</Warning>

#### Terminologie

Une **invite** est une étape bien précise dans un flux d’authentification donné. Chaque invite comporte au moins un **écran** et, selon la configuration du locataire, chaque écran pris en charge comporte quatre ou six **points d’entrée**, qui sont des emplacements dans l’écran où du code personnalisé (**partiels**) peut être inséré.

Les invites suivantes peuvent être personnalisées :

* `signup`
* `signup-id`
* `signup-password`
* `login`
* `login-id`
* `login-password`
* `login-passwordless`

  * `login-passwordless-sms-otp`
  * `login-passwordless-email-code`

Les partiels prennent en charge HTML, CSS, Javascript et la [syntaxe Liquid](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) pour alimenter la logique conditionnelle et les variables dynamiques. En outre, toute variable Liquid disponible pour le [modèle de page](/docs/fr-ca/customize/login-pages/universal-login/customize-templates) est également disponible.

Ces points d’entrée sont présents lorsqu’une connexion de base de données ou sans mot de passe est activée :

* `form-content-start`
* `form-content-end`
* `form-footer-start`
* `form-footer-end`

Les points d’entrée suivants sont disponibles lorsqu’au moins une connexion sociale ou d’entreprise est activée :

* `secondary-actions-start`
* `secondary-actions-end`

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/7sQVWVbaTp4VMW4nJjsn2G/74d0b30da7b034bd695274dbd146964b/Custom_Prompts.png" alt="Screenshots of each Custom Prompt option and their partials" />
</Frame>

#### Utiliser Management API pour gérer les partiels

Les partiels peuvent contenir un maximum de 10 000 caractères et sont gérés par la [Management API Auth0](https://auth0.com/docs/api/management/v2/prompts/put-partials) à l’adresse `/v2/prompts/{prompts_name}/partials`. Chaque invite doit spécifier le `Screen (Écran)` lors de l’ajout, de la mise à jour ou de la suppression d’un partiel. Vous trouverez ci-dessous un exemple d’appel permettant d’afficher tous les partiels existants pour une invite, en notant que le préfixe `ulp-container` n’est pas nécessaire pour référencer les points d’entrée dans les appels de l’API.

```javascript lines theme={null}
GET /api/v2/prompts/signup-id/partials
# response
# success code: 200
# not found code: 404
body: {
  "signup-id": {
    "form-content-start": "<div>HTML or Liquid</div>...",
    "form-content-end": "<div>HTML or Liquid</div>..."
  }
}
```

Les partiels peuvent également être gérés à l’aide de l’interface de connexion universelle personnalisée de l’interface de ligne de commande (CLI) Auth0 en exécutant `auth0 ul customize` dans votre terminal.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/fr-ca/cdy7uua7fh8z/KxWfVAMkumyI2jrUqkEp8/b9315709899864a2f8758ad7f5a4f5b2/Partials_CLI_Image.jpg" alt="An image showing the command-line interface for Partials. " />
</Frame>

#### Style et validation des entrées de formulaire

Les invites d’inscription et de connexion personnalisées proposent des styles prédéfinis et prennent en charge la validation côté client pour certains éléments de formulaire HTML. Les éléments suivants sont pris en charge :

* `<input type="text">`
* `<input type="number">`
* `<input type="checkbox">`
* `<input type="password">`
* `<input type="email">`
* `<input type="tel">`
* `<input type="url">`
* `<select>`
* `<textarea>`

Pour utiliser les styles d’entrée prédéfinis, enveloppez 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 stylisé sera également affiché.

#### Validation côté client

Le cadre de validation côté client de la fonctionnalité permet aux clients de valider l’entrée de l’utilisateur en utilisant des attributs HTML pour exécuter une ou plusieurs fonctions de validation personnalisées. Les fonctions de validation peuvent être incluses directement dans le partiel 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` de l’élément `<div class="ulp-error-info">`.
* Déclarez les événements DOM sur lesquels la fonction de validation doit être exécutée à 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.

<Accordion title="Éléments du champ de saisie Style préconçu pour les champs de saisie">
  ```javascript lines theme={null}
  <div class="ulp-field">
    <label for="first-name">First Name</label>
    <input type="text" name="ulp-first-name" id="first-name">
    <div class="ulp-error-info">
      First Name is Required
    </div>
  </div>
  ```
</Accordion>

<Accordion title="Éléments de sélection Style préconçu pour les champs de sélection">
  ```javascript lines theme={null}
  <div class="ulp-field">
    <label for="preferred-language">Preferred Language</label>
    <select name="ulp-preferred-language" id="preferred-language">
      <option></option>
      <option value="english">English</option>
      <option value="french">French</option>
      <option value="spanish">Spanish</option>
    </select>
    <div class="ulp-error-info">
      Please Select a Language.
    </div>
  </div>
  ```
</Accordion>

<Accordion title="Éléments de texte Style préconçu pour les champs de texte">
  ```javascript lines theme={null}
  <div class="ulp-field">
    <label for="comments">Comments</label>
    <textarea type="text" name="ulp-comments" id="comments"></textarea>
    <div class="ulp-error-info">
      Please provide an answer.
    </div>
  </div>
  ```
</Accordion>

<Accordion title="Éléments de cases à cocher Style préconçu pour les champs des cases à cocher">
  ```javascript lines theme={null}
  <div class="ulp-field">
    <input type="checkbox" name="ulp-terms-of-service" id="terms-of-service">
    <label for="terms-of-service">
      I agree to the <a href="#">Terms of Service</a>
    </label>
    <div class="ulp-error-info">
      Please agree to the Terms of Service.
    </div>
  </div>
  ```
</Accordion>

<Accordion title="Validation numéro de téléphone Validation du numéro de téléphone côté client">
  ```javascript lines theme={null}
  // Validation Function
  <script>
    function validatePhoneFunction(element, formSubmitted) {
      if (!formSubmitted) {
        return true;
      }
      return element.value.replace(/\D/g, '').length === 10;
    }
  </script>

  // Custom Input Field including the validation error HTML
  <div class="ulp-field">
    <label for="ulp-field-phone">Phone Number</label>
    <input type="text" name="ulp-field-phone" id="ulp-field-phone">
    <div
      class="ulp-error-info"
      data-ulp-validation-function="validatePhoneFunction"
      data-ulp-validation-event-listeners="blur,change,input,focus">
      Invalid phone number
    </div>
  </div>
  ```
</Accordion>

<Accordion title="Screen Reader Validation Validation for accessible error messages">
  ```javascript lines theme={null}
  <script>
    function requiredTextFunction(element, formSubmitted) {
      if (!formSubmitted) return true;
      return element.value.trim().length > 0;
    }
  </script>

  <div class="ulp-field">
    <label for="ulp-phone">Phone Number</label>
    <input
      type="text"
      id="ulp-phone"
      name="ulp-field-phone"
      aria-describedby="error-phone-required"
      aria-invalid="true"
      required
    >
    <div
      id="error-phone-required"
      class="ulp-error-info"
      role="alert"
      data-ulp-validation-function="requiredTextFunction"
      data-ulp-validation-event-listeners="change"
    >
      Phone number is required
    </div>
  </div>
  ```
</Accordion>

<Warning>
  Faites preuve de prudencelorsque vous utilisez un JavaScript tiers sur votre page d’inscription. Des informations de sécurité sensibles passent souvent par la page d’inscription, la rendant vulnérable aux scripts inter-sites.

  Auth0 conseille, dans la mesure du possible, de valider les données fournies par l’utilisateur avant de les soumettre.
</Warning>

#### Localiser le contenu

Un contenu partiel peut être localisé 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 par combinaison d’écran/langue.

##### Créer ou mettre à jour une variable de texte personnalisée

La Custom Text API est disponible [ici](/docs/fr-ca/api/management/v2/prompts/get-custom-text-by-language) et chaque variable suit une convention de dénomination `var-<name>`. Les appels à l’API doivent spécifier un Screen lors de l’ajout, de la mise à jour ou de la suppression d’une variable de texte personnalisée. Les liens Markdown sont pris en charge et sont convertis en éléments HTML `<a>` avant d’être affichés aux utilisateurs.

Vous trouverez ci-dessous un exemple d’appel permettant d’ajouter une variable pour le texte d’une étiquette de case à cocher relative aux conditions d’utilisation en anglais et en espagnol. Pour en savoir plus, consultez la documentation de <Tooltip href="/docs/fr-ca/glossary?term=management-api" tip="Management API
Un produit permettant aux clients d’effectuer des tâches administratives." cta="Voir le glossaire">Management API</Tooltip>.

```javascript 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)"
  }
}
```

##### Utiliser une variable de texte personnalisée dans un partiel

Les variables de texte personnalisées sont référencées dans les partiels à l’aide de l’objet `prompts.screen.text`; la référence pour l’exemple `var-tos` de la section précédente est `prompts.screen.texts.varTos`. Voir ci-dessous un exemple d’utilisation d’une variable précédemment créée dans un partiel sur l’invite ID d’inscription, en notant que la variable `var-tos` de Management API est référencée en tant que `varTos` dans le partiel.

```javascript lines theme={null}
# PUT api/v2/prompts/signup/partials
{
  "signup": {
    "form-content-end": "<div class='ulp-field'><input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'><label for='terms-of-service'>{{ prompt.screen.texts.varTos }}</label></div>"
  }
}
```

#### Valider et enregistrer les données capturées

Les données capturées par les éléments de formulaire personnalisés sont disponibles dans les actions, et Auth0 recommande que les données collectées soient validées.

<Warning>
  Lors de l’utilisation d’éléments de formulaire personnalisés, vous devez inclure le préfixe `ulp-` avec tous les noms d’entrée pour garantir que les données peuvent être utilisées avec les Actions.
</Warning>

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

Lors de l’utilisation d’une connexion de base de données :

* Les données des invites d’inscription sont accessibles lors du pré-enregistrement de l’utilisateur et, si une erreur de validation est renvoyée, l’utilisateur ne peut pas s’inscrire.
* Les données des invites de connexion sont accessibles sur le déclencheur de post-connexion, et si une erreur de validation est renvoyée, celle-ci est transmise à la page d’erreur de l’application du client.

Lors de l’utilisation d’une connexion sans mot de passe :

* Les données des invites d’inscription et de connexion sont accessibles sur le déclencheur de post-connexion, et si une erreur de validation est renvoyée, l’erreur de validation est transmise à la page d’erreur de l’application du client.

<Warning>
  Assainissez toutes les données que vous collectez dans le formulaire avant de les enregistrer ou les restituer.

  * S’assurer que toutes les données enregistrées sont transmises par la [fonction d’aide \{\{escape}} de Liquid](https://shopify.github.io/liquid/filters/escape/)
  * Si vous restituez les données dans un modèle de courriel, supprimez la syntaxe Liquid
  * Si vous restituez 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 la chaîne de requête, encodez-les avec : `{{encodeURI}}` ou `{{encodeURIParam}}`

  Pour en savoir plus sur l’atténuation des risques et les meilleures pratiques en matière de stockage sécurisé des données, consultez [ce guide pratique](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html).
</Warning>

##### Enregistrer dans les métadonnées de l’utilisateur

À partir de l’action, les données capturées peuvent être envoyées à une API externe pour validation et stockage ou sauvegardées dans `user_metadata` sur l’utilisateur via `api.user.setUserMetadata</code.`

```javascript lines theme={null}
# Given this code in the signup form
# <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);
};
```

## En savoir plus

* [Utiliser des variables dynamiques pour traduire les é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)