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 configuramos y personalizamos los atributos de usuario, te contaré cómo personalizar el estilo del flujo de usuario para aplicarle nuestra marca y lucir nuestros logos y fondos de pantalla.

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

Cuando se trata de una plataforma web, ya sea un e-commerce, un blog o una página de presentación, uno de los aspectos más importantes es la identidad del sitio. Esto se suele ver reflejado a través de la paleta colores, logotipos y fondos de pantalla (backgrounds).

Inicio de sesión estándar
Inicio de sesión estándar

Hasta el momento las páginas de Inicio de Sesión y Registro tienen el estilo estándar que Azure AD B2C provee, el cual no tiene ninguna relación con la identidad de nuestro sitio web.

Es por eso que uno de los primeros requerimientos a satisfacer para una salida a producción aceptable es aplicar nuestros logos y fondos (backgrounds), de forma que los usuarios no perciban diferencia alguna entre Azure AD B2C y el sitio original.

En este post nos vamos a enfocar en los aspectos básicos del diseño, como son los logos y el fondo de pantalla. En futuros posts, veremos cómo podemos crear algo totalmente personalizado, incluyendo HTML y CSS.

Personalización

Ahora sí, hagamos lo que más nos gusta y pongamos las manos a trabajar.

Personalizar marca de empresa
Personalizar marca de empresa

Para comenzar debemos dirigirnos a la sección de Personalización de marca de empresa. Si es la primera vez que accedemos, veremos la opción Configurar. Si ya tenemos configuradas personalizaciones, veremos como opción Nuevo idioma. Esto se debe a que podemos tener tantas personalizaciones como idiomas disponibles, por ejemplo, el fondo de pantalla podría contener texto específico según el idioma del usuario.

Sobre la derecha veremos un panel para configurar cada elemento disponible. Veamos de que se trata cada uno.

Elementos

Configurar personalización de marca
  1. Idioma: Si es la primera personalización que realizamos esta opción estará deshabilitada con el texto Predeterminado, de lo contrario podremos seleccionar de una lista el idioma correspondiente.
  2. Imagen de fondo: Es el fondo de pantalla. Prestar especial atención a las características que debe tener: 1920 x 1080, tamaño máximo de 300 KB y en formato .png, .jpg o .jpeg.
  3. Logotipo/Banner: Imagen para mostrar en la pantalla de inicio de sesión y registro. Características: 280 x 60, tamaño máximo de 10 KB y en formato .png, .jpg o .jpeg.
  4. Sugerencia del nombre de usuario: Este campo lo dejaremos vacío ya que no lo usaremos, es de utilidad cuando utilizamos nombre de usuario en lugar de email para registrar usuario.
  5. Texto de la página de inicio de sesión: Este campo lo dejaremos vacío ya que no lo usaremos, es de utilidad para usuarios de Windows 10 y Azure AD.
  6. Color de fondo de la página de inicio de sesión: Es el color a utilizar en caso de que las imágenes no puedan ser cargadas (por ejemplo, por problemas de conexión).
  7. Imagen de logotipo cuadrado: Este campo lo dejaremos vacío ya que no lo usaremos, es de utilidad para usuarios de Windows 10 y Azure AD.
  8. Imagen de logotipo cuadrado, tema oscuro: Este campo lo dejaremos vacío ya que no lo usaremos, es de utilidad para usuarios de Windows 10 y Azure AD.
  9. Mostrar la opción para mantener la sesión iniciada: Este campo lo dejaremos con su valor por defecto, es de utilidad para usuarios de Windows 10 y Azure AD.

Validación

Flujo de validación de cambios
Flujo de validación de cambios

Ya estamos listos para validar los cambios que realizamos. Para esto tenemos que navegar hasta la sección Flujos de usuario, seleccionar el flujo de usuario que creamos cuando dimos los primeros pasos y finalmente ejecutar la opción Ejecutar flujo de usuario.

Sobre el panel que se despliega a la derecha, presionamos el botón para ejecutar con las opciones por defecto.

Inicio de sesión actualizado

¡¡¡Increíble!!! Nuestra página de inicio de sesión ahora luce con un estilo propio haciendo que la experiencia de usuario sea mucho más natural y fluida.

Estamos muy cerca de tener una versión productiva, con estilo propio y con atributos de usuario a nuestra medida y necesidad. Solo nos queda un sólo tópico para analizar (por ahora) y son las plantillas predeterminadas.

Plantillas predeterminadas

Azure AD B2C ofrece 3 plantillas predeterminadas listas para usar. Estas plantillas mantienen el mismo estilo (fondo de pantalla y logotipo) que vimos en el apartado anterior, pero cambian (sutilmente) cuestiones de diseño como la orientación y el estilo de los controles como cuadros de texto y botones.

Selección de plantilla
Selección de plantilla

Para seleccionar cambiar o configurar el estilo de plantilla predeterminado, debemos navegar hasta la sección Diseños de Página del Flujo de Usuario y luego clicar sobre la acción Plantilla. Sólo basta con seleccionar la plantilla deseada y esperar a que se apliquen los cambios.

Comparemos los 3 estilos disponibles:

Azul Océano
Azul Océano
  • Azul océano: Esta es la plantilla predeterminada y por consiguiente la más utilizada. Es posiblemente la más moderna.
Gris pizarra
  • Gris pizarra: Muy similar a la plantilla anterior, cambia un poco el ordenamiento y el estilo de los campos de entrada de texto.
Clásico
Clásico
  • Clásico: Esta plantilla fue la primera (y en un comienzo la única) disponible. Responde al antiguo estilo de las plataformas de Microsoft/Azure.

Estas tres plantillas son las que están disponibles al momento de escribir el artículo, pero como todos los productos de Azure, se encuentran en continua mejora. Es posible que se agreguen o eliminen plantillas en el futuro.

Conclusiones

  • ¡Diseños simples y aceptables! A pesar de que los cambios que realizamos son muy básicos, con solo unos clics podemos darle identidad a nuestra experiencia de usuarios.
  • ¡Sin necesidad de HTML ni CSS! Si bien en muchos casos vamos a necesitar aplicar un diseño mucho más personalizado utilizando HTML, CSS y hasta quizás JavaScript, solo con un par de imágenes son suficientes para tener un MVP (Mínimo Producto Viable) o incluso una primer versión productiva de nuestra aplicación

Próximos pasos…

En el próximo artículo te voy a contar cómo configurar distintos idiomas, incluyendo las traducciones para los atributos de usuario personalizados adicionales como Nivel de Inglés y Experiencia. ¡¡¡No te lo pierdas!!!

IMPORTANTE: a modo de ejemplo, tomé dos imágenes de la web que en principio son libres y no tienen derecho de autor. Si no es así y crees que el autor podría no autorizar su uso, te invito a que me dejes un mensaje para solicitar la autorización pertinente o indicarme dejar de utilizar las imágenes cuanto antes.