Quickstart: Gebruikers aanmelden in een app met één pagina (SPA) en de Microsoft Graph API aanroepen

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum, geconfigureerd voor alleen accounts in deze organisatorische directory. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI's toe met behulp van de configuratie van het toepassingsplatform met één pagina . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost:3000/
• Node.js

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum, geconfigureerd voor alleen accounts in deze organisatorische directory. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI's toe met behulp van de configuratie van het toepassingsplatform met één pagina . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost:3000/
• Node.js

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum, geconfigureerd voor alleen accounts in deze organisatorische directory. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI toe met behulp van de configuratie van het toepassingsplatform met één pagina . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost:4200/
• Node.js

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum, geconfigureerd voor alleen accounts in deze organisatorische directory. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI's toe met behulp van de configuratie van het toepassingsplatform met één pagina . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost:5000/authentication/login-callback.
• .NET SDK

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

1. Open in uw IDE de projectmap ms-identity-docs-code-javascriptmet het voorbeeld.

2. Open vanillajs-spa/App/public/authConfig.js en werk de volgende waarden bij met de informatie die is vastgelegd in het beheercentrum.

   /**
    * 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://free.blessedness.top/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 : de id van de toepassing, ook wel de client genoemd. Vervang de tekst tussen aanhalingstekens door de applicatie-id (client) waarde die eerder vastgelegd is.
   • authority: de autoriteit is een URL die verwijst naar een directory waaruit MSAL tokens kan aanvragen. Vervang Enter_the_Tenant_Info_Here door de Directory-id (tenant) waarde die eerder is vastgelegd.
   • redirectUri - de omleidings-URI van de toepassing. Vervang indien nodig de tekst tussen aanhalingstekens door de omleidings-URI die eerder is vastgelegd.

1. Open in uw IDE de projectmap ms-identity-docs-code-javascript/react-spa, met het voorbeeld.

2. Open react-spa/src/authConfig.js en werk de volgende waarden bij met de informatie die is vastgelegd in het beheercentrum.

   /*
    * 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 : de id van de toepassing, ook wel de client genoemd. Vervang de tekst tussen aanhalingstekens door de applicatie-id (client) waarde die eerder vastgelegd is.
   • authority: de autoriteit is een URL die verwijst naar een directory waaruit MSAL tokens kan aanvragen. Vervang Enter_the_Tenant_Info_Here door de Directory-id (tenant) waarde die eerder is vastgelegd.
   • redirectUri - de omleidings-URI van de toepassing. Vervang indien nodig de tekst tussen aanhalingstekens door de omleidings-URI die eerder is vastgelegd.

1. Open in uw IDE de projectmap ms-identity-docs-code-javascript/angular-spamet het voorbeeld.

2. Open angular-spa/src/app/app.module.ts en werk de volgende waarden bij met de informatie die is vastgelegd in het beheercentrum.

   // 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 : de id van de toepassing, ook wel de client genoemd. Vervang de tekst tussen aanhalingstekens door de applicatie-id (client) waarde die eerder vastgelegd is.
   • authority: de autoriteit is een URL die verwijst naar een directory waaruit MSAL tokens kan aanvragen. Vervang Enter_the_Tenant_Info_Here door de Directory-id (tenant) waarde die eerder is vastgelegd.
   • redirectUri - de omleidings-URI van de toepassing. Vervang indien nodig de tekst tussen aanhalingstekens door de omleidings-URI die eerder is vastgelegd.

1. Open in uw IDE de projectmap ms-identity-docs-code-dotnet/spa-blazor-wasm, met het voorbeeld.

2. Open spa-blazor-wasm/wwwroot/appsettings.json en werk de volgende waarden bij met de informatie die eerder in het beheercentrum is vastgelegd.

   {
     "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: de autoriteit is een URL die verwijst naar een directory waaruit MSAL tokens kan aanvragen. Vervang Enter_the_Tenant_Info_Here door de Directory-id (tenant) waarde die eerder is vastgelegd.
   • ClientId : de id van de toepassing, ook wel de client genoemd. Vervang de tekst tussen aanhalingstekens door de applicatie-id (client) waarde die eerder vastgelegd is.

Voer het project uit met een webserver met behulp van Node.js:

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:3000en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Volg de stappen en voer de benodigde gegevens in om u aan te melden met uw Microsoft-account. U wordt gevraagd om een e-mailadres, zodat een eenmalige wachtwoordcode naar u kan worden verzonden. Voer de code in wanneer u hierom wordt gevraagd.

4. De toepassing vraagt toestemming om toegang te behouden tot gegevens die u toegang hebt gegeven tot en om u aan te melden en uw profiel te lezen. Selecteer Accepteren. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.

   

Voer het project uit met een webserver met behulp van Node.js:

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

   cd react-spa
   npm install
   npm start
   

2. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:3000en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Volg de stappen en voer de benodigde gegevens in om u aan te melden met uw Microsoft-account. U wordt gevraagd om een e-mailadres, zodat er een eenmalige wachtwoordcode naar u kan worden verzonden. Voer de code in wanneer u hierom wordt gevraagd.

4. De toepassing vraagt toestemming om toegang te behouden tot gegevens waar u toegang tot hebt verleend, en om u aan te melden en uw profiel te lezen. Selecteer Accepteren. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.

   

Voer het project uit met een webserver met behulp van Node.js:

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

   cd angular-spa
   npm install
   npm start
   

2. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:4200en plak deze in een adresbalk van de browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Volg de stappen en voer de benodigde gegevens in om u aan te melden met uw Microsoft-account. U wordt gevraagd om een e-mailadres, zodat een eenmalige wachtwoordcode naar u kan worden verzonden. Voer de code in wanneer u hierom wordt gevraagd.

4. De toepassing vraagt toestemming om toegang te behouden tot gegevens die u toegang hebt gegeven tot en om u aan te melden en uw profiel te lezen. Selecteer Accepteren. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.

   

Voer het project uit met een webserver met behulp van dotnet:

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

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

2. Kopieer de http-URL die wordt weergegeven in de terminal, bijvoorbeeld http://localhost:5000en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Volg de stappen en voer de benodigde gegevens in om u aan te melden met uw Microsoft-account. U wordt gevraagd om een e-mailadres, zodat een eenmalige wachtwoordcode naar u kan worden verzonden. Voer de code in wanneer u hierom wordt gevraagd.

4. De toepassing vraagt toestemming om toegang te behouden tot gegevens die u toegang hebt gegeven tot en om u aan te melden en uw profiel te lezen. Selecteer Accepteren. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.

   

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum, geconfigureerd voor alleen accounts in deze organisatorische directory. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI's toe met behulp van de configuratie van het toepassingsplatform met één pagina . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost:3000/
• Uw toepassing toevoegen aan de gebruikersstroom
• Node.js

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum, geconfigureerd voor alleen accounts in deze organisatorische directory. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI's toe met behulp van de configuratie van het toepassingsplatform met één pagina . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost:3000/
• Uw toepassing toevoegen aan de gebruikersstroom
• Node.js

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum, geconfigureerd voor alleen accounts in deze organisatorische directory. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI's toe met behulp van de configuratie van het toepassingsplatform met één pagina . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost:4200/
• Uw toepassing toevoegen aan de gebruikersstroom
• Node.js

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Het voorbeelddownloaden. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Het voorbeelddownloaden. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Het voorbeelddownloaden. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

1. Open App/public/authConfig.js en vervang het volgende door de waarden die zijn verkregen uit het Microsoft Entra-beheercentrum:

   • Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.
   • Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, ontdek dan hoe u uw tenantgegevens kunt lezen.

2. Sla het bestand op.

1. Open SPA\src\authConfig.js en vervang het volgende door de waarden die zijn verkregen uit het Microsoft Entra-beheercentrum:

   • Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.
   • Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, ontdek dan hoe u uw tenantgegevens kunt lezen.

2. Sla het bestand op.

1. Open SPA/src/app/auth-config.ts en vervang het volgende door de waarden die zijn verkregen uit het Microsoft Entra-beheercentrum:

   • Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.
   • Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, ontdek dan hoe u uw tenantgegevens kunt lezen.

2. Sla het bestand op.

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

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

2. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:3000en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Meld u aan met een account dat is geregistreerd bij de tenant.

4. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.

   

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

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

2. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:3000en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Meld u aan met een account dat is geregistreerd bij de externe tenant.

4. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

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

2. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:4200en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Meld u aan met een account dat is geregistreerd bij de externe tenant.

4. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.