CÓMO: Asegure su interfaz de ReactJS con Azure AD B2C

Hace un par de meses me introdujeron en el mundo de ReactJS. Un requisito del cliente para construir una interfaz web. Todos mis días de desarrollador los pasé desarrollando sistemas de back-end con la API web de Microsoft ASP.NET y C #. Y no puedes decir que no a tus clientes, ¿verdad? Si tienes que hacerlo, tienes que hacerlo. Así que entre en un nuevo ámbito de construcción de aplicaciones frontend.

Mi cliente ya tenía una API WEB y una interfaz web. Este requisito era crear otro submódulo separado usando ReactJS para interactuar con esa API web. Como de costumbre, las preocupaciones de seguridad se ponen en la tabla y sí, ya tienen la configuración de Azure AD B2C para la administración de usuarios. El desafío era usar ReactJS para interactuar con Azure AD B2C para la autenticación y autorización.

Confía en mí, hubo pocos tutoriales sobre cómo conectar Azure AD y Azure AD B2C con tecnologías frontend. Pero todos eran pedazos aquí y allá. No pude encontrar un tutorial completo paso a paso que lo guíe. Entonces pensé por qué no escribir uno.

He hecho algunas suposiciones aquí, que ya:

  1. Tenga experiencia en ReactJS y no sabe cómo conectar Azure AD B2C.
  2. Tener una cuenta de Azure. ¿No tienes uno? Haga clic en este enlace: https://azure.microsoft.com/en-us/ y haga clic en el botón verde grande y gordo que dice "Iniciar gratis>"
  3. Tenga un directorio Azure AD B2C completamente funcional con los usuarios. Si tiene una cuenta de Azure y necesita crear una cuenta de Azure AD B2C, eche un vistazo a este enlace: https://bit.ly/2U8X9Ft

Comencemos creando un nuevo proyecto ReactJS

  • Si está en Windows, inicie su símbolo del sistema o el terminal para otras plataformas como Mac o Linux.
  • Entra a tu directorio de trabajo.
  • Escriba el siguiente comando y presione ENTRAR para crear un proyecto ReactJS.
$ create-react-app rjaadb2c
  • Ahora navegue al directorio del proyecto recién creado escribiendo,
$ cd rjaadb2c
  • Abra su editor de código favorito (usaré VS Code) y abra el directorio que ha creado en el paso anterior.
  • Tu editor debería verse así
Proyecto ReactJS recién creado en VS Code

VS Code tiene esta pequeña y agradable característica llamada ventana de terminal. Esto abrirá una terminal dentro del editor de código. Es una característica muy útil. Haga clic en Terminal> Nueva Terminal en la barra de menú.

  • Ahora en la ventana de terminal escriba
$ npm start

Esto ejecutará el proyecto ReactJS. Y debería verse así.

Su aplicación ReactJS está funcionando en http: // localhost: 3000

Todo listo, vamos a preparar nuestro entorno Azure AD B2C ahora.

Preparación del entorno Azure AD B2C

En esta sección, prepararemos nuestro entorno Azure AD B2C para autenticación y autorización.

  • Ahora inicie sesión en Azure Portal haciendo clic en este enlace: https://portal.azure.com
  • Haga clic en el botón Filtro en la barra de menú y cambie a su Directorio B2C
Botón de filtro para cambiar al directorio B2C
  • Ahora haga clic en la etiqueta Todos los servicios en el menú de la barra lateral.
  • Escriba "Ad b2c" en el cuadro de búsqueda Todos los servicios.
  • Haga clic en la etiqueta Azure AD B2C
Azure AD B2C
  • En Azure AD B2C blade, haga clic en la etiqueta Aplicaciones.
  • En la hoja Aplicaciones, haga clic en Agregar + botón.
  • Ahora complete la información requerida para crear una nueva aplicación Azure AD B2C, como se muestra a continuación
