Azure AD B2C: Primeros pasos

Hace unas pocas semanas escribí este artículo contando como Azure AD B2C fue una pieza fundamental para lograr que vOpen Tech 2020 se transforme de ser una conferencia presencial a una conferencia totalmente virtual. El gran desafío era hacerlo en poco tiempo y a un bajo costo.

En este artículo te contaré, paso a paso (incluyendo capturas de pantalla), en forma simple y ágil, como comenzar a utilizar y configurar Azure AD B2C. Luego veremos en sucesivos artículos como ir personalizando nuestro Azure AD B2C para adaptarlo a nuestra marca y necesidad.

IMPORTANTE: para poder comenzar a utilizar cualquier recurso de Azure es necesario contar con una cuenta, incluso para utilizar servicios gratuitos. Si todavía no tienes una cuenta, puedes comenzar creando una cuenta gratis aquí.

Los pasos a seguir

Para poder comenzar a utilizar Azure AD B2C necesitamos realizar los siguientes 3 pasos:

1. Crear una instancia
2. Registrar una aplicación
3. Crear un flujo de usuarios

 

Sin más preámbulos, comencemos a trabajar.

 

1. Crear la instancia

Lo primero que debemos hacer es crear una nueva instancia o tenant de Azure AD B2C, la cual albergará la base de datos de usuarios, configuraciones, aplicaciones, etc. Para esto hacemos clic en la opción Crear un recurso, el portal nos ofrecerá la opción de recorrer las diferentes categorías o podemos utilizar el buscador tipeando "b2c".

 

 

1. Azure Active Directory B2C será una de las primeras opciones, haremos clic en esta opción.
2. Luego, en la página de bienvenida clicaremos en el botón crear.
3. Antes de ir a pantalla de creación, el portal nos ofrecerá la opción de Crear un nuevo tenant o vincular uno existente a una suscripción. Tomamos la primer opción.

 

Dentro del ecosistema de Azure AD, una instancia se denomina tenant. Puede que se encuentre también como inquilino si el idioma es español.

 

 

Finalmente, en la pantalla de creación, completamos los datos requeridos y presionamos el botón para revisar y crear:

• Nombre de la organización: es el nombre para mostrar e identificar el tenant fácilmente en caso de poseer más de uno.

• Nombre de dominio inicial: es el nombre del subdominio dentro de Microsoft que formará parte de la ruta o DNS. En este caso, como se aprecia en la imagen, el dominio final será linkedinazureadb2c.onmicrosoft.com. Una vez creado el tenant, se puede configurar un dominio propio, como por ejemplo contoso.com.

• País o región: centro de datos (data center) donde se desplegaran todos los recursos necesarios. Idealmente, se debe buscar la región mas cercana a los usuarios. Por ejemplo, si nuestra aplicación esta orientada a usuarios en Argentina, la recomendación es la región de Brasil.

• Suscripción: nuestro tenant necesita estar asociado a una subscripción por temas de facturación, en caso de contar con mas de una, aquí es donde podemos elegir.

• Grupo de recursos: el grupo de recursos para nuestro tenant. Los grupos de recursos son organizadores lógicos, no representan servicios ni recursos en si mismos, solo nos sirven para agrupar y organizar. Para crear un nuevo grupo de recursos podemos seguir este breve instructivo.

 

El proceso de creación puede demorar unos minutos, una vez finalizado, lo único que nos resta por hacer es navegar a nuestro nuevo tenant para comenzar a configurarlo. Para esto podemos navegar a la lista de recursos y hacer clic en nuestro tenant.

 

 

La pantalla de inicio de Azure AD B2C se ve así:
 

 

2. Registrar una Aplicación

Para poder utilizar el tenant que acabamos de crear necesitamos registrar una aplicación. Pero, ¿Qué es una aplicación?

Azure AD B2C contiene información confidencial de nuestros usuarios que es utilizada por uno o más sistemas autorizados. Un requisito fundamental es que podamos compartir esta información entre el tenant y estos sistemas de forma segura, y para esto necesitamos asegurarnos que quién solicita dicha información es realmente un sistema autorizado y configurado por nosotros.

Una aplicación es la forma en la que configuraremos e identificaremos estos sistemas para garantizar un acceso seguro.

¿Cómo funciona?

 

 

Cuando un usuario quiera registrarse o iniciar sesión en nuestro sitio web, será redireccionado a nuestro tenant. Azure AD B2C validará las credenciales del usuario (o lo registrará si fuese necesario) y luego devolverá un token JWT a nuestro sitio web para que luego sea usado para identificar al usuario. El token contiene la información del usuario que la aplicación esta autorizada a utilizar.

Para poder registrar una nueva aplicación, debemos navegar a la sección de Registros de aplicaciones situada sobre el panel de la izquierda y luego ir a Nuevo Registro.

 

 

Solo necesitamos completar el Nombre y vamos a agregar una URI de redirección, dejaremos los demás campos con sus valores por defecto.

En este caso elegí como nombre Sitio Web Increíble y como URI de redirección https://jwt.ms/.

 

 

La URI de redirección debe ser una dirección valida de nuestra aplicación. Estamos usando https://jwt.ms/ solo a fines prácticos hasta tanto integremos nuestras APIs y Apps.

 

Por último, solo nos falta configurar nuestra aplicación para que retorne los tokens JWT que necesitamos, con la información del usuario o claims incluida. De lo contrario, el token estará vacío.

Para esto, tenemos que acceder a la opción de Registros de Aplicaciones y luego navegar a nuestra aplicación.

 

 

Una vez ahí, en la sección Autenticación, habilitamos las opciones de Access Tokens y ID Tokens que se encuentran casi al final.

