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.
En el post anterior (parte 1) vimos los conceptos principales relacionados a la configuración de idiomas, pero nos quedó pendiente la configuración de aquellos atributos de usuarios personalizados.
En esta segunda parte, veremos cómo configurar las traducciones para todos los atributos de usuario personalizados simples.
IMPORTANTE: vamos a construir sobre la base del post anterior, con lo cual es recomendable tener claros los conceptos y pasos allí detallados.
Contexto
Como vimos en la parte 1, todas las configuraciones inherentes a idiomas corresponden al flujo de usuario. Cada flujo de usuario esta compuesto por una o más pantallas, por ejemplo:
- Inicio de sesión + recupero de contraseña.
- Inicio de sesión + registro de usuario + recupero de contraseña
Todas las palabras y atributos de usuario estándares tienen su correspondiente traducción en forma predeterminada, sin embargo los atributos de usuario personalizados deben ser traducidos manualmente. Lo mismo sucede en aquellos casos donde queremos utilizar una traducción diferente a la estándar por cuestiones culturales idiomáticas.
Archivo de recursos de Azure AD B2C
Dentro de Azure AD B2C los archivos de recursos son archivos de texto en formato JSON donde se disponen todas las traducciones correspondientes a una pantalla para un idioma específico, es decir, cada idioma tiene un archivo de recursos por pantalla. Contiene generalmente dos secciones, LocalizedStrings y LocalizedCollections
- LocalizedStrings: lista de elementos individuales.
- LocalizedCollections: lista de elementos que forman grupos, como por ejemplo, ComboBox o MultiSelect.
Veamos un ejemplo utilizando la pantalla de inicio de sesión para el idioma Inglés y para el idioma Español:
Como podemos apreciar, los atributos de cada elemento dentro del JSON son exactamente iguales para ambos idiomas, excepto el atributo Value, el cual contiene la traducción correspondiente al idioma seleccionado.
Funcionamiento del archivo de recursos
Cada archivo de recursos contiene la lista de elementos completa necesaria para la traducción de toda la página. Para poder cambiar las traducciones debemos proceder de la siguiente forma:
- Descargar el archivos de recursos
- Editar los valores deseados
- Subir el archivo con las modificaciones
Cada elemento contiene, además del atributo Value (junto con otros más que no veremos en este artículo), un atributo Override, el cual indica que este elemento tiene un valor que debe ser actualizado al subirlo.
Si queremos cambiar el texto ¿No tiene una cuenta? por algo como ¿Quieres abrir una cuenta?, el elemento debería ser modificado de la siguiente forma:
Es muy importante no olvidar marcar las entradas modificadas como Override, caso contrario recibiremos un error.
Aplicando las traducciones para elementos simples
Siguiendo el procedimiento descrito anteriormente, el primer paso es descargar el archivo de recursos correspondiente a la pantalla e idioma que necesitamos modificar.
1- Descargar el archivo de recursos
Para descargar el archivo de recursos nos dirigimos al flujo de usuario y en la sección Idiomas seleccionamos el idioma deseado.
Debido a que los atributos de usuarios personalizados que agregamos cuando realizamos los primeros pasos estaban en castellano, como por ejemplo Intereses y Años de experiencia, necesitamos la correspondiente traducción al idioma Inglés. Es por eso que en este ejemplo seleccionamos el idioma Inglés.
Se desplegará sobre el sector derecho una ventana con la lista de pantallas disponibles para el flujo de usuario. Buscamos y desplegamos la sección Página de registro con cuenta local.
Aquí podemos descargar el archivo de recursos completo haciendo clic en la opción Descargar valores predeterminados (en). El archivo descargado tendrá un nombre muy largo, que incluye el nombre del tenant, el nombre del flujo de usuario, el nombre de la pantalla y el idioma.
Si ya hemos subido algún archivo de recursos previamente, veremos también la opción Descargar invalidaciones, la cual nos permite obtener un archivo de recursos solo con los elementos que fueron modificados (con la propiedad Override: true), en lugar del archivos de recursos completo.
2- Editar el archivo de recursos
Como mencionamos en párrafos anteriores, generalmente sólo necesitamos concentrarnos en los atributos de usuarios personalizados, ya que los atributos de usuario estándares cuenta con traducción predeterminada. Para este ejemplo, vamos a trabajar con el atributo Intereses.
Abrimos el archivo de recursos que descargamos en el paso anterior y buscamos la palabra intereses. Encontraremos dos entradas como las siguientes:
El primer elemento es el texto visible sobre el campo cuando está vacío, el segundo es un texto de ayuda que se muestra cuando paramos el cursor por arriba, generalmente conocido como hint. Editamos los valores de la siguiente forma:
3- Subir el archivo con las modificaciones
Ya con el archivo de recursos editado, volvemos a la lista de pantallas disponibles del flujo de usuario para el idioma Inglés, buscamos y desplegamos la sección Página de registro con cuenta local.
Finalmente clicamos en el botón para subir el archivo y seleccionamos el archivo que editamos.
Azure AD B2C validará y aplicará los cambios automáticamente si y solo si no detecta ningún error, caso contrario nos mostrará un error sin aplicar ningún cambio.
Prueba de los cambios
Para poder probar los cambios recién aplicados, solo debemos ejecutar el flujo de usuario, activar los ui_locales y seleccionar el idioma Inglés.
Si todo salió veremos el campo intereses, pero esta vez con la descripción Interests. Si paramos el mouse por sobre el campo durante unos segundos, veremos además el hint con el texto Something you are interested in.
Conclusiones
- A pesar de ser un artículo un poco extenso, es realmente muy simple generar traducciones.
- No requerimos habilidades ni conocimientos de programación, incluso si nunca antes hemos trabajado con JSON, solo necesitamos editar texto.
Próximos pasos…
En la parte 3 de este artículo te voy a contar cómo traducir atributos de usuario personalizados complejos (colecciones) como Listas de selección múltiple o ComboBox.
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.
