Quickstart: Aanmelden bij een Single Page Applicatie en een API aanroepen - Microsoft identity platform

Artikel
03/26/2025

In deze quickstart gebruikt u een voorbeeld-app met één pagina (SPA) om u te laten zien hoe u gebruikers kunt aanmelden met behulp van de autorisatiecodestroom met Proof Key for Code Exchange (PKCE) en de Microsoft Graph API aanroept. In het voorbeeld wordt de Microsoft Authentication Library gebruikt om verificatie af te handelen.

Voorwaarden

Een Azure-account met een actief abonnement. Als u er nog geen hebt, maak gratis een account aan.
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
- Toepassingsbeheerder
- Toepassingsontwikkelaar
- Cloudtoepassingsbeheerder
Een personeelstenant. U kunt uw standaarddirectory gebruiken of een nieuwe tenant aanmaken.
Visual Studio Code of een andere code-editor.

Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app op de overzichtspagina. Zie Een toepassing registrerenvoor meer informatie.
- Naam: identity-client-spa
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Platform-configuratie: Single-Page Applicatie (SPA)
- Doorverwijs-URI: http://localhost:3000/
Node.js

Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app Overzicht pagina en noteer de id's van de app Overzicht pagina. Zie Een toepassing registrerenvoor meer informatie.
- Naam: identity-client-spa
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Platform-configuratie: single-page applicatie
- Doorverwijs-URI: http://localhost:3000/
Node.js

Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app Overzicht pagina en noteer de id's van de app Overzicht pagina. Zie Een toepassing registrerenvoor meer informatie.
- Naam: identity-client-spa
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Platform-configuratie: Single Page Application (SPA)
- Doorverwijs-URI: http://localhost:4200/
Node.js

Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app Overzicht pagina en noteer de id's van de app Overzicht pagina. Zie Een toepassing registrerenvoor meer informatie.
- Naam: identity-client-spa
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Platform-configuratie: single-page applicatie (SPA)
- Doorverwijs-URI: http://localhost:5000/authentication/login-callback.
.NET SDK

De voorbeeldtoepassing klonen of downloaden

Als u de voorbeeldtoepassing wilt verkrijgen, kunt u deze klonen vanuit GitHub of downloaden als een .zip-bestand.

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.

Het project configureren

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

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: {

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

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

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.

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

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.

Open in uw IDE de projectmap ms-identity-docs-code-dotnet/spa-blazor-wasm, met het voorbeeld.
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:

Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:
```
cd vanillajs-spa/App
npm install
npm start
```
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.
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.
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:

Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:
```
cd react-spa/App
npm install
npm start
```
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.
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.
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:

Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:
```
cd angular-spa/App
npm install
npm start
```
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.
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.
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:

Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:
```
cd spa-blazor-wasm
dotnet workload install wasm-tools
dotnet run
```
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.
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.
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.

Voorwaarden

Een Azure-account met een actief abonnement. Als u er nog geen hebt, maak gratis een account aan.
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
- Toepassingsbeheerder
- Toepassingsontwikkelaar
- Cloudtoepassingsbeheerder
Een externe tenant. Kies een van de volgende methoden om er een te maken:
- Gebruik de externe id-extensie van Microsoft Entra om rechtstreeks in Visual Studio Code een externe tenant in te stellen. (aanbevolen)
- maak een nieuwe externe tenant in het Microsoft Entra-beheercentrum.
Een gebruikersstroom. Voor meer informatie, raadpleeg om zelfregistratie gebruikersstromen te maken voor apps in externe tenants. Deze gebruikersstroom kan worden gebruikt voor meerdere toepassingen.
Visual Studio Code of een andere code-editor.

Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app op de overzichtspagina. Zie Een toepassing registrerenvoor meer informatie.
- Naam: identity-client-spa
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Platform-configuratie: Single Page Application (SPA)
- Doorverwijs-URI: http://localhost:3000/
Uw toepassing toevoegen aan de gebruikersstroom
Node.js

Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app op de overzichtspagina. Zie Een toepassing registrerenvoor meer informatie.
- Naam: identity-client-spa
- Ondersteunde accounttypen: accounts in dit organisatieadresboek (alleen Single-tenant)
- Platform-configuratie: Single-page applicatie (SPA)
- Doorverwijs-URI: http://localhost:3000/
Uw toepassing toevoegen aan de gebruikersstroom
Node.js

Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app op de overzichtspagina. Zie Een toepassing registrerenvoor meer informatie.
- Naam: identity-client-spa
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Platform-configuratie: Single-page application (SPA)
- Doorverwijs-URI: http://localhost:4200/
Uw toepassing toevoegen aan de gebruikersstroom
Node.js

Nadat u uw toepassing hebt geregistreerd, wordt de machtiging User.Read toegewezen. Omdat de tenant echter een externe tenant is, kunnen de gebruikers van de klant zelf geen toestemming geven voor deze machtiging. U als tenantbeheerder moet toestemming geven voor deze machtiging namens alle gebruikers in de tenant:

Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals ciam-client-app) om de pagina Overzicht te openen.
Selecteer onder BeherenAPI-machtigingen.
1. Selecteer Verleen toestemming van de beheerder voor <uw tenantnaam>, en selecteer vervolgens Ja.
2. Selecteer Vernieuwen, en controleer of Verleend aan <uw tenantnaam> wordt weergegeven onder Status voor de machtiging.

Voorbeeld SPA klonen of downloaden

Als u de voorbeeldtoepassing wilt verkrijgen, kunt u deze klonen vanuit GitHub of downloaden als een .zip-bestand.

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.

De voorbeeld-SPA configureren

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.
Sla het bestand op.

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.
Sla het bestand op.

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.
Sla het bestand op.

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
```
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.
Meld u aan met een account dat is geregistreerd bij de tenant.
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 de volgende opdrachten uit vanuit de projectmap om de server te starten:
```
cd 1-Authentication\1-sign-in-react\SPA
npm install
npm start
```
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.
Meld u aan met een account dat is geregistreerd bij de externe tenant.
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 de volgende opdrachten uit vanuit de projectmap om de server te starten:
```
cd 1-Authentication\2-sign-in-angular\SPA
npm install
npm start
```
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.
Meld u aan met een account dat is geregistreerd bij de externe tenant.
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.

Afmelden bij de toepassing

Zoek de knop Afmelden op de pagina en selecteer deze.
U wordt gevraagd een account te kiezen waaruit u zich wilt afmelden. Selecteer het account dat u hebt gebruikt om u aan te melden.

Er verschijnt een bericht dat aangeeft dat u zich hebt afgemeld. U kunt nu het browservenster sluiten.

Delen via

Voorwaarden

De voorbeeldtoepassing klonen of downloaden

Het project configureren

Voorwaarden

Voorbeeld SPA klonen of downloaden

De voorbeeld-SPA configureren

Afmelden bij de toepassing

Feedback

Aanvullende resources

Delen via

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

Voorwaarden

De voorbeeldtoepassing klonen of downloaden

Het project configureren

De toepassing uitvoeren en u aanmelden en afmelden

Voorwaarden

Beheerderstoestemming verlenen

Voorbeeld SPA klonen of downloaden

De voorbeeld-SPA configureren

Uw project uitvoeren en u aanmelden

Afmelden bij de toepassing

Verwante inhoud

Feedback

Aanvullende resources