Personnaliser les invites d’inscription et de connexion

Découvrez comment personnaliser les invites d’inscription et de connexion pour Universal Login

Avant de commencer

1. Assurez-vous que votre locataire dispose d’un domaine personnalisé configuré.
2. Confirmez que vous utilisez Universal Login pour toutes les invites d’inscription et de connexion, et assurez-vous que l’option Customize Login Page est désactivée pour les invites de connexion.
3. Vérifiez qu’un modèle de page personnalisé est configuré.

Personnaliser les invites d’inscription et de connexion est une fonctionnalité qui permet aux clients ayant activé un domaine personnalisé et un modèle de page personnalisé d’ajouter des champs et du contenu personnalisés aux invites d’inscription et de connexion de leur application.

​

Cas d’utilisation

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

Le contenu personnalisé correspond à du contenu statique, comme du texte, des liens ou des images, placé directement sur les invites d’inscription et de connexion.

La collecte de données repose sur 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 fournies par l’utilisateur, comme le nom de famille.

N’utilisez les personnalisations des invites d’inscription et de connexion pour transmettre ou recueillir des données sensibles ou réglementées que dans la mesure permise par votre entente avec Okta.

​

Terminologie

Une invite est une étape précise d’un flux d’authentification donné. Chaque invite comporte au moins un écran et, selon la configuration du locataire, 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 invites suivantes peuvent être personnalisées :

É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 HTML, CSS, JavaScript et la syntaxe Liquid pour gérer la logique conditionnelle et les variables dynamiques. De plus, toute variable Liquid disponible pour le modèle de page est également prise en charge.

Ces points d’entrée sont disponibles lorsqu’une connexion de base de données ou Passwordless 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

​

Utilisez l’Auth0 Dashboard pour gérer les partials

Utilisez l’Auth0 Dashboard pour insérer des champs et du contenu personnalisés dans les écrans de connexion et d’inscription à l’aide de partials.

1. Accédez à Auth0 Dashboard > Branding > Universal Login, puis sélectionnez Enhance screens with partials.
2. Sélectionnez l’écran à personnaliser dans l’éditeur de partials.

Les écrans peuvent avoir les modes de rendu suivants :

• STANDARD : le screen est rendu à l’aide de l’interface utilisateur Universal Login par défaut; vous pouvez utiliser des partials pour insérer des extraits de code et des variables de modèle.
• ADVANCED : le screen est rendu à l’aide d’ACUL et les partials ne s’appliquent pas.
• ADVANCED (FILTERED) : le screen est rendu avec ACUL appliqué à des applications et à des organisations 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 modèle.

4. Sélectionnez pour ajouter des EXTRAITS DE CODE au point d’entrée sélectionné.

5. Sélectionnez { } pour ajouter des VARIABLES DE MODÈLE au point d’entrée sélectionné.

6. Sélectionnez ACTIONS pour ajouter des Actions et appliquer une logique personnalisée à l’aide du contenu et des champs de vos Partial.

7. Sélectionnez Enregistrer et publier pour mettre à jour votre écran.

​

Gérer les Partials de façon programmatique

Vous pouvez gérer les Partials à l’aide de la Management API d’Auth0 (GET /prompts/{prompts_name}/partials). Chaque invite doit préciser l’screen lors de l’ajout, de la mise à jour ou de la suppression d’un partial. Les Partials peuvent contenir au maximum 10 000 caractères.

Il est également possible de gérer les Partials à l’aide de l’interface Customize Interface de Universal Login dans Auth0 CLI, en exécutant auth0 ul customize dans votre terminal.

​

Mettre en forme et valider les champs de formulaire

La personnalisation des invites d’inscription et de connexion offre des styles prédéfinis et la prise en charge de 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 également.

Vous pouvez trouver des extraits de code prédéfinis dans l’éditeur de partials.

​

Validation côté client

Le mécanisme de validation côté client de cette fonctionnalité permet aux clients de valider la saisie de l’utilisateur à l’aide 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 ê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 à la soumission.
• Pour respecter les WCAG, les champs de saisie doivent être liés par programmation à leurs messages d’erreur — par exemple, en utilisant aria-describedby="error-id" et aria-invalid="true" — afin que les lecteurs d’écran annoncent les erreurs de validation.

Faites preuve de prudence 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 de script intersite.

Chaque fois que possible, Auth0 recommande de valider les données fournies par l’utilisateur avant leur soumission.

​

Localiser le contenu

Il est possible de localiser une partie du contenu en définissant de nouvelles variables de texte personnalisées à l’aide de la Custom Text API. Vous pouvez définir jusqu’à trente variables de texte personnalisées par combinaison écran/langue.

​

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

Gérez les variables de texte personnalisées avec l’Custom Text API. Les appels doivent préciser 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 de nommage 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 d’appel permettant d’ajouter une variable pour le texte du libellé d’une case à cocher des conditions d’utilisation, en anglais et en espagnol. Consultez le Management API pour en savoir plus.

# PUT /api/v2/prompts/signup-id/custom-text/fr
{
  "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 au moyen de l’objet prompts.screen.text ; pour l’exemple var-tos de la section précédente, la référence est prompt.screen.text.varTos. Consultez l’exemple ci-dessous pour voir comment utiliser, dans un partial de l’invite Signup ID, une variable créée précédemment. Notez que la variable var-tos de la Management API est référencée sous la forme varTos dans le partial.

# 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 les éléments de formulaire personnalisés sont disponibles dans Actions, et Auth0 recommande de valider les données recueillies avant de les enregistrer ou de les envoyer.

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 des invites d’inscription sont accessibles dans le déclencheur pre-user-registration. Une erreur de validation provenant du déclencheur empêche l’utilisateur de s’inscrire.
• Les données des invites 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 des invites 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 des invites 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 des invites 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 des invites passkey :

• Les données de l’invite passkey-enrollment sont accessibles dans le déclencheur pre-user-registration. Une erreur de validation provenant du déclencheur empêche l’utilisateur de s’inscrire.
• Les invites passkey-enrollment et passkey-enrollment-local ne capturent jamais de données dans le déclencheur Post Login.
• Les données de l’invite passkey-enrollment-local ne sont pas accessibles, puisqu’elle est toujours affichée après l’exécution du déclencheur post-login.

Lorsque vous utilisez des connexions sociales ou d’entreprise :

• Les données ne sont pas capturées lorsqu’un utilisateur se connecte au moyen d’une connexion sociale ou d’entreprise.

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 ont été traitées à l’aide de la fonction utilitaire {{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 avec, par exemple, {{encodeURI}} ou {{encodeURIParam}}

Pour plus d’informations sur l’atténuation des risques et les pratiques exemplaires pour stocker les données de façon sécuritaire, consultez cette aide-mémoire.

​

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 enregistrées dans le user_metadata de l’utilisateur à l’aide de api.user.setUserMetadata.

// Étant donné ce code dans le formulaire d'inscription
// <div class="ulp-field">
//   <label for="full-name">Nom complet</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