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

  • Artículo

Una vez completado el registro, se puede crear un proyecto React mediante un entorno de desarrollo integrado (IDE). En este tutorial se muestra cómo crear una aplicación React de una sola página mediante npm y crear los archivos necesarios para la autenticación y autorización.

En este tutorial, aprenderá a:

  • Crear un nuevo proyecto React
  • Configure las opciones de la aplicación
  • Instalar los paquetes identity y bootstrap
  • Agregar código de autenticación a la aplicación

Prerrequisitos

  • Completar los requisitos previos y los pasos del Tutorial: registrar una aplicación.
  • Aunque se puede usar cualquier entorno de desarrollo integrado (IDE) que admita aplicaciones React, en este tutorial se usan los siguientes IDE de Visual Studio. Se pueden descargar desde la página Descargas. Para los usuarios de macOS, se recomienda usar Visual Studio Code.
    • Visual Studio 2022
    • Visual Studio Code
  • Node.js.

Crear un nuevo proyecto React

Use las pestañas siguientes para crear un proyecto de React dentro del IDE.

  1. Abra Visual Studio y seleccione Crear un proyecto.

  2. Busque y elija la plantilla Standalone JavaScript React Project y, a continuación, seleccione Siguiente.

  3. Escriba un nombre para el proyecto, como reactspalocal.

  4. Elija una ubicación para el proyecto o acepte la opción predeterminada y, luego, seleccione Siguiente.

  5. En Información adicional, seleccione Crear.

  6. En la barra de herramientas, seleccione Iniciar sin depurar para iniciar la aplicación. 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.

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

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── 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.

  1. En el Explorador de soluciones, haga clic con el botón derecho en la opción npm y seleccione Instalar nuevos paquetes de npm.
  2. Busque @azure/MSAL-browsery seleccione Instalar paquete. Repita @azure/MSAL-react.
  3. Busque e instale react-bootstrap.
  4. Seleccione Cerrar.

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

Creación del archivo de configuración de autenticación

  1. 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",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        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: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};

  2. Reemplace los siguientes valores por los del Centro de administración de Microsoft Entra.

    • clientId - El identificador de la aplicación, también denominado 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.

  3. Guarde el archivo.

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.

  1. 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';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);

  2. Guarde el archivo.

Pasos siguientes

Tutorial: crea componentes para iniciar y cerrar sesión en una aplicación React de una sola página