Hablemos sobre .Net y Azure

Mes: marzo 2021

Azure AD B2C: Configuración de JWT tokens

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 artículo anterior terminamos de configurar los idiomas Inglés y Español de nuestro flujo de usuario y finalmente tenemos una versión productiva inicial.

En este post compartiré los detalles para configurar los JWT tokens e incluir los atributos de usuario, de forma que nuestros sitios web puedan obtener la información que necesitan y así tener una experiencia de usuario completa.

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

¿Qué es un JWT token?

Cuando desarrollamos aplicaciones (ya sea web, móviles o de escritorio) habrá ciertas funcionalidades que sólo usuarios autorizados pueden acceder, por ejemplo, el estado del carrito de compras en un e-Commerce.

También es habitual mostrar algunos datos del usuario autenticado, como puede ser el nombre y el apellido o la imagen de perfil en la barra de estado, o todos los atributos del usuario como por ejemplo en la pantalla de perfil de usuario.

Un JWT token es un mecanismo que permite resolver los dos puntos anteriores a la vez. Es una cadena de caracteres codificada en un sistema conocido como Base64 que está firmado digitalmente (lo cual garantiza que es auténtico y no ha sido adulterado) y además contiene información del usuario.

¿Cómo obtenemos un JWT token con Azure AD B2C?

Azure AD B2C - Diagrama de secuencia
Azure AD B2C – Diagrama de secuencia

Una vez el usuario completa el flujo de inicio de sesión o de registro en forma satisfactoria, Azure AD B2C recopila los atributos de usuario configurados para ser incluidos en el JWT token (Nombre, apellido, etc.) y genera un JSON (además contiene información adicional como expiración, fecha y hora de emisión del token, etc.).

Ese JSON se codifica en Base64 y se firma digitalmente. El resultado final es un JWT token que luego se retorna a la URI de redirección que configuramos cuando dimos los primeros pasos. En ese momento elegimos como URI de redirección https://jwt.ms.

No hay texto alternativo para esta imagen
Token – Atributos de usuario

Parte superior, el JWT token con su cabecera(información sobre el tipo de token y como fue firmado), cuerpo (información relacionada a la sesión y al usuario) y la firma digital.

Parte inferior, el JWT token decodificado en forma de JSON

En ambientes productivos o incluso en ambientes de pruebas, la URI de redirección debe ser una ruta válida dentro de nuestra aplicación web. Por el momento estamos utilizando https://jwt.ms solo con fines de demostración.

Configuración del JWT token

Cuándo realizamos las primeras configuraciones sobre nuestro flujo de usuario (Azure AD B2C: Primeros pasos y Azure AD B2C: Configuración de usuarios) seleccionamos qué atributos de usuario recolectar y cuáles incluir en el JWT token que se retorna a nuestra aplicación cliente.

No hay texto alternativo para esta imagen
Flujo de usuario – Configuración

Azure AD B2C nos permite tener un control muy granular sobre qué atributos de usuario exponer en los JWT tokens. Puede haber determinado tipo de información que si bien queremos recolectar, no queremos exponer en el token.

En aquel momento, bajo la columna Notificación de Devolución, sólo seleccionamos los atributos Nombre y Apellido.

Luego agregamos como nuevos atributos de usuario experienciahabilidadesinglésintereses relocalización, sin embargo no los hemos incluido en los tokens.

Incluir atributos de usuario en los JWT tokens

En el panel de configuración del flujo de usuario encontraremos dos secciones:

  • Atributos de Usuario: aquí podremos elegir qué atributos deben ser recolectados. Solo debemos seleccionar (o deseleccionar) los atributos deseados.
  • Notificación de la aplicación: en esta sección es donde vamos a elegir qué atributos de usuario deben ser incluidos en los JWT tokens.

Navegamos hasta la sección Notificaciones de la Aplicación y seleccionaremos los 5 atributos de usuario personalizados que creamos. Al finalizar guardamos los cambios.

No hay texto alternativo para esta imagen
Flujo de usuario – Configuración de atributos para incluir en los JWT token