Crear una nueva aplicación
  1. Como veis está claro. Dé un "Nombre" único a su aplicación.
  2. Y luego seleccione Sí a "Aplicación web / API web" ya que estamos creando una aplicación web.
  3. Y deje Sí como predeterminado para "Permitir flujo implícito"
  4. Escriba la "URL de respuesta" en este caso es nuestra dirección de host local. Escriba "api" o cualquier identificador de su elección para "URI de ID de aplicación (opcional)".

Con este URI, permitirá el permiso de su aplicación para acceder a ciertas funciones en su directorio. Como ejemplo, esto podría estar leyendo información de perfil de usuario.

Lo he marcado especialmente porque si no proporcionó un identificador en esta ubicación, no verá ningún ámbito en "Ámbitos publicados". No estoy seguro de si es un error o no, pero sin él, no obtendrá los ámbitos predeterminados aquí ni podrá crear nuevos.

  • Ahora haga clic en el botón Crear para crear la nueva aplicación.
Aplicación creada exitosamente
  • Ahora haga clic en la etiqueta Flujos de usuario (políticas) en la hoja Azure AD B2C - Aplicaciones.
  • Haga clic en el botón + Nuevo flujo de usuario.
Nuevo flujo de usuarios
  • En la hoja Crear flujo de usuario en la pestaña Recomendado, haga clic en el enlace "Registrarse e iniciar sesión".
Crear un flujo de usuario
  • En la hoja Crear, asegúrese de completar el formulario según la imagen a continuación. Ha proporcionado todas las instrucciones e información que necesita en la propia cuchilla.
Registro y flujo de usuarios de inicio de sesión
  • Ahora ha creado con éxito un flujo de usuario Registrarse e iniciar sesión. Al hacer clic en el botón Ejecutar flujo de usuario, podrá probar este flujo.
Flujo de usuario creado

Esto es todo lo que necesita al final de Azure AD B2C. Hagamos una lista de verificación.

  1. Cuenta de Azure []
  2. Inquilino de Azure AD B2C []
  3. Aplicación Azure AD B2C []
  4. Un flujo de usuarios para registrarse e iniciar sesión []

Excelente, ahora la configuración está hecha. Volvamos a nuestra aplicación de reacción y hagamos algo de codificación.

Instalando la biblioteca

Ahora, regrese a su aplicación ReactJS. En el terminal, escriba el siguiente comando para instalar la biblioteca. Recuerde que estábamos usando la ventana de terminal VSCode.

$ npm install react-azure-adb2c --save
react-azure-adb2c es una biblioteca que lo ayudará a obtener la funcionalidad o Azure AD B2C para su aplicación ReactJS. Al hacer clic aquí, obtendrá una breve documentación sobre cómo usarlo en su aplicación ReactJS.

Ahora ha instalado con éxito la biblioteca. En su aplicación ReactJS, haga clic en el archivo index.js, en la parte superior del archivo agregue la siguiente línea de código.

Agregue esta línea de código después de la importación para inicializar.

Ahora debe reemplazar los elementos marcados en "<>" de los valores en su aplicación Azure AD B2C.

Ahora regrese al portal de Azure y obtenga la siguiente información.

Para obtener el valor para el inquilino, regrese a su directorio Azure AD B2C. En vista general, copie el valor en el campo "Nombre de dominio".

El nombre de dominio es su inquilino.

Ahora, para tomar el ID de aplicación, haga clic en la etiqueta Aplicaciones y copie el ID de la aplicación recién creada, en este caso, "ReactJS AADB2C" y reemplace el valor en el campo de aplicación.

ID de aplicación

Ahora haga clic en la etiqueta Flujos de usuario (políticas) y copie el nombre de la política y reemplace el valor en el campo signInPolicy.

Política de inicio de sesión

Ahora el campo de matriz de ámbitos. Esta matriz le dará los permisos necesarios a su aplicación. Estos permisos permitirán que su aplicación ReactJS acceda a la funcionalidad en Azure AD B2C.

