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

Découvrez comment les variables dynamiques permettent de créer des invites de connexion multilingues.

Vous pouvez afficher les personnalisations de l’invite d’inscription différemment selon les données contextuelles. Cette fonctionnalité utilise la variable locale pour afficher conditionnellement des champs de formulaire et définir le comportement de validation.

Le cas d’utilisation suivant s’appuie sur la variable locale pour afficher un message sur les conditions d’utilisation et une case à cocher. N’importe quelle variable exposée aux modèles de page peut être utilisée à la place.

​

Prérequis

• Le locataire dispose d’un domaine personnalisé vérifié
• Le locataire a un modèle de page défini

​

Activer les langues fr et es

Accédez à votre Auth0 Dashboard, puis accédez à Settings > General et activez les langues :

​

Afficher conditionnellement les champs personnalisés

Utilisez Management API pour ajouter un modèle partiel au conteneur de l’invite d’inscription form-content-end de Universal Login. Si le paramètre régional est es ou fr, vous pouvez afficher un message sur les conditions d’utilisation et une case à cocher.

{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}

La requête suivante est envoyée au point de terminaison Définir le texte personnalisé pour une invite précise dans la Management API :

// PUT prompts/signup/partials (invite d'inscription)

{
  "signup": {
    "form-content-end": "{% if locale..."
  }
}

Votre invite d’inscription affiche maintenant un message de conditions d’utilisation et une case à cocher uniquement lorsque le paramètre régional est défini sur fr ou es :

Pour tester le résultat, accédez à Manage Dashboard et allez à Branding > Universal Login > Customization Options, puis cliquez avec le bouton droit sur le bouton Try et copiez l’adresse du lien. Ajoutez les paramètres de requête suivants à l’URL copiée, puis accédez à la nouvelle URL : &screen_hint=signup&ui_locales=fr (ou es).

​

Ajouter une validation

Lorsque le paramètre régional est fr, vous pouvez vérifier que la case à cocher est bien cochée avant de continuer. Mettez à jour le modèle partiel à l’aide du code de validation suivant :

{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>

    <!-- NOUVEAU -->
    <div
      class="ulp-error-info"
      data-ulp-validation-function="requiredFunction"
      data-ulp-validation-event-listeners="change">
      Vous devez accepter les termes et conditions pour continuer
    </div>
    <!-- FIN NOUVEAU -->
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}

<!-- NOUVEAU -->
<script>
  function requiredFunction(element, formSubmitted) {
    if (! formSubmitted) {
      return true;
    }
    return element.checked;
  }
</script>
<!-- FIN NOUVEAU -->

Avec cette validation en place, seuls les utilisateurs dont le paramètre régional est fr doivent accepter les conditions d’utilisation.

Les validations de ce cas d’utilisation s’effectuent côté client et visent simplement à faciliter l’expérience utilisateur. Leur exécution n’est pas garantie ; par exemple, le navigateur de l’utilisateur peut avoir JavaScript désactivé. De plus, les validations peuvent être modifiées par des personnes curieuses ou malveillantes. Pour assurer l’intégrité de la logique de validation, les validations côté client doivent être jumelées à des validations côté serveur.