Démarrage rapide : connecter les utilisateurs dans une application monopage (SPA) et appelez l’API Microsoft Graph

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:3000/
• Node.JS

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:3000/
• Node.JS

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez l'URI de redirection suivant en utilisant la configuration de la plateforme d'application à page unique. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:4200/
• Node.JS

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:5000/authentication/login-callback.
• Kit de développement logiciel (SDK) .NET

• Pour cloner l’exemple, ouvrez une invite de commandes et accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

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

• Téléchargez le fichier zip. Extrayez-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

• Pour cloner l’exemple, ouvrez une invite de commandes et accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

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

• Téléchargez le fichier zip. Extrayez-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

• Pour cloner l’exemple, ouvrez une invite de commandes et accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

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

• Téléchargez le fichier zip. Extrayez-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

• Pour cloner l’exemple, ouvrez une invite de commandes et accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

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

• Téléchargez le fichier zip. Extrayez-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

1. Dans votre IDE, ouvrez le dossier du projet, ms-identity-docs-code-javascript, contenant l’exemple.

2. Ouvrez vanillajs-spa/App/public/authConfig.js et mettez à jour les valeurs suivantes avec les informations enregistrées dans le centre d’administration.

   /**
    * 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: "example@domain.net"
   // };
   
   // exporting config object for jest
   if (typeof exports !== 'undefined') {
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
   }
   

   • clientId : identificateur de l’application, également appelé client. Remplacez le texte entre guillemets par la valeur de l'ID d'application (client) enregistrée précédemment.
   • authority : l’autorité est une URL qui indique un répertoire à partir duquel MSAL peut demander des jetons. Remplacez Enter_the_Tenant_Info_Here par la valeur ID de répertoire (locataire) enregistrée précédemment.
   • redirectUri : URI de redirection de l’application. Si nécessaire, remplacez le texte entre guillemets par l’URI de redirection enregistré précédemment.

1. Dans votre IDE, ouvrez le dossier du projet, ms-identity-docs-code-javascript/react-spa, contenant l’exemple.

2. Ouvrez react-spa/src/authConfig.js et mettez à jour les valeurs suivantes avec les informations enregistrées dans le centre d’administration.

   /*
    * 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 : identificateur de l’application, également appelé client. Remplacez le texte entre guillemets par la valeur de l'ID d'application (client) enregistrée précédemment.
   • authority : l’autorité est une URL qui indique un répertoire à partir duquel MSAL peut demander des jetons. Remplacez Enter_the_Tenant_Info_Here par la valeur ID de répertoire (locataire) enregistrée précédemment.
   • redirectUri : URI de redirection de l’application. Si nécessaire, remplacez le texte entre guillemets par l’URI de redirection enregistré précédemment.

1. Dans votre IDE, ouvrez le dossier du projet, ms-identity-docs-code-javascript/angular-spa, contenant l’exemple.

2. Ouvrez angular-spa/src/app/app.module.ts et mettez à jour les valeurs suivantes avec les informations enregistrées dans le centre d’administration.

   // 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 : identificateur de l’application, également appelé client. Remplacez le texte entre guillemets par la valeur de l'ID d'application (client) enregistrée précédemment.
   • authority : l’autorité est une URL qui indique un répertoire à partir duquel MSAL peut demander des jetons. Remplacez Enter_the_Tenant_Info_Here par la valeur ID de répertoire (locataire) enregistrée précédemment.
   • redirectUri : URI de redirection de l’application. Si nécessaire, remplacez le texte entre guillemets par l’URI de redirection enregistré précédemment.

1. Dans votre IDE, ouvrez le dossier du projet, ms-identity-docs-code-dotnet/spa-blazor-wasm, contenant l’exemple.

2. Ouvrez spa-blazor-wasm/wwwroot/appsettings.json et mettez à jour les valeurs suivantes avec les informations enregistrées précédemment dans le centre d’administration.

   {
     "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é est une URL qui indique un répertoire à partir duquel MSAL peut demander des jetons. Remplacez Enter_the_Tenant_Info_Here par la valeur ID de répertoire (locataire) enregistrée précédemment.
   • ClientId : identificateur de l’application, également appelé client. Remplacez le texte entre guillemets par la valeur de l'ID d'application (client) enregistrée précédemment.

Exécutez le projet avec un serveur web en utilisant Node.js :

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:3000et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Suivez les étapes et entrez les détails nécessaires pour vous connecter avec votre compte Microsoft. Une adresse e-mail vous sera demandée afin qu’un code secret unique puisse vous être envoyé. Entrez le code lorsque vous y êtes invité.

4. L’application demande l’autorisation de conserver l’accès aux données à laquelle vous lui avez donné accès, et de vous connecter et de lire votre profil. Sélectionnez Accepter. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

   

Exécutez le projet avec un serveur web en utilisant Node.js :

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

   cd react-spa
   npm install
   npm start
   

2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:3000et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Suivez les étapes et entrez les détails nécessaires pour vous connecter avec votre compte Microsoft. Vous avez demandé une adresse e-mail afin qu’un code secret à usage unique puisse être envoyé à vous. Entrez le code lorsque vous y êtes invité.

4. L’application demande l’autorisation de maintenir l’accès aux données que vous lui avez accordées, et de vous connecter et de lire votre profil. Sélectionnez Accepter. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

   

Exécutez le projet avec un serveur web en utilisant Node.js :

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

   cd angular-spa
   npm install
   npm start
   

2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:4200et collez-la dans une barre d’adresses du navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Suivez les étapes et entrez les détails nécessaires pour vous connecter avec votre compte Microsoft. Une adresse e-mail vous sera demandée afin qu’un code secret unique puisse vous être envoyé. Entrez le code lorsque vous y êtes invité.

4. L’application demande l’autorisation de conserver l’accès aux données à laquelle vous lui avez donné accès, et de vous connecter et de lire votre profil. Sélectionnez Accepter. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

   

Exécutez le projet avec un serveur web à l’aide de dotnet :

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

   cd spa-blazor-wasm
   dotnet workload install wasm-tools
   dotnet run
   

2. Copiez l’URL http qui s’affiche dans le terminal, par exemple, http://localhost:5000et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Suivez les étapes et entrez les détails nécessaires pour vous connecter avec votre compte Microsoft. Une adresse e-mail vous sera demandée afin qu’un code secret unique puisse vous être envoyé. Entrez le code lorsque vous y êtes invité.

4. L’application demande l’autorisation de conserver l’accès aux données à laquelle vous lui avez donné accès, et de vous connecter et de lire votre profil. Sélectionnez Accepter. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

   

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:3000/
• Ajouter votre application au flux utilisateur
• Node.JS

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:3000/
• Ajouter votre application au flux utilisateur
• Node.JS

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:4200/
• Ajouter votre application au flux utilisateur
• Node.JS

• Pour cloner l’exemple, ouvrez une invite de commandes et accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Téléchargez l’exemple. Extrayez-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

• Pour cloner l’exemple, ouvrez une invite de commandes et accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Téléchargez l’exemple. Extrayez-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

• Pour cloner l’exemple, ouvrez une invite de commandes et accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Téléchargez l’exemple. Extrayez-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

1. Ouvrez et remplacez App/public/authConfig.js ce qui suit par les valeurs obtenues à partir du Centre d’administration Microsoft Entra :

   • Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application inscrite précédemment.
   • Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine du répertoire (locataire). Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez de quelle manière consulter les détails de votre locataire.

2. Enregistrez le fichier.

1. Ouvrez et remplacez SPA\src\authConfig.js ce qui suit par les valeurs obtenues à partir du Centre d’administration Microsoft Entra :

   • Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application inscrite précédemment.
   • Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine du répertoire (locataire). Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez de quelle manière consulter les détails de votre locataire.

2. Enregistrez le fichier.

1. Ouvrez et remplacez SPA/src/app/auth-config.ts ce qui suit par les valeurs obtenues à partir du Centre d’administration Microsoft Entra :

   • Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application inscrite précédemment.
   • Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine du répertoire (locataire). Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez de quelle manière consulter les détails de votre locataire.

2. Enregistrez le fichier.

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

   cd 1-Authentication\0-sign-in-vanillajs\App
   npm install
   npm start
   

2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:3000et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Connectez-vous avec un compte associé au client.

4. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

   

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

   cd 1-Authentication\1-sign-in-react\SPA
   npm install
   npm start
   

2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:3000et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Connectez-vous avec un compte enregistré auprès du locataire externe.

4. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

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

2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:4200et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Connectez-vous avec un compte enregistré auprès du locataire externe.

4. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.