Configurer la sélection flexible de la langue

Découvrez comment ajouter un menu permettant de choisir une langue de préférence aux écrans d’Universal Login.

La fonctionnalité optionnelle de sélection flexible de la langue permet aux utilisateurs de choisir leur langue préférée dans les prompts Universal Login associés à votre application, comme l’écran de connexion. Vous pouvez configurer cette fonctionnalité séparément pour différents prompts Universal Login.

Après avoir activé cette fonctionnalité pour un prompt précis, un menu de sélection de la langue est ajouté à l’écran associé. Les utilisateurs peuvent y choisir leur langue préférée pour afficher automatiquement le prompt dans cette langue.

​

Avant de commencer

Avant de pouvoir mettre en place la sélection flexible de la langue, assurez-vous de respecter les conditions suivantes :

• Utilisez Universal Login.

  • Cette fonctionnalité n’est pas offerte pour les pages de connexion personnalisées.

• Configurez un domaine personnalisé.

• Activez dans votre tenant Auth0 les langues que vous prévoyez d’ajouter à vos prompts.

  • Dans l’Auth0 Dashboard, accédez à Settings > General > Languages et activez une ou plusieurs langues.

    • Pour en savoir plus, consultez Universal Login Internationalization.

​

Configurer la sélection flexible de la langue

La configuration de la sélection flexible de la langue comprend deux étapes principales :

1. Préparer votre gabarit de page pour faciliter la sélection de la langue.
2. Configurer chaque prompt pour afficher la sélection de la langue aux utilisateurs.

​

Préparez le gabarit de votre page Universal Login

Pour commencer, ajoutez le script suivant au gabarit de votre page Universal Login pour permettre la sélection de la langue.

<script>
  function updateSelectedLanguage() {
    const selectElement = document.getElementById('language');
    const selectedValue = selectElement.value;
    const options = selectElement.options;
    for (let i = 0; i < options.length; i++) {
      if (options[i].value === selectedValue) {
        options[i].selected = true;
      } else {
        options[i].selected = false;
      }
    }
    document.getElementById('changeLanguage').click();
  }
</script>

Ce script permet au prompt Universal Login d’afficher un menu dynamique de sélection de la langue. Les utilisateurs peuvent accéder à ce menu pour appliquer leur langue préférée à un écran configuré.

Pour ajouter ce script à votre gabarit de page, utilisez le point de terminaison Set Template for Universal Login.

Sachez que cette requête écrasera toute configuration existante de votre gabarit de page Universal Login. Pour éviter toute interruption, assurez-vous d’inclure dans cette requête toutes les personnalisations nécessaires du gabarit de page.

​

Configurer des prompts Universal Login individuels

Ensuite, ajoutez la sélection de la langue à un ou plusieurs prompts Universal Login en configurant des partials de prompt personnalisés. Les partials correspondent à du code personnalisé inséré dans un point d’entrée d’un écran de prompt, comme l’écran de connexion. Pour en savoir plus, consultez Personnaliser les prompts d’inscription et de connexion.

Pour ajouter la sélection de la langue à un prompt précis, utilisez la Management API d’Auth0 pour configurer des partials de prompt personnalisés avec les paramètres suivants :

Paramètre	Description	Exemple de valeur
language	Obligatoire. Une ou plusieurs langues à inclure dans le menu de sélection de la langue affiché aux utilisateurs.	es,fr,en
persist	Obligatoire. Détermine si la langue doit être conservée pendant la session.	session
action	Facultatif. Utilisez ce paramètre si vous voulez permettre aux utilisateurs de mettre à jour leur langue sans faire avancer le prompt. Si une valeur est fournie, le formulaire n’est pas automatiquement soumis lorsqu’un utilisateur change de langue. Sinon, le prompt passe automatiquement à l’étape suivante lorsqu’une autre langue est sélectionnée.	change-language

Consultez les sections ci-dessous pour voir des exemples de code pour différents types de prompts Universal Login.

Dans les exemples de code ci-dessous, assurez-vous de remplacer les espaces réservés par les valeurs appropriées :

• Remplacez {yourDomain} par yourdomain.auth0.com.
• Remplacez {mgmtApiToken} par votre jeton d’accès.

Écran d’inscription : Identifiant + mot de passe

Pour ajouter la sélection de la langue à l’invite signup, utilisez le point de terminaison Set partials for a prompt :

Écran de connexion : Identifiant d’abord

Pour ajouter la sélection de la langue à l’invite login-id, utilisez le point de terminaison Set partials for a prompt :

Écran de connexion : Sans mot de passe (Courriel)

Pour ajouter la sélection de la langue à l’invite login-passwordless-email-code, utilisez le point de terminaison Set partials for a prompt :