Configurar la selección flexible de idioma

Aprenda a agregar un menú de idioma preferido a las pantallas de Universal Login.

La selección flexible de idioma es una función opcional que permite a los usuarios seleccionar su idioma preferido en las pantallas de Universal Login asociadas con su aplicación, como la pantalla de inicio de sesión. Puede configurar esta función de forma individual para distintas pantallas de Universal Login.

Después de implementar esta función para una pantalla específica, se agrega un menú de selección de idioma a la pantalla correspondiente. Los usuarios pueden elegir su idioma preferido en este menú para que la pantalla se renderice automáticamente en ese idioma.

​

Antes de comenzar

Antes de implementar la selección flexible de idioma, asegúrese de cumplir los siguientes requisitos:

• Use Universal Login.

  • Esta funcionalidad no está disponible para páginas de Login personalizadas.

• Configure un custom domain.

• Habilite los idiomas que planea agregar a sus pantallas en su Tenant de Auth0.

  • En el Auth0 Dashboard, vaya a Settings > General > Languages y habilite uno o más idiomas.

    • Para obtener más información, consulte Universal Login Internationalization.

​

Implementa una selección flexible de idioma

Configurar una selección flexible de idioma incluye dos pasos principales:

1. Preparar la plantilla de la página para facilitar la selección de idioma.
2. Configurar las pantallas individuales para mostrar la selección de idioma a los usuarios.

​

Prepare la plantilla de página de Universal Login

Para empezar, agregue el siguiente script a la plantilla de página de Universal Login para facilitar la selección del idioma.

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

Este script permite que las pantallas de Universal Login rendericen un menú dinámico de selección de idioma. Los usuarios pueden acceder a este menú para aplicar su idioma preferido a una pantalla configurada.

Para agregar este script a la plantilla de página, use el endpoint Set Template for Universal Login.

Tenga en cuenta que esta llamada sobrescribirá cualquier configuración existente que haya realizado en la plantilla de página de Universal Login. Para evitar interrupciones, asegúrese de incluir en esta llamada todas las personalizaciones necesarias de la plantilla de página.

​

Configurar pantallas individuales de Universal Login

A continuación, agregue la selección de idioma a una o más pantallas de Universal Login configurando partials personalizados para prompts. Los partials son fragmentos de código personalizado insertados en un punto de entrada dentro de una pantalla, como la pantalla de inicio de sesión. Para obtener más información, consulte Personalizar las pantallas de registro e inicio de sesión.

Para agregar la selección de idioma a una pantalla específica, use la Management API de Auth0 para configurar partials personalizados para prompts con los siguientes parámetros:

Parámetro	Descripción	Valor de ejemplo
language	Obligatorio. Uno o más idiomas que se incluirán en el menú de selección de idioma que se muestra a los usuarios.	es,fr,en
persist	Obligatorio. Determina si el idioma debe mantenerse durante la sesión.	session
action	Opcional. Use este parámetro cuando quiera que los usuarios puedan actualizar su idioma sin avanzar la pantalla. Si se proporciona este valor, el formulario no se envía automáticamente cuando un usuario cambia de idioma. De lo contrario, la pantalla avanza automáticamente cuando se selecciona un idioma diferente.	change-language

Consulte las secciones a continuación para revisar ejemplos de código de distintos tipos de pantallas de Universal Login.

En los ejemplos de código a continuación, asegúrese de reemplazar los placeholders por los valores adecuados:

• Reemplace {yourDomain} por yourdomain.auth0.com.
• Reemplace {mgmtApiToken} por su token de acceso.

Pantalla de registro: Identificador + Contraseña

Para agregar la selección de idioma a la pantalla signup, use el endpoint Set partials for a prompt:

Pantalla de Login: identificador primero

Para agregar la selección de idioma a la pantalla login-id, usa el endpoint Set partials for a prompt:

Pantalla de Login: sin contraseña (correo electrónico)

Para agregar la selección de idioma a la pantalla login-passwordless-email-code, usa el endpoint Set partials for a prompt: