Configurer la sélection flexible de la langue

Découvrez comment ajouter un menu de sélection de la langue de préférence dans les invites de Universal Login.

La sélection flexible de la langue est une fonctionnalité facultative qui permet aux utilisateurs de choisir leur langue préférée dans les invites Universal Login associées à votre application, comme l’écran de connexion. Vous pouvez configurer cette fonctionnalité individuellement pour différentes invites Universal Login.

Après avoir mis en place cette fonctionnalité pour une invite donnée, un menu de sélection de la langue est ajouté à l’écran associé. Les utilisateurs peuvent choisir une langue préférée dans ce menu pour afficher automatiquement l’invite dans cette langue.

​

Avant de commencer

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

• Utilisez Universal Login.

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

• Configurez un domaine personnalisé.

• Activez les langues que vous prévoyez ajouter à vos invites dans votre locataire Auth0.

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

    • Pour en savoir plus, consultez Internationalisation d’Universal Login.

​

Mettre en place une sélection flexible de la langue

La mise en place d’une sélection flexible de la langue comprend deux étapes principales :

1. Préparer votre modèle de page pour faciliter la sélection de la langue.
2. Configurer des invites individuelles pour afficher le sélecteur de langue aux utilisateurs.

​

Préparez le modèle de page de votre Universal Login

Pour commencer, ajoutez le script suivant à votre modèle de page Universal Login pour faciliter 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 aux invites 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 à l’invite configurée.

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

Notez que cet appel écrasera toute configuration existante que vous avez apportée à votre modèle de page Universal Login. Pour éviter toute interruption, assurez-vous d’inclure dans cet appel toutes les personnalisations nécessaires du modèle de page.

​

Configurer des invites Universal Login individuelles

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

Pour ajouter la sélection de la langue à une invite précise, utilisez la Management API d’Auth0 pour configurer des Partial personnalisés d’invite avec les paramètres suivants :

Paramètre	Description	Valeur d’exemple
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 durant la session.	session
action	Facultatif. Utilisez ce paramètre lorsque vous voulez permettre aux utilisateurs de mettre à jour leur langue sans faire progresser l’invite. Si une valeur est fournie, le formulaire n’est pas soumis automatiquement lorsqu’un utilisateur change de langue. Sinon, l’invite progresse automatiquement 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 d’invites 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.

Invite d’inscription : identifiant + mot de passe

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

Invite de connexion : identifiant d’abord

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

Invite de connexion : Passwordless (courriel)

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