Guida introduttiva: Accedere agli utenti in un'app a pagina singola e chiamare l'API Microsoft Graph usando Blazor WebAssembly

Questa guida introduttiva usa un'app a pagina singola (SPA) Blazor WebAssembly (WASM) di esempio per illustrare come accedere agli utenti usando il flusso del codice di autorizzazione con La chiave di prova per Code Exchange (PKCE) e chiamare l'API Microsoft Graph. L'esempio usa Microsoft.Authentication.WebAssembly.MSAL per gestire l'autenticazione.

Prerequisiti

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

Registrare l'applicazione e gli identificatori di record

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, nel riquadro Panoramica dell'applicazione vengono visualizzati gli identificatori necessari nel codice sorgente dell'applicazione.

1. Accedi all'Interfaccia di amministrazione di Microsoft Entra.

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

3. Passare a Applicazioni> di identità>Registrazioni app, selezionare Nuova registrazione.

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

5. Per Tipi di account supportati selezionare Account solo in questa directory dell'organizzazione. Per informazioni sui diversi tipi di account, selezionare l'opzione ?

6. Selezionare Registra.

   

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

   

   Nota

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

Aggiungere un URI di reindirizzamento della 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 l'opzione SPA .
3. Per gli URI di reindirizzamento immettere http://localhost:5000/authentication/login-callback.
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-dotnet
  

• Scaricare 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-dotnet /spa-blazor-wasm contenente l'esempio.

2. Aprire wwwroot/appsettings.json e aggiornare i valori seguenti con le informazioni registrate in precedenza nell'interfaccia di amministrazione.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • Authority - L'autorità è un URL che indica una directory da cui MSAL può richiedere token. Sostituire Enter_the_Tenant_Info_Here con il valore ID directory (tenant) registrato in precedenza.
   • ClientId - Identificatore dell'applicazione, detto anche client. Sostituire il testo tra virgolette con il valore ID applicazione (client) registrato in precedenza.

Eseguire l'applicazione ed eseguire l'accesso

Eseguire il progetto con un server Web usando .NET:

1. Per avviare il server, eseguire i comandi seguenti nella directory del progetto:

   dotnet run
   

2. Copiare l'URL http visualizzato nel terminale, ad esempio , http://localhost:5000e 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. Verrà 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 richiederà l'autorizzazione per mantenere l'accesso ai dati a cui è stato concesso l'accesso e per accedere e leggere il 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. Trovare il pulsante Disconnetti nell'angolo superiore destro della pagina e selezionarlo.
2. Verrà 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.

Vedi anche

• Guida introduttiva: Proteggere un'API Web ASP.NET Core con Microsoft Identity Platform.

• Per altre informazioni, vedere creare un'applicazione a pagina singola React da zero con la serie seguente - Esercitazione: Accedere agli utenti e chiamare Microsoft Graph