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

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.

Visual Studio

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
   

Visual Studio Code

1. Abra Visual Studio Code, seleccione Archivo >Abrir carpeta.... Navegue y seleccione la ubicación en la que se va a crear el proyecto.

2. Abra una terminal nueva seleccionando Terminal >Crear terminal.

3. 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
   

4. 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.

Visual Studio

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.

Visual Studio Code

1. En la barra Terminal, seleccione el icono + para crear un nuevo terminal. Se abrirá una ventana de terminal independiente con el terminal del nodo anterior que se seguirá ejecutando en segundo plano.

2. 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
   

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