Guida introduttiva: Accesso degli utenti in una SPA (Single-Page Application) e chiamata all'API Microsoft Graph

In questa guida introduttiva, utilizzi un'applicazione di esempio a pagina singola per mostrare come effettuare l'accesso degli utenti impiegando il flusso del codice di autorizzazione con PKCE (Proof Key for Code Exchange) e invocare l'API Microsoft Graph. L'esempio usa il microsoft Authentication Library per gestire l'autenticazione.

Prerequisiti

JavaScript

• Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
• Questo account Azure deve avere le autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
  • Amministratore dell'applicazione
  • Sviluppatore di applicazioni
  • Amministratore di applicazioni cloud.
• Node.js.
• Visual Studio Code o un altro editor di codice.

React

• Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
• Questo account Azure deve avere le autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
  • Amministratore dell'applicazione
  • Sviluppatore di applicazioni
  • Amministratore di applicazioni cloud.
• Node.js.
• Visual Studio Code o un altro editor di codice.

Angular

• Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
• Questo account Azure deve avere le autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
  • Amministratore dell'applicazione
  • Sviluppatore di applicazioni
  • Amministratore di applicazioni cloud.
• Node.js.
• Visual Studio Code o un altro editor di codice.

Blazor

• Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
• Questo account Azure deve avere le autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
  • Amministratore dell'applicazione
  • Sviluppatore di applicazioni
  • Amministratore di applicazioni cloud.
• .NET SDK.
• Visual Studio Code o un altro editor di codice.

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, 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 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 Account solo 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 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 Gestisciselezionare Autenticazione.
2. Nella pagina configurazioni della piattaforma , selezionare Aggiungi una piattaformae quindi selezionare l'opzione SPA.
3. Per gli URI di reindirizzamento immettere http://localhost:3000.
4. Selezionare Configura per salvare le modifiche.

React

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 piattaformae quindi selezionare 'opzione SPA.
3. Per gli URI di reindirizzamento immettere http://localhost:3000.
4. Selezionare Configura per salvare le modifiche.

Angular

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:4200.
4. Selezionare Configura per salvare le modifiche.

Blazor

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

1. In Gestisciselezionare Autenticazione.
2. Selezionare nella pagina configurazioni della piattaforma, Aggiungi una piattaformae 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-javascript.git
  

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

React

• 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
  

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

Angular

• 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 del .zip. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Blazor

• 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.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, contenente l'esempio.

2. Aprire vanillajs-spa/App/public/authConfig.js e aggiornare i valori seguenti con le informazioni registrate nel centro di amministrazione.

   /**
    * 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 
    */
   const msalConfig = {
       auth: {
   
            // WORKFORCE TENANT
            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
            // EXTERNAL TENANT
            // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
           redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
           navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
       },
       cache: {
           cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
           storeAuthStateInCookie: false, // set this to true if you have to support IE
       },
       system: {
           loggerOptions: {
               loggerCallback: (level, message, containsPii) => {
                   if (containsPii) {
                       return;
                   }
                   switch (level) {
                       case msal.LogLevel.Error:
                           console.error(message);
                           return;
                       case msal.LogLevel.Info:
                           console.info(message);
                           return;
                       case msal.LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case msal.LogLevel.Warning:
                           console.warn(message);
                           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://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   const loginRequest = {
       scopes: ["User.Read"],
   };
   
   /**
    * An optional silentRequest object can be used to achieve silent SSO
    * between applications by providing a "login_hint" property.
    */
   
   // const silentRequest = {
   //   scopes: ["openid", "profile"],
   //   loginHint: "example@domain.net"
   // };
   
   // exporting config object for jest
   if (typeof exports !== 'undefined') {
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
   }
   

   • clientId: identificatore dell'applicazione, detto anche client. Sostituire il testo tra virgolette con il valore dell'ID applicazione (client) registrato in precedenza.
   • authority: L'autorità è un URL che indica una directory da cui MSAL può ottenere 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.

React

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

2. Aprire react-spa/src/authConfig.js e aggiornare i valori seguenti con le informazioni registrate nell'interfaccia 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. Sostituire il testo tra virgolette con l'ID applicazione (client) e il valore registrato in precedenza.
   • authority: L'autorità è un URL che indica una directory da cui 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.

Angular

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

2. Aprire angular-spa/src/app/app.module.ts e aggiornare i valori seguenti con le informazioni registrate nell'interfaccia di amministrazione.

   // Required for Angular multi-browser support
   import { BrowserModule } from '@angular/platform-browser';
   
   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required modules and components for this application
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ProfileComponent } from './profile/profile.component';
   import { HomeComponent } from './home/home.component';
   
   // HTTP modules required by MSAL
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   // Required for MSAL
   import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
   import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
   
   const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
   
   export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
       auth: {
         // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
         clientId: "Enter_the_Application_Id_Here",
         // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         // Must be the same redirectUri as what was provided in your app registration.
         redirectUri: "http://localhost:4200",
       },
       cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE
       }
     });
   }
   
   // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
   export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
     const protectedResourceMap = new Map<string, Array<string>>();
     protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
   
     return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
   
   // MSAL Guard is required to protect routes and require authentication before accessing protected routes
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return { 
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: ['user.read']
       }
     };
   }
   
   // Create an NgModule that contains the routes and MSAL configurations
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProfileComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule,
       MsalModule
     ],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MsalInterceptor,
         multi: true
       },
       {
         provide: MSAL_INSTANCE,
         useFactory: MSALInstanceFactory
       },
       {
         provide: MSAL_GUARD_CONFIG,
         useFactory: MSALGuardConfigFactory
       },
       {
         provide: MSAL_INTERCEPTOR_CONFIG,
         useFactory: MSALInterceptorConfigFactory
       },
       MsalService,
       MsalGuard,
       MsalBroadcastService
     ],
     bootstrap: [AppComponent, MsalRedirectComponent]
   })
   export class AppModule { }
   

   • clientId: identificatore dell'applicazione, detto anche client. Sostituire il testo tra virgolette con l'ID dell'applicazione (client) con il valore registrato in precedenza.
   • authority: L'autorità è un URL che indica una directory da cui MSAL può richiedere dei token. Sostituire Enter_the_Tenant_Info_Here con il valore dell'ID del directory (tenant) 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.

