Esercitazione: Creare un'applicazione a pagina singola React e prepararla per l'autenticazione

Articolo
02/07/2024

Al termine della registrazione, è possibile creare un progetto React usando un ambiente di sviluppo integrato (IDE). Questa esercitazione illustra come creare un'applicazione React a pagina singola usando npm e creare file necessari per l'autenticazione e l'autorizzazione.

Contenuto dell'esercitazione:

Creare un nuovo progetto React
Configurare le impostazioni per l'applicazione
Installare pacchetti identity e bootstrap
Aggiungere il codice di autenticazione all'applicazione

Prerequisiti

Completamento dei prerequisiti e dei passaggi descritti in Esercitazione: Registrare un'applicazione.
Anche se è possibile usare qualsiasi IDE che supporta le applicazioni React, per questa esercitazione vengono usati gli IDE di Visual Studio seguenti. Possono essere scaricati dalla pagina Download . Per gli utenti macOS, è consigliabile usare Visual Studio Code.
- Visual Studio 2022
- Visual Studio Code
Node.js.

Creare un nuovo progetto React

Usare le schede seguenti per creare un progetto React nell'IDE.

Visual Studio
Visual Studio Code

Aprire Visual Studio e quindi selezionare Crea un nuovo progetto.
Cercare e scegliere il modello Progetto React JavaScript autonomo e quindi selezionare Avanti.
Immettere un nome per il progetto, ad esempio reactspalocal.
Scegliere un percorso per il progetto o accettare l'opzione predefinita e quindi selezionare Avanti.
In Informazioni aggiuntive selezionare Crea.
Sulla barra degli strumenti selezionare Avvia senza eseguire debug per avviare l'applicazione. Un Web browser verrà aperto con l'indirizzo http://localhost:3000/ per impostazione predefinita. Il browser rimane aperto ed esegue nuovamente il rendering per ogni modifica salvata.

Creare cartelle e file aggiuntivi per ottenere la struttura di cartelle seguente:

├─── 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

Aprire Visual Studio Code, selezionare File>Apri cartella.... Passare a e selezionare il percorso in cui creare il progetto.
Aprire un nuovo terminale selezionando Terminale>Nuovo terminale.
Eseguire i comandi seguenti per creare un nuovo progetto React con il nome reactspalocal, passare alla nuova directory e avviare il progetto React. Un Web browser verrà aperto con l'indirizzo http://localhost:3000/ per impostazione predefinita. Il browser rimane aperto ed esegue nuovamente il rendering per ogni modifica salvata.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Creare cartelle e file aggiuntivi per ottenere la struttura di cartelle seguente:

├─── 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

Installare pacchetti identity e bootstrap

I pacchetti npm correlati all'identità devono essere installati nel progetto per abilitare l'autenticazione utente. Per lo stile del progetto, verrà usato Bootstrap .

Visual Studio
Visual Studio Code

Nella Esplora soluzioni fare clic con il pulsante destro del mouse sull'opzione npm e selezionare Installa nuovi pacchetti npm.
Cercare @azure/MSAL-browser e quindi selezionare Installa pacchetto. Ripetere per @azure/MSAL-react.
Cercare e installare react-bootstrap.
Selezionare Chiudi.

Nella barra del terminale selezionare l'icona + per creare un nuovo terminale. Verrà aperta una finestra del terminale separata con il terminale del nodo precedente che continua a essere eseguito in background.
Assicurarsi che la directory corretta sia selezionata (reactspalocal) e quindi immettere quanto segue nel terminale per installare i pacchetti e bootstrap pertinentimsal.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Per altre informazioni su questi pacchetti, vedere la documentazione in msal-browser e msal-react.

Creazione del file di configurazione dell'autenticazione

Nella cartella src aprire authConfig.js e aggiungere il frammento di codice seguente:

/*
 * 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",
};

Sostituire i valori seguenti con i valori dell'interfaccia di amministrazione di Microsoft Entra.
- clientId - Identificatore dell'applicazione, detto anche client. Sostituire Enter_the_Application_Id_Here con il valore ID applicazione (client) registrato in precedenza dalla pagina di panoramica dell'applicazione registrata.
- authority - Questo è composto da due parti:
  - L'istanza è l'endpoint del provider di servizi cloud. Verificare i diversi endpoint disponibili nei cloud nazionali.
  - L'ID tenant è l'identificatore del tenant in cui è registrata l'applicazione. Sostituire Enter_the_Tenant_Info_Here con il valore ID directory (tenant) registrato in precedenza dalla pagina di panoramica dell'applicazione registrata.
Salvare il file.

Modificare index.js per includere il provider di autenticazione

Tutte le parti dell'app che richiedono l'autenticazione devono essere incluse nel MsalProvider componente. Creare un'istanza di PublicClientApplication e quindi passarla a MsalProvider.

Nella cartella src aprire index.js e sostituire il contenuto del file con il frammento di codice seguente per usare i pacchetti e lo msal stile bootstrap:

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>
);

Salvare il file.

Passaggi successivi

Esercitazione: Creare componenti per l'accesso e disconnettersi in un'app a pagina singola React

Condividi tramite