Este post forma parte de una serie de artículos donde estaré compartiendo todo lo necesario para utilizar, configurar y sacar el mayor provecho de Azure AD B2C.

Continuando con la personalización de la marca e identidad que hicimos en el post anterior, donde configuramos y personalizamos los atributos de usuario, te contaré cómo hacer nuestra experiencia de usuario multi idioma.

En esta primera parte veremos los conceptos principales, aprenderemos cómo funciona y cómo utilizar múltiples idiomas. En la parte 2 nos enfocaremos en los atributos de usuario personalizados.

IMPORTANTE: vamos a construir sobre la base del post anterior, con lo cual es recomendable tener claros los conceptos y pasos allí detallados.

Contexto y Requerimientos

En un contexto totalmente globalizado como el actual, es habitual que las aplicaciones web crucen las fronteras para alcanzar usuarios cuyo idioma principal difiere del idioma original. Es por esto, que la mayoría de las aplicaciones de hoy en día se diseñan para soportar múltiples idiomas.

Azure AD B2C soporta 36 idiomas e incluye la posibilidad de configurar un idioma totalmente personalizado si fuese requerido. Además podemos agregar nuestras propias traducciones para todos aquellos atributos de usuario personalizados que hayamos agregado.

¿Cómo funcionan los idiomas en Azure AD B2C?

Al iniciar el flujo de usuario, podemos indicar como parte de los parámetros query-string el idioma que queremos utilizar, Azure AD B2C hará la traducción correspondiente. Si no se especifica en forma explícita un idioma entonces se utilizará el idioma requerido por el browser, si el browser utiliza un idioma no soportado, finalmente se utilizará el idioma configurado como predeterminado o de facto.

Tener en cuenta que cada idioma se configura a nivel de Flujo de Usuario y debe haber siempre un idioma predeterminado o de facto.

Todos los atributos de usuario estándares tienen su traducción correspondiente en todos los idiomas soportados. No obstante, tendremos que proveer traducciones manualmente para todos aquellos atributos de usuarios personalizados.

Configuración de idioma en Azure AD B2C

Lo primero que debemos realizar es navegar hasta nuestro flujo de usuario e ir a la sección Idiomas, una vez allí habilitar la personalización de idiomas.

Flujo de Usuario – Habilitar personalización de idiomas

Una vez habilitada la opción de personalización, podremos seleccionar la lista de idiomas disponibles. Como mencionamos anteriormente, siempre debe haber un idioma seleccionado como predeterminado, en este caso es el idioma Inglés.

Idioma – Habilitar idioma

Para habilitar y/o configurar otro idioma sólo basta con seleccionar el idioma deseado, en este caso Español, y marcar la opción Habilitado.

Tenemos la posibilidad de seleccionar este idioma como predeterminado o de facto y en la sección de Archivos de Recursos de nivel de página podemos personalizar como traducir cada elemento (lo veremos en la parte 2).

Una vez guardados los cambios, el idioma Español estará disponible.

Idioma – Habilitar ui_locales

Para probar o verificar esta configuración, tenemos que ejecutar el flujo de usuario. Esta vez la sección de localización estará disponible.

Activar la opción Especificar ui_locales nos permite seleccionar un idioma en forma explícita, caso contrario se utiliza el idioma predeterminado, en este caso Inglés.

Copiando y pegando en un block de notas la URL que se genera con cada idioma podemos comparar y analizar como funciona ui_locales.

¿Cómo funciona ui_locales?

ui_locales consiste en un parámetro que se adiciona a la URL de conexión del flujo de usuario que es usado por Azure AD B2C para traducir cada página al idioma correspondiente.

Comparando las URLs que copiamos y pegamos anteriormente podemos observar los distintos valores que va tomando el parámetro (generalmente es el último parámetro de la URL), incluso podemos modificar manualmente y utilizar un valor inexistente como en los siguientes ejemplos:

Flujo de Usuario – Comparación URLs

Debido a que el idioma predeterminado configurado hasta el momento es Inglés, tanto en el caso de un idioma inexistente como en el caso de un idioma deshabilitado se comportarán idénticamente al idioma Inglés.

Para en el caso implícito (donde no se incluye el parámetro ui_locales), depende del idioma configurado localmente para el usuario. En mi caso, el idioma configurado en mi computadora es Inglés.

Navegando a cada una de las URLs anteriores, podemos observar lo siguiente:

  • Español (ui_locales=es)
Inicio de sesión – Español
  • Inglés (ui_locales=en)
  • Inexistente o no habilitado (ui_locales=xx)
  • Implícito (sin ui_locales)
Inicio de sesión – Inglés y por defecto

Podemos apreciar como absolutamente todo el formulario se traduce sin ningún tipo de problemas en forma automática. Sin embargo, el Registro de usuario o Sign Up tiene una traducción parcial para el idioma Inglés:

Registro de Usuario – Sin configuración de traducción
  • Los atributos de usuario estándar (cómo Dirección de Email) aparecen correctamente traducidos al Inglés como es esperado
  • Los atributos de usuario personalizados (cómo habilidades) aparecen es Español incluso cuando el idioma seleccionado es Inglés.

Hemos hecho un muy buen progreso, y no sólo aprendimos como configurar distintos idiomas sino que también aprendimos como funciona la traducción de Azure AD B2C, pero todavía nos falta un paso más para poder tener una traducción completa.

Conclusiones

  • ¡Gran variedad de idiomas disponibles! 36 opciones a disposición cubren un espectro muy amplio de opciones listas para usar.
  • ¡Flexibilidad! Seleccionar entre un idioma u otro, o incluso utilizar el idioma configurado localmente para el usuario es tan simple como agregar un parámetro extra en la URL de conexión.

Próximos pasos…

En la parte 2 de este artículo te voy a contar cómo traducir atributos de usuario personalizados. ¡¡¡No te lo pierdas!!!

Si necesitas asesoramiento o ayuda, si tenés dudas o no sabes cómo comenzar, o te interesa conocer/aprender sobre otros servicios de Azure, contáctame y vemos juntos como encontrar la solución que necesitas.