Hablemos sobre .Net y Azure

Mes: enero 2021

Azure AD B2C: Configuración de usuarios

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 lo que vimos en el post anterior, donde establecimos los tres primeros pasos necesarios para comenzar con Azure AD B2C, te contaré cómo configurar y modelar nuestro usuario para poder recolectar toda la información necesaria que nuestra app necesita. Como siempre, vamos a ir al detalle y paso a paso.

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

Antes de comenzar a realizar cualquier tipo de configuración, definamos con claridad cuál es la necesidad que buscamos satisfacer.

Estamos diseñando una aplicación para conectar empresas con personas del mundo IT, para esto, generaremos recomendaciones en base a la información del perfil del usuario, como años de experiencia y nivel de Inglés. Claro que en la vida real esto no es suficiente, pero a fines prácticos y en función del objetivo del artículo, estamos bien.

Necesitamos recolectar la siguiente información:

  • Nombre y apellido: estos campos serán de texto libre. Obligatorios.
  • Nivel de inglés: lista con las opciones No hablo, Escribo pero no hablo, Escribo y hablo un poquito, Me siento cómodo teniendo una conversación, Soy bilingüe. El usuario seleccionará una, y solo una, opción. Obligatorio.
  • Años de experiencia: lista con las opciones No tengo experienciaMenos de 1 añoEntre 1 y 5 añosMás de 5 años. El usuario seleccionará una, y solo una, opción. Obligatorio.
  • Habilidades: lista con las opciones Desarrollo FEDesarrollo BEIngeniero de DatosQAScrumManagement. El usuario podrá seleccionar mas de una opción. Obligatorio.
  • Abierto a relocalización: Si o No.
  • Intereses: Texto libre opcional.

Esta combinación de campos cubre todas las opciones que Azure AD B2C ofrece, de forma que podamos implementar prácticamente cualquier requerimiento que nuestra aplicación describa.

Implementación

Cabe destacar que la implementación puede dividirse en dos aspectos bien definidos:

  • Perfil del usuario: definición del perfil del usuario, que incluye los campos y sus valores. Estos valores pueden ser de tres tipos posibles: cadena de caracteres (string), booleanos (bool) o enteros (int)
  • Presentación del perfil del usuario: presentación de los distintos atributos que tiene un usuario.

Por ejemplo, cuando presentamos el atributo Nivel de Inglés en la pantalla de Registro, utilizaremos el valor No Hablo, sin embargo el valor que será guardado en la base de usuario será “nada”. Azure AD B2C será el encargado de realizar dicha traducción.

Perfil del Usuario

El primer paso es definir los atributos del perfil del usuario. Para esto, debemos navegar hacia la sección Atributos de Usuario de la pantalla de inicio de Azure AD B2C. Aquí veremos la lista completa de atributos del perfil del usuario, incluyendo los atributos base y los personalizados. También tendremos disponible la opción para agregar atributos nuevos.

Lista de atributos de usuario
Lista de atributos de usuario

Vamos a agregar todos los atributos que necesitamos. Nombre y Apellido son parte de los atributos base. No necesitamos volver a agregarlos.

Nuevo atributo de usuario
Nuevo atributo de usuario

Al presionar Agregar, se desplegará un formulario con tres propiedades:

  • Nombre: Es el nombre “interno” del atributo. No puede contener espacios en blanco ni caracteres especiales
  • Tipo de Datos: Cadena (string), Booleano (bool) o Int (integer)
  • Descripción: Una breve descripción, no será visible por los usuarios finales.

Para la implementación de nuestro perfil de usuario, agregaremos los siguientes atributos:

Tabla atributos de usuario
Tabla atributos de usuario

Veamos con un poco más de detalle la tabla anterior tomando como ejemplo los atributos Nivel de Inglés y Años de Experiencia:

Tabla valores atributos de usuario
Tabla valores atributos de usuario

Al finalizar, la lista de atributos debería verse de la siguiente forma:

Lista de atributos de usuario actualizada
Lista de atributos de usuario actualizada

Si ejecutamos el Flujo de Usuario que creamos en el post anterior (Azure AD B2C: Primeros Pasos) e intentamos registrarnos, notaremos que todavía no vemos los nuevos atributos disponibles. Eso se debe a que todavía nos falta configurar la presentación de dichos atributos, y eso es parte del Flujo de Usuario.

