Esercizio: Ottenere un token di accesso con MSAL

Completato

Ora è possibile creare un'applicazione usando tutti i concetti appresi fino a questo punto.

In questo esercizio si configurerà la propria applicazione. L'applicazione chiamerà Microsoft Graph per ottenere le informazioni sul profilo di un utente connesso.

Configurazione dell'app

Questo esercizio consente di iniziare a eseguire un'applicazione che consente di accedere a un utente a Microsoft Entra ID e di effettuare una chiamata a Microsoft Graph. Si accederà a un repository GitHub e quindi si configurerà l'applicazione per l'esecuzione locale nel computer.

1. Aprire una console sul computer e passare alla cartella in cui si vuole salvare l'app.

2. Per ottenere il codice sorgente, visitare il repository GitHub e scegliere una delle opzioni seguenti:

   • Se si usa Git, clonare il progetto usando il comando git clone:

     git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
     

   • Se non si usa Git, selezionare il pulsante Codice seguito da Scarica ZIP. Estrarre il file *.zip nel computer.

3. Aprire la cartella radice del progetto scaricato o clonato mslearn-retrieve-m365-data-with-msgraph-quickstart nell'editor preferito.

   L'esportazione contiene i file seguenti:

   • index.html: definisce l'interfaccia utente visualizzata a un utente quando accede al sito Web. Carica lo script Microsoft Authentication Library (MSAL) e gli script dell'applicazione personalizzati, consente a un utente di accedere e visualizza il nome dell'utente dopo l'accesso.
   • auth.js: definisce la configurazione MSAL per associare l'applicazione all'ID Microsoft Entra, accede a un utente all'applicazione e gestisce il recupero di un token di accesso utilizzabile da Microsoft Graph.
   • graph.js: chiama Microsoft 365 per accedere al profilo di /me connesso. Si basa su auth.js per recuperare il token di accesso usato per la chiamata API di Microsoft Graph.
   • ui.js: gestisce gli elementi dell'interfaccia utente definiti in index.html.

4. Aprire il file auth.js e trovare la costante msalConfig:

   const msalConfig = {
       auth: { .. }
   }
   

5. Sostituire il valore della clientId proprietà con il valore dell'ID applicazione (client) copiato dall'applicazione Microsoft Entra (spa-aad-app) registrata in precedenza. È possibile ottenere questo valore dalla pagina di panoramica dell'applicazione Microsoft Entra (spa-aad-app).

6. Nello stesso fileauth.js trovare la msalConfig.auth.authority proprietà . Sostituire il <your directory ID here> valore con il valore ID directory (tenant) dell'applicazione Microsoft Entra (spa-aad-app) registrata in precedenza. È possibile ottenere questo valore dalla pagina di panoramica dell'applicazione Microsoft Entra (spa-aad-app).

   La msalConfig costante dovrebbe essere simile al codice seguente, con l'ID univoco del tenant di Microsoft Entra e dell'applicazione registrata:

   const msalConfig = {
     auth: {
       clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
       authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
       redirectUri: 'http://localhost:8080'
     }
   };
   

7. Dopo aver aggiunto gli ID di Microsoft Entra appropriati in auth.js, è possibile esplorare il codice nel file. Si noti che contiene le seguenti funzioni:

   • signIn(): consente all'utente di accedere.
   • getToken(): gestisce l'acquisizione di un token di accesso che Microsoft Graph può usare.

8. Aprire il file graph.js e notare che acquisisce un token di accesso, chiama l'API Microsoft Graph /me e seleziona i valori ID e displayName dell'utente. Si noti come il token di accesso viene recuperato e aggiunto all'intestazione di autorizzazione inviata con la richiesta di /me.

9. Infine, aprire ui.js e dedicare qualche istante a esplorare la funzione displayUI(). È responsabile della visualizzazione e della mancata visualizzazione degli elementi in index.html e della visualizzazione del nome dell'utente dopo che questo ha effettuato l'accesso.

Esecuzione dell'app

Per questa procedura, assicurarsi che Node.js sia installato nel computer.

È il momento di vedere l'applicazione eseguita localmente.

1. Nella console, passare alla cartella del progetto in cui si trova il codice sorgente.

2. Eseguire il seguente script dalla riga di comando. Lo script avvierà l'app in locale e aprirà http://localhost:8080 nel browser.

   npm start
   

3. Se l'app è configurata correttamente, viene visualizzato un pulsante di accesso.

   

4. Accedere usando un account nello stesso tenant per sviluppatori di Microsoft 365 usato da un'unità precedente durante la registrazione dell'applicazione Microsoft Entra.

5. Dopo aver eseguito l'accesso, viene richiesto di fornire il consenso.

   

6. Selezionare Accetta per fornire all'applicazione il consenso per eseguire operazioni per conto dell'utente.

7. Dopo il consenso, l'applicazione tenta di ottenere un token di accesso usando le informazioni dell'account convalidate. Questa operazione viene gestita automaticamente dalla raccolta MSAL.

8. Dopo il ritorno del token all'applicazione, viene effettuata una richiesta GET all'endpoint Microsoft Graph /me e il token di accesso viene passato nell'intestazione dell'autorizzazione. La chiamata a /me quindi recupera i dati in modo sicuro dal servizio.

9. Dopo la ricezione della risposta da Microsoft Graph, nel browser viene visualizzato il nome dell'utente connesso.

   

È stata creata un'applicazione che usa Microsoft Graph per recuperare i dati Microsoft 365.