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

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:3000/
• Node.js

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:3000/
• Node.js

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungere l'URI di reindirizzamento seguente usando la configurazione della piattaforma dell'applicazione a pagina singola . Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:4200/
• Node.js

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:5000/authentication/login-callback.
• .NET SDK

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

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

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

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

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: {
            clientId: "Enter_the_Application_Id_Here",
            // 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
    */
   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: "[email protected]"
   // };
   
   // exporting config object for jest
   if (typeof exports !== 'undefined') {
       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 il valore ID 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.

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 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 il valore ID 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.

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 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 il valore ID 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.

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ò ottenere 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 dell'ID applicazione (client) registrato in precedenza.

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.

   

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

   

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.

   

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.

   

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:3000/
• Aggiungere la propria applicazione al flusso utente
• Node.js

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:3000/
• Aggiungere la propria applicazione al flusso utente
• Node.js

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:4200/
• Aggiungere la propria applicazione al flusso utente
• Node.js

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

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

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

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.

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 si dispone del nome del tenant, scopri come leggere i dettagli del tenant.

2. Salvare il file.

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 dispone del nome del tenant, scopri come leggere i dettagli del tenant.

2. Salvare il file.

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. Accedi con un account registrato al locatario.

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.

   

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.

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