Para obtener esta información:

  1. Haga clic en la etiqueta de aplicaciones.
  2. Haga clic en su aplicación "ReactJS AADB2C".
  3. Haga clic en la etiqueta de ámbitos publicados
  4. Tome el valor en la columna VALOR DE ALCANCE COMPLETO para el alcance de la personificación del usuario.
  5. Reemplace el valor en la matriz de ámbitos (recuerde que esta es una matriz, para cada ámbito debe agregar un elemento en esta matriz)
Visite este enlace para obtener una documentación detallada completa sobre los ámbitos.

Excelente, ya casi hemos terminado. Ahora, su código de inicialización debería verse así.

Una cosa mas que agregar. Reemplacemos el código predeterminado ReactDOM.render () con esto.

Después de todos estos cambios, su archivo index.js debería verse así.

Casi ahi. Hagamos una prueba de funcionamiento. En su ventana de terminal, escriba y ejecute el siguiente comando.

$ npm start

Deberías ver esta pantalla.

Pantalla de inicio de sesión de Azure AD B2C.

Ahora use sus datos de inicio de sesión para Azure Portal o puede crear una nueva cuenta haciendo clic en "Registrarse ahora". ¿Recuerda? Hemos creado un flujo de usuarios tanto para iniciar sesión como para registrarse. Genial no lo es.

Pantalla de registro.

Después de crear una nueva cuenta o usar una cuenta existente, puede iniciar sesión en la aplicación. Pero es posible que no vea la página predeterminada de ReactJS. Esto puede suceder debido a permisos de aplicación insuficientes.

Herramientas para desarrolladores de Chrome. Almacenamiento de sesión de aplicación.

Para arreglar esto,

  1. Regrese al Portal de Azure
  2. Ir al directorio Azure AD B2C
  3. Haga clic en la etiqueta de aplicaciones
  4. Haga clic en la aplicación ("ReactJS AADB2C"). Que acaba de crear.
  5. Haga clic en la etiqueta de acceso API
  6. Haga clic en + Agregar
  7. Seleccione la aplicación en el paso 4 del menú desplegable Seleccionar API.
  8. Seleccione "Acceder a esta aplicación en nombre del usuario que inició sesión ..."
  9. Haga clic en Aceptar
Dando a su aplicación los permisos necesarios.

Volvamos a nuestra aplicación ReactJS y actualícela o vuelva a ejecutarla.

Felicidades !!! Estás listo.

Aplicación ReactJS

Tomemos información de Azure AD B2C y la mostraremos bajo el logotipo de reacción.

Regrese a la terminal e instale el siguiente paquete.

$ npm install jwt-decode --save
Este paquete le permitirá decodificar el token JWT de Azure AD B2C y obtener información dentro de él.

Ahora debe volver a visitar Azure Portal y dejar que Azure AD B2C le envíe esta información. Para hacer esto,

  1. Regrese al portal de Azure.
  2. Vaya a su directorio Azure B2C.
  3. Haga clic en la etiqueta Flujos de usuario (políticas).
  4. Haga clic en la política de inicio de sesión que ha creado.
  5. Haga clic en el enlace Solicitud de reclamos
  6. Seleccione los campos que necesita, en este caso, he seleccionado Ciudad, País / Región, Direcciones de correo electrónico, Nombre para mostrar, Nombre (este será el Nombre), Apellido (este será el Apellido).
  7. Clic en Guardar.
Habilitación de solicitudes de solicitudes.

Regrese a su aplicación ReactJS y haga clic en el directorio src. Agrega un nuevo archivo. Nómbrelo como Auth.js. Copie y pegue el siguiente código dentro del archivo.

Ahora abra App.js y reemplácelo con este código.

Todos hemos terminado. Vuelva a ejecutar nuestra aplicación ReactJS.

$ npm start

Se le solicitará la pantalla de inicio de sesión de Microsoft, después de un inicio de sesión exitoso, debería ver esta pantalla.

Hemos recogido información de Azure AD B2C

Y toma el código desde aquí.

Que tengas un buen día.