Guida introduttiva: Effettuare l'accesso degli utenti in un'applicazione a pagina singola e chiamare l'API Microsoft Graph con React

Questa la guida introduttiva usa un'app React a pagina singola (SPA) di esempio per illustrare come autenticare gli utenti usando il flusso del codice di autorizzazione con Proof Key for Code Exchange (PKCE). L'esempio usa il Microsoft Authentication Library per JavaScript per gestire l'autenticazione.

Prerequisiti

• Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
• Node.js
• Visual Studio 2022 o Visual Studio Code

Registrare l'applicazione e registrare gli identificatori

Per completare la registrazione, specificare un nome per l'applicazione, specificare i tipi di account supportati e aggiungere un URI di reindirizzamento. Dopo la registrazione, il riquadro Panoramica dell'applicazione visualizza gli identificatori necessari nel codice sorgente dell'applicazione.

1. Accedi al centro di amministrazione di Microsoft Entra.

2. Se si ha accesso a più tenant, usare l'icona delle impostazioni nel menu in alto per passare al tenant in cui si vuole registrare l'applicazione dal menu Directory + sottoscrizioni.

3. Passare a Identity>Applications>App registrations, selezionare Nuova registrazione.

4. Immettere un Nome per l'applicazione, ad esempio identity-client-spa.

5. Per Tipi di account supportati, selezionare solo gli account in questa directory organizzativa. Per informazioni sui diversi tipi di account, selezionare l'opzione Aiutami a scegliere.

6. Seleziona Registra.

   

7. Al termine della registrazione, viene visualizzato riquadro Panoramica dell'applicazione. Registrare l'ID Directory (tenant) e l'ID applicazione (client) da usare nel codice sorgente della tua applicazione.

   

   Nota

   I tipi di account supportati possono essere modificati facendo riferimento a Modificare gli account supportati da un'applicazione.

Aggiungi un URI di reindirizzamento per la piattaforma

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci, Selezionare Autenticazione.
2. Nella pagina configurazioni della piattaforma , selezionare Aggiungi una piattaforma, e quindi selezionare opzione SPA.
3. Per le URI di reindirizzamento , immettere http://localhost:3000.
4. Selezionare Configura per salvare le modifiche.

Clonare o scaricare l'applicazione di esempio

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file .zip.

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
  

• Scarica il file .zip. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Configurare il progetto

1. Nell'IDE aprire la cartella del progetto ms-identity-docs-code-javascript/react-spacontenente l'esempio.

2. Aprire src/authConfig.js e aggiornare i valori seguenti con le informazioni registrate in precedenza nel centro di amministrazione.

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

   • clientId: identificatore dell'applicazione, detto anche client. Sostituisci il testo "tra virgolette" con il valore dell'ID applicazione (client) registrato in precedenza.
   • authority: L'autorità è un URL che rappresenta una directory dalla quale MSAL può richiedere token. Sostituire Enter_the_Tenant_Info_Here con l'ID directory (tenant) valore registrato in precedenza.
   • redirectUri - L'URI di reindirizzamento dell'applicazione. Se necessario, sostituire il testo tra virgolette con l'URI di reindirizzamento registrato in precedenza.

Avvia l'app e accedi

Eseguire il progetto con un server Web usando Node.js:

1. Per avviare il server, eseguire i comandi seguenti dall'interno della directory del progetto:

   npm install
   npm start
   

2. Copiare l'URL https visualizzato nel terminale, ad esempio https://localhost:3000e incollarlo in un browser. È consigliabile usare una sessione privata o in incognito del browser.

3. Seguire i passaggi e immettere i dettagli necessari per accedere con l'account Microsoft. Viene richiesto un indirizzo di posta elettronica in modo che sia possibile inviare un passcode una volta all'utente. Immettere il codice quando richiesto.

4. L'applicazione richiede il permesso di mantenere l'accesso ai dati a cui hai concesso l'accesso, di accedere al tuo account e di leggere il tuo profilo. Selezionare Accetta. Viene visualizzata la schermata seguente, che indica che è stato eseguito l'accesso all'applicazione e che è stato eseguito l'accesso ai dettagli del profilo dall'API Microsoft Graph.

   

Disconnettersi dall'applicazione

1. Trova il pulsante Disconnetti nell'angolo superiore destro della pagina e selezionalo.
2. Viene richiesto di selezionare un account da cui disconnettersi. Selezionare l'account usato per accedere.

Viene visualizzato un messaggio che indica che si è disconnesso. È ora possibile chiudere la finestra del browser.

Contenuto correlato

• Avvio rapido di : Proteggere un'API Web ASP.NET Core con Microsoft Identity Platform

• Impara di più creando questa applicazione a pagina singola React da zero con la serie seguente - Esercitazione : Effettuare l'accesso per gli utenti e chiamare Microsoft Graph