Personnaliser les prompts d'inscription et de connexion

Découvrez comment ajouter des champs personnalisés et du texte aux prompts d’inscription et de connexion d’Auth0 Universal Login.

Avant de commencer

1. Assurez-vous qu’un Custom Domain est configuré pour votre tenant.
2. Confirmez que vous utilisez Universal Login 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é 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 pour la logique conditionnelle et les variables dynamiques. De plus, toute variable Liquid offerte dans le Page Template 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

​

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, 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 par défaut; vous pouvez utiliser des partials pour insérer des extraits de code et des variables de gabarit.
• ADVANCED : le screen est rendu à l’aide de ACUL, 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 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.

​

Gérer les Partials par programmation

Vous pouvez gérer les Partials à l’aide de l’Auth0 Management API (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.

​

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 :

• <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 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.

​

Validation côté client

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.

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.

​

Localiser le contenu

On peut localiser une partie du contenu en définissant de nouvelles variables de texte personnalisées à l’aide de la Custom Text API. Il est possible de définir jusqu’à trente variables de texte personnalisées pour chaque combinaison écran-langue.

​

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

Gérez les variables de texte personnalisées avec la Custom Text API. 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 Management API pour en savoir plus.

# 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 Partial

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.

# 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>

​

Valider et enregistrer les données capturées

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.

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.

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 :

• Les données provenant des prompts d’inscription sont accessibles dans le déclencheur pre-user-registration. 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. Les erreurs de validation sont transmises à la page d’erreur de l’application du client.

Lorsque vous utilisez des connexions sociales ou connexions d’entreprise :

• Les données provenant des prompts de connexion sont accessibles dans le déclencheur post-login. Les erreurs de validation sont transmises à la page d’erreur de l’application du client.

Lorsque vous utilisez une connexion de base de données personnalisée :

• Les données provenant des prompts d’inscription sont accessibles dans le déclencheur pre-user-registration avec les scripts d’action de base de données personnalisée suivants : Create User et Login.

• Les données provenant des prompts de connexion sont accessibles dans le déclencheur post-login avec les scripts d’action de base de données personnalisée suivants : Login et Change Password.

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.

Lorsque vous utilisez une connexion Passwordless :

• Les données provenant à la fois des prompts d’inscription et de connexion sont accessibles dans le déclencheur post-login. Les erreurs de validation sont transmises à la page d’erreur de l’application du client.

Lorsque vous utilisez les prompts passkey :

• Les données provenant du prompt passkey-enrollment sont accessibles dans le déclencheur pre-user-registration. 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.

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
• 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.

​

Enregistrer dans les métadonnées utilisateur

À 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.

// É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);
};

​

En savoir plus

• Utiliser des variables dynamiques pour internationaliser des éléments de formulaire personnalisés