Blazor

1. Nell'IDE aprire la cartella del progetto ms-identity-docs-code-dotnet/spa-blazor-wasm, contenente l'esempio.

2. Aprire spa-blazor-wasm/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 l'ID directory (tenant) valore registrato in precedenza.
   • ClientId: identificatore dell'applicazione, detto anche client. Sostituire il testo tra virgolette con l'ID applicazione (client) che è stato registrato in precedenza.

Avviare l'applicazione ed effettuare l'accesso e il logout

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:

   cd vanillajs-spa/App
   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. 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.

   

React

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:

   cd react-spa/App
   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 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.

   

Angular

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:

   cd angular-spa/App
   npm install
   npm start
   

2. Copiare l'URL https visualizzato nel terminale, ad esempio https://localhost:4200e incollarlo in una barra degli indirizzi del 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.

   

Blazor

Eseguire il progetto con un server Web usando dotnet:

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

   cd spa-blazor-wasm
   dotnet workload install wasm-tools
   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.

   

Prerequisiti

• Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
  • Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code. (scelta consigliata)
  • Creare un nuovo tenant esterno nell'interfaccia di amministrazione di Microsoft Entra.
• Questo account Azure deve avere le autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
  • Amministratore dell'applicazione
  • Sviluppatore di applicazioni
  • Amministratore di applicazioni cloud.
• Node.js.
• Visual Studio Code o un altro editor di codice.

React

• Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
  • Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code. (scelta consigliata)
  • Creare un nuovo tenant esterno nel centro di amministrazione di Microsoft Entra.
• Questo account Azure deve avere le autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
  • Amministratore dell'applicazione
  • Sviluppatore di applicazioni
  • Amministratore di applicazioni cloud.
• Node.js.
• Visual Studio Code o un altro editor di codice.

Angular

• Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
  • Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code. (scelta consigliata)
  • Creare un nuovo tenant esterno nel Centro di amministrazione di Microsoft Entra.
• Questo account Azure deve avere le autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
  • Amministratore dell'applicazione
  • Sviluppatore di applicazioni
  • Amministratore di applicazioni cloud.
• Node.js.
• Visual Studio Code o un altro editor di codice.

Registrare l'applicazione e gli identificatori di record

Per consentire all'applicazione di accedere agli utenti con Microsoft Entra, è necessario che microsoft Entra External ID sia consapevole dell'applicazione creata. La registrazione dell'app stabilisce una relazione di trust tra l'app e Microsoft Entra. Quando si registra un'applicazione, l'ID esterno genera un identificatore univoco noto come ID applicazione (client) , un valore usato per identificare l'app durante la creazione di richieste di autenticazione.

I passaggi seguenti illustrano come registrare l'app nell'interfaccia di amministrazione di Microsoft Entra:

1. Accedi all'interfaccia di amministrazione di Microsoft Entra come almeno uno sviluppatore di applicazioni .

2. Se si ha accesso a più tenant, usare l'icona Impostazioni nel menu superiore per passare al tenant esterno dal menu Directory + sottoscrizioni.

3. Passare a Identity>Applications>Registrazioni di app.

4. Selezionare + Nuova registrazione.

5. Nella pagina Registrare un'applicazione visualizzata;

   1. Immettere un'applicazione significativa Nome visualizzata agli utenti dell'app, ad esempio ciam-client-app.
   2. In Tipi di account supportati, selezionare solo gli account in questa directory organizzativa.

6. Selezionare Registra.

7. Il riquadro Panoramica dell'applicazione viene visualizzato dopo la registrazione riuscita. Registrare l'ID dell'applicazione (client) da usare nel codice sorgente dell'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:3000.
4. Selezionare Configura per salvare le modifiche.

React

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 piattaformae quindi selezionare l'opzione SPA.
3. Per gli URI di reindirizzamento immettere http://localhost:3000.
4. Selezionare Configura per salvare le modifiche.

