Tutorial: Creación de una aplicación de página única de React y preparación para la autenticación

2025-05-25

Se aplica a: Círculo verde con un símbolo de marca de verificación blanca. inquilinos de personal inquilinos externos (más información)

En este tutorial, creará una aplicación de página única (SPA) de React y la preparará para la autenticación mediante la plataforma de identidad de Microsoft. En este tutorial se muestra cómo crear una SPA de React mediante npm, crear archivos necesarios para la autenticación y autorización y agregar los detalles del inquilino al código fuente. La aplicación se puede usar para los empleados de un inquilino del personal o para los clientes que usan un inquilino externo.

En este tutorial, harás lo siguiente:

Creación de un nuevo proyecto de React
Instalación de paquetes necesarios para la autenticación
Crear la estructura de archivos y agregar código al archivo de servidor
Adición de los detalles del inquilino al archivo de configuración de autenticación

Un inquilino trabajador Puede usar su Directorio Predeterminado o configurar un nuevo tenant.
Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
- Id. de aplicación (cliente)
- Id. de directorio (inquilino)
Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
- URI de redirección: http://localhost:3000/.

Un inquilino externo. Para crear uno, elija entre los métodos siguientes:
- (Recomendado) Use la extensión Microsoft Entra External ID para configurar un inquilino externo directamente en Visual Studio Code.
- Crear un nuevo inquilino externo en el Centro de administración de Microsoft Entra.
Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
- Id. de aplicación (cliente)
- Id. de directorio (inquilino)
Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
- URI de redirección: http://localhost:3000/.
Asocie la aplicación a un flujo de usuario en el Centro de administración de Microsoft Entra. Este flujo de usuario se puede usar en varias aplicaciones. Para obtener más información, consulte Creación de flujos de usuario de registro de autoservicio para aplicaciones en inquilinos externos y Agregar la aplicación al flujo de usuario.

Node.js.
Visual Studio Code u otro editor de código.

Creación de un nuevo 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 abrirá un navegador web con la dirección http://localhost:3000/ de forma predeterminada. El explorador permanece abierto y vuelve a representarse para cada cambio guardado.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

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

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

Instalar los paquetes identity y bootstrap

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 usará Bootstrap .

En la barra Terminal, seleccione el icono + para crear un nuevo terminal. Se abrirá una ventana de terminal independiente con el terminal de nodo anterior que continúa ejecutándose en segundo plano.
Asegúrese de que el directorio correcto está seleccionado (reactspalocal) y, a continuación, escriba lo siguiente en el terminal para instalar los paquetes msal y bootstrap pertinentes.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Adición de los detalles del inquilino a la configuración de MSAL

El archivo authConfig.js contiene las opciones de configuración del flujo de autenticación y se usa para configurar MSAL.js con los valores necesarios para la autenticación.

Usuario de la fuerza laboral
Inquilino externo

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


 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://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Replace the placeholder with your tenant info
         redirectUri: 'http://localhost:3000/redirect', // Points to window.___location.origin. You must register this URI on Microsoft Entra admin center/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/en-us/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 siguientes valores por los del Centro de administración de Microsoft Entra.
- clientId: el identificador de la aplicación, también conocido como el cliente. Reemplace Enter_the_Application_Id_Here por el valor de Id. de la aplicación (cliente) que se registró anteriormente en la página de resumen de la aplicación registrada.
- authority - Se compone de dos partes:
  - La instancia es el punto de conexión del proveedor de nube. Consulte los diferentes puntos de conexión disponibles en nubes nacionales.
  - El Id. de inquilino es el identificador del inquilino en el que está registrada la solicitud. Reemplace Enter_the_Tenant_Info_Here por el valor de Identificador del directorio (inquilino) que se ha registrado antes en la página de información general de la aplicación registrada.
Guarde el archivo.

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

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 del Centro de administración de Entra:
- Enter_the_Application_Id_Here y reemplácelo por el identificador de aplicación (cliente) en el Centro de administración de Microsoft Entra.
- Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.
Guarde el archivo.

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

