Personnaliser les invites d’inscription et de connexion

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

Avant de commencer

1. Assurez-vous qu’un domaine personnalisé est configuré pour votre locataire.
2. Confirmez que vous utilisez la connexion universelle 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é.

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.

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.

​

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 pour alimenter la logique conditionnelle et les variables dynamiques. En outre, toute variable Liquid disponible pour le modèle de page 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

​

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

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.

​

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.

Éléments du champ de saisie Style préconçu pour les champs de saisie

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

Éléments de sélection Style préconçu pour les champs de sélection

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

Éléments de texte Style préconçu pour les champs de texte

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

Éléments de cases à cocher Style préconçu pour les champs des cases à cocher

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

Validation numéro de téléphone Validation du numéro de téléphone côté client

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

Screen Reader Validation Validation for accessible error messages

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

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.

​

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. 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 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 Management API.

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

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

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.

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.

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

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.

# 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