Tutorial: Creación de una SPA de React para la autenticación en un inquilino externo

Artículo
06/29/2024

Este tutorial es la parte 2 de una serie que muestra cómo compilar una aplicación de página única de React (proteger el acceso con privilegios (SPA)) y prepararla para la autenticación mediante el Centro de administración de Microsoft Entra. En la parte 1 de esta serie, registró una aplicación y configuró los flujos de usuario en el inquilino externo. En este tutorial, se muestra cómo crear una SPA de React mediante npm y crear los archivos necesarios para la autenticación y autorización.

En este tutorial,

Creación de un proyecto de React en Visual Studio Code
Instalar los paquetes identity y bootstrap
Configure las opciones de la aplicación

Requisitos previos

Tutorial: Preparar el inquilino externo para autenticar a los usuarios en una React SPA.
Aunque se puede usar cualquier entorno de desarrollo integrado (IDE) que admita aplicaciones React, este tutorial usa Visual Studio Code.
Node.js.

Creación de un proyecto de React

Abra Visual Studio Code, seleccione Archivo >Abrir carpeta.... Navegue y seleccione la ubicación en la que se va a crear el proyecto.
Abra una terminal nueva seleccionando Terminal >Crear terminal.
Ejecute los siguientes comandos para crear un nuevo proyecto de React con el nombre reactspalocal, cambie al nuevo directorio e inicie el proyecto de React. Se abre un explorador web con la dirección http://localhost:3000/ de forma predeterminada. El explorador permanece abierto y vuelve a representar todos los cambios guardados.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Cree más carpetas y archivos para lograr esta estructura de carpeta:

reactspalocal
├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └───styles
    │   └─── App.css
    │   └─── index.css
    └─── utils
    │    └─── claimUtils.js
    └── App.jsx
    └── authConfig.js
    └── index.js

Instalar las dependencias de la aplicación

Los paquetes npm relacionados con la identidad deben instalarse en el proyecto para habilitar la autenticación de usuario. En el caso del estilo del proyecto, se usa Bootstrap.

En la barra Terminal, seleccione el icono + para crear un nuevo terminal. Se abre una nueva ventana de terminal que permite que el otro terminal continúe ejecutándose en segundo plano.
Si es necesario, vaya a reactspalocal y escriba los siguientes comandos en el terminal para instalar los paquetes msal y bootstrap.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Creación del archivo de configuración de autenticación, authConfig.js

En la carpeta src, abra authConfig.js y agregue el siguiente fragmento de código:

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from '@azure/msal-browser';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }
            },
        },
    },
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit:
 * https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: [],
};

/**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */
// export const silentRequest = {
//     scopes: ["openid", "profile"],
//     loginHint: "example@domain.net"
// };

Reemplace los valores siguientes por los valores de Azure Portal:
- Busque el valor Enter_the_Application_Id_Here y reemplácelo por el id. de aplicación (clientId) de la aplicación que ha registrado en el centro de administración de Microsoft Entra.
- En Autoridad, busque Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio del inquilino. Por ejemplo, si el dominio principal del inquilino es contoso.onmicrosoft.com, use contoso. Si no tiene el nombre del inquilino, obtenga información sobre cómo leer los detalles del inquilino.
Guarde el archivo.

Uso del dominio de dirección URL personalizado (opcional)

Use un dominio personalizado para personalizar completamente la dirección URL de autenticación. Desde el punto de vista del usuario, este permanece en el dominio durante el proceso de autenticación, en lugar de que se le redirija al nombre de dominio ciamlogin.com.

Siga estos pasos para usar un dominio personalizado:

Siga los pasos descritos en Habilitación de dominios de dirección URL personalizados para aplicaciones en inquilinos externos a fin de habilitar la dirección URL de dominio personalizada para el inquilino externo.
En el archivo authConfig.js, busque el objeto auth y, después, haga lo siguiente:
1. Actualice el valor de la propiedad authority a https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Reemplace Enter_the_Custom_Domain_Here por la dirección URL de dominio personalizado y Enter_the_Tenant_ID_Here por el id. del inquilino. Si no tiene el identificador del inquilino, obtenga información sobre cómo leer los detalles del inquilino.
2. Agregue la propiedad knownAuthorities con un valor [Escriba_aquí_el_dominio_personalizado].

Después de realizar los cambios en el archivo authConfig.js, si el dominio de dirección URL personalizado es login.contoso.com y el id. de inquilino es aaaabbbb-0000-cccc-1111-dddd2222eeee, el archivo debe tener un aspecto similar al siguiente fragmento de código:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Modifique index.js para incluir el proveedor de autenticación

Todas las partes de la aplicación que requieren autenticación se deben encapsular en el componente MsalProvider. Cree una instancia de PublicClientApplication y, a continuación, pásela a MsalProvider.

En la carpeta src, abra index.js y reemplace el contenido del archivo por el siguiente fragmento de código para usar los msal paquetes y el estilo de arranque:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './authConfig';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

/**
 * MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
 * For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
 */
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
        const account = event.payload.account;
        msalInstance.setActiveAccount(account);
    }
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

Paso siguiente

Tercera parte: control de los flujos de autenticación en una SPA de React

Compartir vía