Personnaliser les invites d’inscription et de connexion

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.

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.

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

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.

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

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.

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

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

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

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

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

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.

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

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

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.

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.

À 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);
};

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