Validación del JWT token

Como paso final sólo nos queda ejecutar el flujo de usuario e iniciar sesión o registrar un nuevo usuario. Una vez que Azure AD B2C valide el usuario, seremos redireccionados a la URI de Redirección https://jws.ms.

No hay texto alternativo para esta imagen
Token – Url

Azure AD B2C incluirá el token como parte de la URL en un parámetro llamado id_token.

En la sección Decoded Token vamos a ver los 5 nuevos atributos con los valores que haya ingresado el usuario al momento de registrarse.

No hay texto alternativo para esta imagen
Token – Validación de nuevos atributos

Si notamos que algunos atributos no son informados, debemos verificar que el usuario haya informado un valor. Azure AD B2C no incluye los atributos de usuario si estos no tienen valor o están vacíos.

Conclusiones

  • Además de una breve introducción a los JWT tokens, vimos con qué simplicidad podemos controlar qué información del usuario compartimos con nuestras aplicaciones.
  • Ya estamos listos para integrar nuestro Azure AD B2C en nuestra aplicación web.

Próximos pasos…

En el próximo post veremos cómo integrar nuestro flujo de usuario de Azure AD B2C con nuestra Web App. Veremos como capturaremos el token y extraer la información necesaria para poder visualizarla, generando entonces un circuito completo, desde el inicio de sesión hasta la pantalla de bienvenida.

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.

Personalización de idiomas en Azure AD B2C (Parte 3)

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 2) vimos cómo configurar las traducciones de los atributos de usuario simples con el atributo Intereses, incluyendo el texto que se muestra al usuario y el hint.

En esta tercera y última parte, veremos cómo configurar las traducciones para los atributos de usuario personalizados complejos o colecciones como es el caso de Nivel de Inglés.

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

Contexto

Algunos de los atributos de usuario que Azure AD B2C ofrece son sólo un texto libre, como en el caso de Intereses, en el cual el usuario simplemente ingresa una o varias palabras.

Sin embargo, algunos atributos de usuario, como es el caso de Nivel de Inglés, requieren que el usuario seleccione uno o varios valores de una lista finita de opciones, donde cada opción tiene su propia traducción.

Para estos casos, no sólo debemos proveer de la traducción para el texto de referencia y el hint, si no que también debemos proveer la traducción correspondiente a cada una de las opciones asociadas.

Cuando configuramos los atributos de usuario incluimos el atributo inglés con una lista de opciones disponibles con su respectiva descripción que luego se ve reflejada en la pantalla de registro de usuario. En la siguiente imagen vemos a la izquierda la lista de valores con sus descripciones y a la derecha como lo ve el usuario.

Atributo Inglés – Valores y ComboBox

NOTA: Usaremos el atributo ingles como ejemplo para el resto del artículo, pero el procedimiento aplica de igual manera para el resto de los atributos de usuario que implican una lista o colección de valores.

Requerimientos

Todas las descripciones y opciones que son visibles al usuario deben ser traducidas en función del idioma seleccionado. Así por ejemplo la descripción del atributo ingles para el idioma Español debería ser Nivel de Inglés, mientras que para el idioma Inglés debería ser English Level.

En la siguiente tabla vemos cómo queda cada valor con su correspondiente traducción:

Nivel de Inglés – Tabla de valores por idioma

Con los requerimientos claros y bien definidos estamos listos para la implementación.

Implementación

Comenzaremos con la descripción y el hint del atributo en primer lugar. En este caso es igual al procedimiento que implementamos con el atributo intereses en el post anterior

Descripción y hint

  1. En la sección de idiomas del flujo de usuario seleccionamos el idioma Inglés y descargamos el archivo de recursos Página de registro con cuenta local.
Flujo de Usuario – Pagina de registro con cuenta local
  1. Abrimos el archivo de recursos y buscamos “ingles”. Modificamos los valores acorde a la tabla anterior, asegurándonos de modificar solo la sección que se encuentra dentro de LocalizedStrings.