Presentación del perfil del usuario

La presentación del perfil del usuario es una responsabilidad del flujo de usuario. Podemos tener más de un flujo de usuario, en función de la necesidad, y cada flujo de usuario puede requerir un grupo diferentes de atributos.

Lista de flujos de usuario
Lista de flujos de usuario

El primer paso que debemos realizar es configurar los atributos de usuario que nuestro flujo debe solicitar. Para esto, debemos navegar hasta el flujo de usuario que creamos (si seguimos los pasos tal cual el post anterior el nombre del flujo de usuario B2C_1_InicioSesionConRegistro).

Luego, en la sección de Atributos de Usuario, solo tenemos que seleccionar los atributos que definimos como requerimiento.

Atributos de usuario por flujo de usuario
Atributos de usuario por flujo de usuario

¡¡¡Si ahora ejecutamos el flujo de usuario e intentamos hacer un registro veremos los nuevos atributos disponibles!!!

¡¡¡Increíble!!! Venimos progresando a pasos agigantados, solo nos falta un pequeño paso más.

Azure AD B2C - Formulario de registro
Diseño preliminar
Formulario de registro

Lo primero que podemos notar es que todos los campos son de texto libre. Además, ninguno de ellos es obligatorio. Enseguida nos vamos a meter de lleno para darle el estilo que estamos buscando, pero antes, veamos que opciones tenemos disponibles para darle estilo y diseño a nuestra página.

Diseño de Páginas (Look & Feel) en Azure AD B2C

En la sección Diseño de Página es donde podremos configurar cuestiones inherentes a como se visualiza el Registro de Usuario, incluyendo orden de los campos, obligatoriedad, etiquetas y tipo de entrada (texto, selección simple, etc.).

Azure AD B2C ofrece 4 tipos de entrada o input:

  • Cuadro de texto libre
  • Selección simple tipo radio-buttons. Permiten seleccionar una sola opción. Muy útiles para grupos de pocas opciones, como por ejemplo Si-No o Verdadero-Falso.
  • Selección múltiple tipo check-box. Permiten seleccionar cero, una o más opciones.
  • Selección simple tipo combo-box. Permiten seleccionar una sola opción de una lista desplegable. Ideales cuando la lista de opciones es extensiva.

A excepción del cuadro de texto, los otros tipos requieren una lista de opciones compuestas de un par texto-valor donde el texto es lo que será visible para el usuario y el valor será lo que finalmente se guarde como atributo del usuario.

Con estos tipos de entrada o inputs más un poco de imaginación vamos a armar nuestro formulario de registro. Veamos qué nos conviene utilizar en base a los requerimientos que tenemos.

  • Nombre, Apellido e Intereses son de texto libre, para lo cual usaremos el Cuadro de Texto.
  • Nivel de inglés y Años de experiencia son listas de selección simple. En este caso usaremos Selección simple tipo combo-box.
  • Habilidades es también una lista pero de selección múltiple. Para este caso usaremos Selección múltiple tipo check-box.
  • Abierto a relocalización es una lista con solo dos opciones, en este caso la opción más conveniente es Selección simple tipo radio-buttons.

¿Radio-buttons o Combo-box? Cuando la cantidad de opciones es mayor a 3 es recomendable utilizar el estilo Combo-box, de esa forma el diseño presenta una experiencia de usuario un poco más amigable.

Azure AD B2C - Diseño de pagina del flujo de usuario
Diseño de pagina del flujo de usuario

Configuración de página de registro

Para poder comenzar a configurar el diseño de página de nuestro flujo de usuario navegamos a la sección de Diseño de Página y luego seleccionaremos el diseño Página de registro con cuenta local. Podremos ver en el panel inferior la lista de los atributos de los atributos que configuramos para el flujo con sus valores por defecto. Para poder editarlos, solo tenemos que clicar en el valor que queremos modificar.

Atributos de usuario por flujo de usuario, Opcional
Atributos de usuario por flujo de usuario, Opcional

El primer cambio que realizaremos es hacer los atributos obligatorios, solo debemos hacer clic en la columna Opcional de cada atributo y cambiarlo por la opción Sí (Excepto Intereses).

