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.