Archivo de Recursos - Modificación
Archivo de Recursos – Modificación
  1. Este paso es opcional, pero para validar que los cambios fueron correctos, podemos subir el archivo y ejecutar el flujo de usuario para verificar que el atributo ingles refleje los cambios esperados para el idioma Inglés. La descripción del atributo debe decir English Level, no así la lista de opciones.
Nivel de Inglés – Descripción

Lista de opciones

Ahora procedemos con la implementación de la lista de opciones disponibles, vamos a editar el mismo archivo de recursos y repetiremos el paso 2, solo que esta vez modificaremos los valores dentro de la sección LocalizedCollections.

Solo es necesario modificar la propiedad name de cada opción, la propiedad value se mantendrá sin modificaciones:

Archivo de Recursos - Modificación Colección
Archivo de Recursos – Modificación Colección

Subimos el archivo y ejecutamos el flujo de usuario para validar los cambios. Esta vez el combo de Nivel del Inglés debería verse de la siguiente forma:

Nivel de Inglés – Descripción de valores

Al editar las colecciones como lo hicimos en el paso anterior, también podemos agregar o eliminar ítems de la lista. Esto nos da la libertad de poder decidir qué opciones utilizar para cada idioma.

Este mismo procedimiento lo repetiremos también para el idioma Español, editando el archivo de recursos correspondiente. De esta forma el flujo de usuario quedará completo para ambos idiomas.

Azure AD B2C Localized Collections

La sección Localized Collections es un arreglo (array) JSON que contiene lista de elementos utilizados para crear los atributos de usuario del tipo colección. Tiene su contraparte en la sección Localized Strings identificado por la propiedad ElementId.

En esta sección encontraremos todas las listas correspondientes a los atributos usuarios del tipo colección.

¿Atributos del tipo booleanos con Azure AD B2C?

En algunos casos vamos a necesitar opciones del tipo Si o No o Verdadero o Falso cuyo valor debe ser tratado como booleano, es decir, independientemente de la descripción el valor debe ser “true” o “false”.

Esto es fácilmente realizable utilizando el siguiente procedimiento:

  1. Crear el atributo de usuario indicando como tipo de dato booleano (ver articulo Configuración de Usuarios).
  2. Configurar el flujo de usuario para mostrar el nuevo atributo como RadioSingleSelect.
  3. Modificar la sección LocalizedColleccions del atributo en cuestión de la siguiente forma:

Conclusiones

  • Si bien la configuración de idioma para atributos personalizados requiere un poco más de trabajo, no deja de ser simple.
  • No hay necesidad de utilizar herramientas adicionales, solo con un editor de texto es suficiente. Azure AD B2C ofrece un portal muy intuitivo que hace muy simple su configuración.

Próximos pasos…

En el próximo post veremos cómo configurar JWT tokens para incluir la información del usuario en forma de claims.

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.

Personalización de idiomas en Azure AD B2C (Parte 2)

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 LocalizedCollections

Archivo de recursos – Descripción
  • LocalizedStringslista de elementos individuales.
  • LocalizedCollectionslista de elementos que forman grupos, como por ejemplo,  ComboBox MultiSelect.

Veamos un ejemplo utilizando la pantalla de inicio de sesión para el idioma Inglés y para el idioma Español:

Personalización de Idiomas – Comparación Inglés
Personalización de Idiomas – Comparación 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:

  1. Descargar el archivos de recursos
  2. Editar los valores deseados
  3. 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:

Archivo de Recursos – Edición
Validaciones
Validaciones

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

Flujo de Usuario – Idiomas

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.

Flujo de Usuario – Descarga de Archivo de Recursos

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:

Archivo de recursos - Original
Archivo de recursos – Original

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:

Archivo de recursos – Editado

3- Subir el archivo con las modificaciones

Subir archivo de recursos
Subir archivo de recursos

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.

Personalización de Idiomas – Antes y Después

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.

© 2021 Facu The Rock

Tema por Anders NorenArriba ↑