Por último, guardamos los cambios.

 

 

Cuando se trata de tokens JWT, los atributos de un usuario, como nombre y apellido, se denominan Claims.

 

Ya tenemos nuestra aplicación con una configuración base. Más adelante volveremos para realizar configuraciones mucho mas específicas, pero para comenzar, la configuración que acabamos de realizar es suficiente.
 

3. Crear un flujo de usuario

Los flujos de usuario tienen un papel central dentro de Azure AD B2C ya que definen como validar la identidad de un usuario y/o registrar uno nuevo, es decir, que información se le solicita al usuario, que datos son obligatorios y cuales no, si debe ser un tipo de campo de selección múltiple, texto simple o selección simple, y todo lo relacionado a la experiencia de usuario en cuanto al proceso de autenticación. Azure AD B2C ofrece cinco flujos de usuario:

• Registro
• Inicio de Sesión
• Registro e Inicio de sesión (es la combinación de los dos primeros)
• Edición de perfil de usuario
• Restablecimiento de contraseña

 
Vamos a comenzar creando un nuevo flujo de usuario de Registro e Inicio de sesión.

Para esto, tenemos que ir a la sección de Flujos de Usuario sobre el panel de la izquierda y clicar sobre la opción Nuevo flujo de usuario.

 

 

Para nuestro ejemplo usaremos el flujo Registrarse o iniciar sesión, el cual le dará al usuario la opción de registrarse en caso todavía no exista.

 

 

Muchas veces, Iniciar sesión y Registrarse se inician desde acciones separadas desde el Front End, es por eso que tenemos cada flujo en forma independiente

 

Finalmente, llegamos a la pantalla de creación. Veamos que necesitamos en cada sección.

• 1. Nombre - Además de ser único, debemos tener en cuenta que podemos tener mas de un flujo del mismo tipo. Por ejemplo, podemos tener dos flujos de registro.

• 2. Proveedores de Identidad - Por el momento la única opción disponible será Email Sigup, pero aquí se listarán proveedores externos también (como LinkedIn, Google, etc.).

• 5. Atributos de usuario - Aquí es donde incluiremos qué información del usuario recopilar y qué información incluir en los tokens. Por el momento incluiremos información básica como nombre y apellido

• El resto de las opciones, los valores recomendados son suficiente.

 

 

Ya lo tenemos listo! Ya estamos en condiciones de comenzar a utilizar nuestro flujo y registrar un nuevo usuario. Navegando nuevamente a la sesión de Flujos de usuario, veremos nuestro nuevo flujo de usuario recientemente creado donde podremos hacer clic para ver el detalle y las opciones disponibles.

 

 

¿Cómo lo probamos?

Ahora nos toca la parte divertida y fascinante. Ya tenemos todo lo necesario configurado, vamos a ver cómo probarlo. Para esto debemos navegar hasta el flujo de usuario y veremos una acción Ejecutar flujo de usuario.

 

 

Al hacer clic se desplegará una nueva ventana sobre la derecha, por el momento utilizaremos todas las opciones recomendadas y presionaremos Ejecutar flujo de usuario.

 

 

Al hacerlo, se abrirá en otra ventana nuestro nuevo y flamante inicio de sesión solicitando email y contraseña. Además tenemos disponible la opción para recupero de contraseña (Forgot your password?)

Si prestamos atención, debajo del botón Sign in veremos la opción para registrarse (Sign up now) que nos llevará al flujo de registro de usuario.

 

 

El flujo de registro de usuario, incluye validación de email con código de verificación. Azure AD B2C enviara un código al mail ingresado que luego será requerido antes de continuar con el registro, garantizando por un lado que no se trata de un bot, y por el otro que es un mail válido.

También requiere como información adicional al mail y la contraseña los dos atributos adicionales que seleccionamos cuando configuramos el flujo: Nombre y Apellido.

 

 

Felicitaciones!!! Acabamos de crear nuestra primer experiencia de usuario utilizando Azure AD B2C. Claro que todavía falta bastante. Seguramente queremos que el flujo funcione con el idioma que nuestros usuario hablan, incluso múltiples idiomas, y no solo en inglés (idioma por defecto), o queremos recolectar información personalizada como "Años de experiencia" y que la cantidad de opciones sea finita. Y por supuesto, queremos nuestra marca y estilo por sobre todas las cosas.

Todo eso es posible y lo iremos descubriendo en sucesivos artículos!

 

Conclusiones

• El artículo es un poco extenso! Sí, sé que se hizo largo, pero me pareció interesante que como primer paso tengamos algo limitado, pero funcional. Y para eso era necesario cubrir estos tres pasos básicos.

• Cero código! Esto es importantísimo, no tuvimos la necesidad de escribir código e hicimos todo desde el mismo portal, sin requerir equipamiento especial. Solo con un navegador y conexión a internet.

• Fácil y rápido! A pesar de lo extenso del articulo, no lleva más de 15 minutos seguir todos estos pasos para configurar todo. ¿Cuánto tiempo nos hubiera tomado hacer esto por nuestros propios medios?

• Cero costo! No necesitamos hacer ninguna erogación de dinero. Con lo cual, tenemos un ambiente de desarrollo (y por qué no de pruebas también) virtualmente gratis.

 

Próximos pasos...

En el próximo articulo te voy a contar cómo configurar los atributos de usuario y cómo personalizarlos, veremos cómo crear atributos de selección múltiple (listas de check box), listas desplegables (combo box), selección simple (radio buttons), etc.

Como siempre, quiero recordarte que 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, en Distillery tenemos profesionales certificados que te van a poder ayudar y asesorar para encontrar la solución que tu negocio necesita.