Angular

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 piattaformae quindi selezionare l'opzione "SPA".
3. Per gli URI di reindirizzamento inserire http://localhost:4200.
4. Selezionare Configura per salvare le modifiche.

Concedere il consenso dell'amministratore

Dopo aver registrato l'applicazione, viene assegnata l'autorizzazione User.Read. Tuttavia, poiché il tenant è un tenant esterno, gli utenti del cliente stessi non possono fornire il consenso a questa autorizzazione. L'amministratore del tenant deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

1. Nella pagina registrazioni dell'app selezionare l'applicazione creata( ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.

2. In Gestisciselezionare autorizzazioni API .

   1. Selezionare Concedi autorizzazione amministrativa per <il nome del tenant>, quindi selezionare Sì.
   2. Selezionare Aggiorna, quindi verificare che Concesso per <il nome del tenant> appaia sotto Stato per il permesso.

Creare un flusso utente

Per consentire agli utenti del cliente di visualizzare l'esperienza di iscrizione o di accesso quando usano l'app, è necessario associare l'app a un flusso utente. Anche se molte applicazioni possono essere associate al flusso utente, una singola applicazione può essere associata solo a un flusso utente.

1. Nel menu della barra laterale, seleziona Identity.

2. Selezionare Identità Esterne, quindi Flussi Utente.

3. Nella pagina Flussi utente selezionare il nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.

4. Sotto Uso, selezionare Applicazioni.

5. Selezionare Aggiungi applicazione.

6. Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app o usare la casella di ricerca per trovare l'applicazione e quindi selezionarla.

7. Scegliere Selezionare.

Dopo aver associato l'app a un flusso utente, è possibile testare il flusso utente simulando l'esperienza di iscrizione o di accesso di un utente con l'applicazione dall'interfaccia di amministrazione di Microsoft Entra. A tale scopo, usare i passaggi descritti in Testare il flusso utente di iscrizione e accesso.

Associare la SPA al flusso utente

Per consentire agli utenti del cliente di visualizzare l'esperienza di iscrizione o di accesso quando usano l'app, è necessario associare l'app a un flusso utente. Anche se molte applicazioni possono essere associate al flusso utente, una singola applicazione può essere associata solo a un flusso utente.

1. Nel menu della barra laterale selezionare Identity.

2. Seleziona Identità Esterne, quindi Flussi Utente.

3. Nella pagina Flussi utente selezionare il nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.

4. In Usaselezionare Applicazioni.

5. Selezionare Aggiungi applicazione.

6. Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app o usare la casella di ricerca per trovare l'applicazione e quindi selezionarla.

7. Scegliere Selezionare.

Dopo aver associato l'app a un flusso utente, è possibile testare il flusso utente simulando l'esperienza di iscrizione o di accesso di un utente con l'applicazione dall'interfaccia di amministrazione di Microsoft Entra. A tale scopo, usare i passaggi descritti in Testare il flusso utente di iscrizione e accesso.

Clonare o scaricare l'SPA 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-ciam-javascript-tutorial.git
  

• Scaricare l'esempio. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

React

• 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-ciam-javascript-tutorial.git
  

• Scaricare l'esempio. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Angular

• 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-ciam-javascript-tutorial.git
  

• Scaricare l'esempio. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Configurare la SPA di esempio

JavaScript

1. Aprire App/public/authConfig.js e sostituire quanto segue con i valori ottenuti dall'interfaccia di amministrazione di Microsoft Entra:

   • Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell'app registrata in precedenza.
   • Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non si dispone del nome del tenant, scopri come leggere i dettagli del tenant.

2. Salvare il file.

React

1. Aprire SPA\src\authConfig.js e sostituire quanto segue con i valori ottenuti dall'interfaccia di amministrazione di Microsoft Entra:

   • Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell'app registrata in precedenza.
   • Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il nome del locatario, scopri come leggere i dettagli relativi al locatario.

2. Salvare il file.

Angular

1. Aprire SPA/src/app/auth-config.ts e sostituire quanto segue con i valori ottenuti dall'interfaccia di amministrazione di Microsoft Entra:

   • Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell'app registrata in precedenza.
   • Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non si ha il nome del tenant, scopri come leggere i dettagli del tenant.

2. Salvare il file.

Esegui il progetto e accedi

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

   cd 1-Authentication\0-sign-in-vanillajs\App
   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. Accedere con un account registrato nel tenant.

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

   

React

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

   cd 1-Authentication\1-sign-in-react\SPA
   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. Effettuare l'accesso con un account registrato presso il tenant esterno.

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

Angular

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

   cd 1-Authentication\2-sign-in-angular\SPA
   npm install
   npm start
   

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

3. Accedere con un account registrato presso il tenant esterno.

4. 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 nella pagina e selezionalo.
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.

Contenuto correlato

• Guida introduttiva: Proteggere un'API web ASP.NET Core con Microsoft Identity Platform.
• Scopri di più costruendo un'applicazione a pagina singola React che consente agli utenti di accedere, come spiegato nella seguente serie di esercitazioni in più parti.
• Abilitare la reimpostazione della password.
• Personalizzare il marchio predefinito.
• Configurare l'accesso con Google.