Atributos de usuario por flujo de usuario, Etiqueta
Atributos de usuario por flujo de usuario, Etiqueta

El segundo cambio es editar las etiquetas con los valores que queremos que sean presentados al usuario. Nos enfocaremos solo en las etiquetas de los nuevos atributos y dejaremos con sus valores por defecto a Nombre, Apellido e Email. Todo esto lo veremos más en detalle y en forma uniforme cuando veamos cómo configurar múltiples idiomas.

Español vs Inglés: por cuestiones prácticas en este tutorial intenté usar 100% español. Pero debemos tener en cuenta que hay propiedades predefinidas que están en inglés, como el caso de Apellido, que internamente se guarda como Surname. Es recomendable mantener el inglés para los valores internos, y configurar mediante idiomas como mostramos la información al usuario

El último cambio (¡y el más divertido!) es configurar el tipo de entrada para cada atributo con sus respectivos valores. Los atributos que debemos modificar son Abierto a Relocalización, Nivel de Inglés, Años de Experiencia y Habilidades. A diferencia de los cambios anteriores, al hacer clic sobre la columna Tipo de entrada de usuario se desplegará una ventana sobre la derecha para editar el campo. A continuación tenemos una tabla ilustrativa que podemos usar como guía.

Atributos de usuario - Tabla de valores
Atributos de usuario – Tabla de valores

Ejecución y validación

¡¡¡Felicitaciones!!! Hemos terminado exitosamente de personalizar el diseño de la página de Registro de Usuario y estamos listos para ver cómo luce. En primer lugar, corroboramos que cada atributo tenga el tipo de entrada correcta, luego guardamos los cambios y finalmente ejecutamos el flujo de usuario.

Atributos de usuario por flujo de usuario, Tipo de Entrada
Atributos de usuario por flujo de usuario, Tipo de Entrada
Azure AD B2C - Formulario de registro
Diseño final
Formulario de registro – Diseño final

Si seguimos todos los pasos meticulosamente, así se verá el Registro de Usuario. ¿Increíble verdad?

Tenemos nuestros atributos personalizados obligatorios, con sus correspondientes descripciones y sus tipos de entradas acorde a los requerimientos definidos.

Un concepto que quiero reforzar es que no hemos necesitado escribir ni una sola línea de código para crear esta hermosa experiencia de usuario.

Y por supuesto, tampoco necesitamos ningún tipo de herramienta especial o ambiente de desarrollo. Solo desde el navegador. Este es uno de los puntos más destacables de Azure AD B2C, y es que podemos tener una experiencia de registro e inicio de sesión de usuarios totalmente personalizable sin necesidad de contar con grandes conocimientos en programación y utilizando sólo nuestro navegador, lo que hace una verdadera experiencia Business To Clients.

Conclusiones

  • ¡Listo para usar! Azure AD B2C nos ofrece un abanico muy amplio de opciones listas para usar, de forma que con solo unos clics tenemos lo que necesitamos
  • ¡Muy intuitivo! El portal ofrece descripciones y formularios muy simples y fáciles de entender.

Próximos pasos…

En el próximo artículo te voy a contar cómo darle el estilo y personalización de nuestra marca, incluyendo logos y fondos. ¡¡¡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.

Azure AD B2C: Primeros pasos y configuración inicial

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”.

Azure AD B2C – Creación de Recurso
  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.

Azure AD B2C – Creación y configuración de Instancia

Revisión y creación

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.

Azure AD B2C – Acceso a Instancia

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

Azure AD B2C – Dashboard

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?

Azure AD B2C – Diagrama de Secuencia

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.

Nuevo registro de aplicación

Registros de Aplicaciones – Nuevo registro

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.

Registros de Aplicaciones – Registrar aplicación

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.

Registros de Aplicaciones – Lista de aplicaciones

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.

Registros de Aplicaciones – Authenticació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
Flujo de Usuario – Nuevo flujo de usuario

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.

Flujo de Usuario – Crear 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.

Flujo de Usuario – Crear nuevo flujo de usuario

Revisión del flujo de usuario

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.
Flujo de Usuario – Lista de flujos de usuario

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?

Flujo de Usuario – Dashboard

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.

Flujo de Usuario – 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.

Flujo de Usuario – Inicio de sesión

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.

Flujo de Usuario – 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! Si, 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.

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 ↑