Se aplica a: Círculo blanco con un símbolo X gris. inquilinos de personal Círculo verde con un símbolo de marca de verificación blanca. inquilinos externos (más información)

Use un dominio personalizado para personalizar completamente la dirección URL de autenticación. Desde la perspectiva del usuario, los usuarios permanecen en el dominio durante el proceso de autenticación, en lugar de redirigirse a ciamlogin.com nombre de dominio.

Siga estos pasos para usar un dominio personalizado:

Siga los pasos descritos en Habilitación de dominios url personalizados para aplicaciones en inquilinos externos para habilitar el dominio de dirección URL personalizado para el inquilino externo.
En su archivo authConfig.js, localice el objeto auth y luego haga lo siguiente:
1. Actualice el valor de la authority propiedad a https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Reemplace por Enter_the_Custom_Domain_Here el dominio de dirección URL personalizado y Enter_the_Tenant_ID_Here por el identificador de 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 [Introduzca_el_Dominio_Personalizado_Aquí].

Después de realizar los cambios en el archivo authConfig.js , si el dominio de dirección URL personalizado está login.contoso.com y el identificador 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
    },
    //...
};

Adición del proveedor de autenticación

Los msal paquetes se usan para proporcionar autenticación en la aplicación. El msal-browser paquete se usa para controlar el flujo de autenticación y el msal-react paquete se usa para integrarse msal-browser con React. addEventCallback se usa para escuchar eventos que se producen durante el proceso de autenticación, como cuando un usuario inicia sesión correctamente. El setActiveAccount método se usa para establecer la cuenta activa de la aplicación, que se usa para determinar la información del usuario que se va a mostrar.

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 { createRoot } 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.getAllAccounts()[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 = createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

Guarde el archivo.

Para obtener más información sobre estos paquetes, consulte la documentación de msal-browser y msal-react.

Adición del componente de aplicación principal

Todas las partes de la aplicación que requieren autenticación se deben encapsular en el componente MsalProvider. Estableces una variable instance que llama al hook useMsal para obtener la instancia PublicClientApplication y luego la pasas a MsalProvider. El componente MsalProvider hace que la instancia PublicClientApplication esté disponible en toda tu aplicación a través de la API de contexto de React. Todos los componentes debajo de MsalProvider tendrán acceso a la instancia mediante el contexto de PublicClientApplication, así como a todos los hooks y componentes que proporciona msal-react.

En la carpeta src , abra App.jsx y reemplace el contenido del archivo por el siguiente fragmento de código:

import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
import { Container, Button } from 'react-bootstrap';
import { PageLayout } from './components/PageLayout';
import { IdTokenData } from './components/DataDisplay';
import { loginRequest } from './authConfig';

import './styles/App.css';

/**
* Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
* msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
* only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const MainContent = () => {
    /**
    * useMsal is hook that returns the PublicClientApplication instance,
    * that tells you what msal is currently doing. For more, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
    */
    const { instance } = useMsal();
    const activeAccount = instance.getActiveAccount();

    const handleRedirect = () => {
        instance
            .loginRedirect({
                ...loginRequest,
                prompt: 'create',
            })
            .catch((error) => console.log(error));
    };
    return (
        <div className="App">
            <AuthenticatedTemplate>
                {activeAccount ? (
                    <Container>
                        <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                    </Container>
                ) : null}
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <Button className="signInButton" onClick={handleRedirect} variant="primary">
                    Sign up
                </Button>
            </UnauthenticatedTemplate>
        </div>
    );
};


/**
* msal-react is built on the React context API and all parts of your app that require authentication must be 
* wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
* then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
* PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const App = ({ instance }) => {
    return (
        <MsalProvider instance={instance}>
            <PageLayout>
                <MainContent />
            </PageLayout>
        </MsalProvider>
    );
};

export default App;

Guarde el archivo.

Pasos siguientes

Tutorial: Creación de componentes para iniciar sesión y cerrar sesión en una aplicación de página única de React