Habilitación de la autenticación en su propia aplicación React mediante Azure Active Directory B2C

  • Artículo

En este artículo se muestra cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) en su propia aplicación de página única (SPA) de React. Más información sobre cómo integrar una aplicación React con la biblioteca de autenticación MSAL para React.

Use este artículo con el artículo relacionado titulado Configuración de la autenticación en una aplicación de página única de React. Sustituya la aplicación React de ejemplo por su propia aplicación de React. Después de completar los pasos de este artículo, la aplicación aceptará inicios de sesión mediante Azure AD B2C.

Requisitos previos

Revise los requisitos previos y los pasos de integración del artículo Configuración de la autenticación en una aplicación de página única de React de ejemplo.

Paso 1: Creación de un proyecto de aplicación de React

Puede usar una aplicación de React existente o crear una nueva aplicación de React. Para crear un proyecto, ejecute los siguientes comandos en el shell de comandos:

npx create-react-app my-app
cd my-app

Paso 2: Instalación de las dependencias.

Para instalar las bibliotecas MSAL Browser y MSAL React en la aplicación, ejecute los comandos siguientes en el shell de comandos:

npm i @azure/msal-browser  @azure/msal-react

Instale react-router-dom versión 5.*. El paquete react-router-dom contiene enlaces para usar React Router en aplicaciones web. En el shell de comandos, ejecute el siguiente comando:

npm i react-router-dom@5.3.3

Instale Bootstrap para React (opcional, para la interfaz de usuario):

npm i bootstrap react-bootstrap

Paso 3: Adición de componentes de autenticación

El código de ejemplo consta de los siguientes componentes. Agregue estos componentes de la aplicación React de ejemplo a su propia aplicación:

  • public/index.html: el proceso de unión usa este archivo como plantilla e inserta los componentes de React en el elemento <div id="root">. Si la abre directamente en el explorador, se ve una página vacía.

  • src/authConfig.js: un archivo de configuración que contiene información sobre el proveedor de identidades de Azure AD B2C y el servicio de API web. La aplicación React usa esta información para establecer una relación de confianza con Azure AD B2C, iniciar y cerrar la sesión del usuario, adquirir tokens y validarlos.

  • src/index.js: el punto de entrada de JavaScript a la aplicación. Este archivo JavaScript:

    • monta App como componente raíz en el elemento <div id="root"> de la página public/index.html.
    • Inicia la biblioteca MSAL PublicClientApplication con la configuración definida en el archivo authConfig.js. Se debe crear una instancia de MSAL React fuera del árbol de componentes para evitar que se vuelva a activar en las representaciones.
    • Después de crear una instancia de la biblioteca MSAL, el código JavaScript pasa msalInstance como propiedades a los componentes de la aplicación. Por ejemplo, <App instance={msalInstance} />.

  • src/App.jsx: define los componentes de la aplicación y las páginas:

    • El componente aplicación es el componente de nivel superior de la aplicación. Encapsula todo entre componentes MsalProvider. Todos los componentes que están debajo de MsalProvider tienen acceso a la instancia de PublicClientApplication a través del contexto y de todos los enlaces y componentes proporcionados por MSAL React. El componente App monta pageLayout y el elemento secundario Pages.

    • El componente Pages registra y anula el registro de las devoluciones de llamada de eventos de MSAL. Los eventos se usan para controlar los errores de MSAL. También define la lógica de enrutamiento de la aplicación.

    Importante

    Si el nombre del archivo del componente App es App.js, cámbielo a App.jsx.

  • src/pages/Hello.jsx: muestra cómo llamar a un recurso protegido con el token de portador de OAuth2.

    • Usa el enlace useMsal que devuelve la instancia PublicClientApplication.
    • Con la instancia de PublicClientApplication, adquiere un token de acceso para llamar a la API de REST.
    • Invoca la función callApiWithToken para capturar los datos de la API de REST y representa el resultado mediante el componente DataDisplay.

  • src/components/NavigationBar.jsx: la barra de navegación superior de la aplicación, que tiene los botones de inicio de sesión, cierre de sesión, edición del perfil y restablecimiento de la llamada a la API de REST.

    • Usa AuthenticatedTemplate y UnauthenticatedTemplate, que solo representan sus elementos secundarios si un usuario está autenticado o no autenticado, respectivamente.
    • Controle el inicio de sesión y cierre de sesión con eventos de redirección y ventana emergente.

  • src/components/PageLayout.jsx

    • El diseño común que proporciona al usuario una experiencia coherente a medida que navega de página a página. El diseño incluye elementos comunes de la interfaz de usuario, como el encabezado de la aplicación, el componente NavigationBar, el pie de página y sus componentes secundarios.
    • Usa AuthenticatedTemplate que representa sus elementos secundarios solo si se autentica un usuario.

  • src/components/DataDisplay.jsx: representa los datos devueltos desde la llamada a la API de REST.

  • src/styles/App.css y src/styles/index.css: archivos de estilo CSS para la aplicación.

  • src/fetch.js: captura solicitudes HTTP a la API de REST.

Paso 4: Configuración de la aplicación de React

Después de agregar los componentes de autenticación, configure la aplicación React con los ajustes de Azure AD B2C. La configuración del proveedor de identidades de Azure AD B2C se realiza en el archivo authConfig.js.

Para obtener instrucciones, consulte Configuración de la aplicación de React.

Paso 5: Ejecución de la aplicación de React

  1. En Visual Studio Code, abra un nuevo terminal y ejecute los siguientes comandos:

    npm install && npm update
npm start

    La ventana de la consola muestra el número de puerto donde se hospeda la aplicación:

    Listening on port 3000...

  2. Para llamar a una API de REST, siga las instrucciones sobre cómo ejecutar la API web

  3. En el explorador, vaya a http://localhost:3000 para ver la aplicación

Pasos siguientes