Quickstart: Gebruikers aanmelden in een app met één pagina (SPA) en de Microsoft Graph API aanroepen
Artikel
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.
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
De toepassing registreren en identificaties vastleggen
Als u de registratie wilt voltooien, geeft u de toepassing een naam op, geeft u de ondersteunde accounttypen op en voegt u een omleidings-URI toe. Nadat de toepassing is geregistreerd, worden in het deelvenster Overzicht de id's weergegeven die nodig zijn in de broncode van de toepassing.
Als u toegang hebt tot meerdere tenants, gebruikt u het pictogram Instellingen in het bovenste menu om over te schakelen naar de tenant waarin u de toepassing wilt registreren in het menu Mappen en abonnementen.
Blader naar Identity>Applications>App-registratiesen selecteer Nieuwe registratie.
Voer een Naam in voor de toepassing, zoals identity-client-spa.
Voor ondersteunde accounttypenselecteert u Accounts in deze organisatiemap alleen. Voor informatie over verschillende accounttypen selecteert u de Help me kiezen optie.
Selecteer registreren.
Het deelvenster Overzicht van de toepassing wordt weergegeven wanneer de registratie is voltooid. Noteer de Directory-id (tenant) en de -toepassings-id (client)-id die moet worden gebruikt in de broncode van uw toepassing.
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:
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:
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:
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:
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
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
scopes: ["User.Read"],
};
/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/
// const silentRequest = {
// scopes: ["openid", "profile"],
// loginHint: "example@domain.net"
// };
// exporting config object for jest
if (typeof exports !== 'undefined') {
module.exports = {
msalConfig: msalConfig,
loginRequest: loginRequest,
};
module.exports = {
msalConfig: msalConfig,
loginRequest: loginRequest,
};
}
clientId : 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 toepassings-id (client) waarde die eerder is vastgelegd.
authority: De instantie is een URL die een directory aangeeft waar MSAL tokens van 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 toepassings-id (client) waarde die eerder is vastgelegd.
authority: De instantie is een URL die een map aangeeft 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 een directory aangeeft van 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 (client) ID waarde die eerder is vastgelegd.
De toepassing uitvoeren en u aanmelden en afmelden
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.
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
Als u wilt dat uw toepassing gebruikers kan aanmelden met Microsoft Entra, moet Microsoft Entra External ID op de hoogte worden gesteld van de toepassing die u maakt. De app-registratie brengt een vertrouwensrelatie tot stand tussen de app en Microsoft Entra. Wanneer u een toepassing registreert, genereert Externe ID een unieke identifier die bekend staat als een toepassing (client) ID, een waarde die wordt gebruikt om uw app te identificeren bij het maken van verificatieaanvragen.
De volgende stappen laten zien hoe u uw app registreert in het Microsoft Entra-beheercentrum:
Als u toegang hebt tot meerdere tenants, gebruikt u het pictogram Instellingen in het bovenste menu om naar uw externe tenant over te schakelen vanuit het menu Mappen en abonnementen.
Blader naar Identity>Applications>App-registraties.
Selecteer + Nieuwe registratie.
In de Een toepassing registreren pagina die wordt weergegeven;
Voer een zinvolle toepassing in Naam die wordt weergegeven aan gebruikers van de app, bijvoorbeeld ciam-client-app.
Selecteer onder Ondersteunde accounttypenalleen Accounts in deze organisatiemap.
Selecteer registreren.
Het paneel Overzicht van de applicatie wordt weergegeven na succesvolle registratie. Noteer de ID van de -toepassing (cliënt) zodat deze in de broncode van uw toepassing kan worden gebruikt.
Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:
Selecteer onder Beheerde optie Verificatie.
Selecteer op de pagina PlatformconfiguratiesEen platform toevoegenen selecteer SPA optie.
Voer voor de omleidings-URI'shttp://localhost:3000in.
Selecteer en configureer om uw wijzigingen op te slaan.
Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:
Selecteer onder beheren, verificatie.
Selecteer op de pagina Platformconfiguraties de optie Een platform toevoegenen selecteer vervolgens de optie SPA.
Voor de doorverwijs-URI's , voer http://localhost:3000in.
Selecteer Configureren om uw wijzigingen op te slaan.
Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:
Onder Beheren, selecteer Verificatie.
Selecteer op de pagina Platformconfiguraties de optie Platform toevoegenen kies vervolgens de optie SPA (single-page applicatie).
Voer voor de omleidings-URI'shttp://localhost:4200in.
Selecteer en configureer dan om uw wijzigingen op te slaan.
Beheerderstoestemming verlenen
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.
Selecteer Verleen toestemming van de beheerder voor <uw tenantnaam>, en selecteer vervolgens Ja.
Selecteer Vernieuwenen controleer of verleend voor <uw tenantnaam> wordt weergegeven onder Status voor de machtiging.
Een gebruikersstroom maken
Als de klantgebruikers de aanmeldings- of aanmeldingservaring willen zien wanneer ze uw app gebruiken, moet u uw app koppelen aan een gebruikersstroom. Hoewel veel toepassingen aan uw gebruikersstroom kunnen worden gekoppeld, kan één toepassing slechts worden gekoppeld aan één gebruikersstroom.
Selecteer op deze pagina Gebruikersstromen de gebruikersstroomnaam die u eerder hebt gemaakt, bijvoorbeeld SignInSignUpSample.
Onder gebruiken, selecteer Toepassingen.
Selecteer Toepassing toevoegen.
Selecteer de toepassing in de lijst, zoals ciam-client-app of gebruik het zoekvak om de toepassing te zoeken en selecteer deze.
Kies Selecteer.
Zodra u uw app aan een gebruikersstroom hebt gekoppeld, kunt u uw gebruikersstroom testen door de registratie- of aanmeldingservaring van een gebruiker te simuleren met uw toepassing vanuit het Microsoft Entra-beheercentrum. Hiervoor gebruikt u de stappen in De gebruikersstroom voor registratie en aanmelding testen.
De SPA koppelen aan de gebruikersstroom
Als de klantgebruikers de aanmeldings- of aanmeldingservaring willen zien wanneer ze uw app gebruiken, moet u uw app koppelen aan een gebruikersstroom. Hoewel veel toepassingen aan uw gebruikersstroom kunnen worden gekoppeld, kan één toepassing slechts worden gekoppeld aan één gebruikersstroom.
Selecteer op de pagina Gebruikersstromen de naam van de gebruikersstroom u eerder hebt gemaakt, bijvoorbeeld SignInSignUpSample-.
Onder Gebruik, selecteer Toepassingen.
Selecteer Toepassing toevoegen.
Selecteer de toepassing in de lijst, zoals ciam-client-app of gebruik het zoekvak om de toepassing te zoeken en selecteer deze.
Kies Selecteer.
Zodra u uw app aan een gebruikersstroom hebt gekoppeld, kunt u uw gebruikersstroom testen door de registratie- of aanmeldingservaring van een gebruiker te simuleren met uw toepassing vanuit het Microsoft Entra-beheercentrum. Hiervoor gebruikt u de stappen in De gebruikersstroom voor registratie en aanmelding testen.
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:
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:
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:
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 geen tenantnaam hebt, leert u hoe u uw tenantgegevenskunt 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, leert u hoe u uw tenantgegevens kunt lezen.
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.
in het bovenste menu om over te schakelen naar de tenant waarin u de toepassing wilt registreren in het menu Mappen en abonnementen.
in het bovenste menu om naar uw externe tenant over te schakelen vanuit het menu Mappen en abonnementen.
