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.