Snabbstart: Logga in användare i en sida (SPA) och anropa Microsoft Graph API
Artikel
I den här snabbstarten använder du ett exempel på en ensidig app (SPA) för att visa hur du loggar in användare med hjälp av auktoriseringskodflöde med Proof Key for Code Exchange (PKCE) och för att anropa Microsoft Graph API. Exemplet använder Microsoft Authentication Library för att hantera autentisering.
Registrera applikationen och spela in identifierare
För att slutföra registreringen anger du ett namn för programmet, anger vilka kontotyper som stöds och lägger till en omdirigerings-URI. När programmet har registrerats översiktsfönstret visas de identifierare som behövs i programmets källkod.
Om du har åtkomst till flera klienter använder du ikonen Inställningar på den översta menyn för att växla till klientorganisationen där du vill registrera programmet från menyn Kataloger + prenumerationer.
Bläddra till Identity>Applications>App registrations, välj Ny registrering.
Ange ett namn för applikationen, till exempel identity-client-spa.
För kontotyper som stödsväljer du endast Konton i den här organisationskatalogen. Om du vill ha information om olika kontotyper väljer du alternativet Hjälp mig att välja.
Välj Registrera.
Programmets översiktsfönster visas när registreringen är klar. Anteckna katalog-ID (hyresgäst) och program-ID (klient-ID) för användning i programmets källkod.
I din IDE öppnar du projektmappen ms-identity-docs-code-javascript, som innehåller exemplet.
Öppna vanillajs-spa/App/public/authConfig.js och uppdatera följande värden med informationen som registrerats i administrationscentret.
/**
* 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 – Programmets identifierare, även kallad klienten. Ersätt texten inom citattecken med program-ID (klient)-ID:t värde som registrerades tidigare.
authority – Auktoriteten är en URL som anger en katalog som MSAL kan begära token från. Ersätt Enter_the_Tenant_Info_Here med värdet för Katalog (tenant) ID som registrerades tidigare.
redirectUri – applikationens omdirigerings-URI. Om det behövs ersätter du texten inom citattecken med den omdirigerings-URI som registrerades tidigare.
I din IDE öppnar du projektmappen ms-identity-docs-code-javascript/react-spa, som innehåller exemplet.
Öppna react-spa/src/authConfig.js och uppdatera följande värden med den information som registrerats i administrationscentret.
/*
* 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 – Programmets identifierare, även kallad klienten. Ersätt texten inom citattecken med program-ID (klient)-ID:t värde som registrerades tidigare.
authority – Auktoriteten är en URL som anger en katalog som MSAL kan begära token från. Ersätt Enter_the_Tenant_Info_Here med Katalog-ID:t (hyresgäst) värde som antecknades tidigare.
redirectUri – programmets omdirigerings-URI. Om det behövs ersätter du texten inom citattecken med den omdirigerings-URI som registrerades tidigare.
I din IDE öppnar du projektmappen ms-identity-docs-code-javascript/angular-spa, som innehåller exemplet.
Öppna angular-spa/src/app/app.module.ts och uppdatera följande värden med informationen som registrerats i administrationscentret.
// 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 – Programmets identifierare, även kallad klienten. Ersätt texten inom citattecken med program (klient)-ID-värdet som registrerades tidigare.
authority – Auktoriteten är en URL som indikerar en katalog från vilken MSAL kan begära token. Ersätt Enter_the_Tenant_Info_Here med Directory-ID (hyresgäst) som noterades tidigare.
redirectUri – applikationens omdirigerings-URI . Om det behövs ersätter du texten inom citattecken med den omdirigerings-URI som registrerades tidigare.
I din IDE öppnar du projektmappen ms-identity-docs-code-dotnet/spa-blazor-wasm, som innehåller exemplet.
Öppna spa-blazor-wasm/wwwroot/appsettings.json och uppdatera följande värden med informationen som registrerades tidigare i administrationscentret.
{
"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 – Auktoriteten är en URL som anger en katalog varifrån MSAL kan begära token. Ersätt Enter_the_Tenant_Info_Here med Directory-ID:t (klientorganisation) värde som registrerades tidigare.
ClientId – Programmets identifierare, även kallad klienten. Ersätt texten inom citattecken med värdet för program-ID (klient-ID) som registrerades tidigare.
Kör projektet med en webbserver med hjälp av Node.js:
Starta servern genom att köra följande kommandon från projektkatalogen:
cd vanillajs-spa/App
npm install
npm start
Kopiera den https URL som visas i terminalen, till exempel https://localhost:3000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du kommer att begäras en e-postadress så att ett engångslösenord kan skickas till dig. Ange koden när du uppmanas att göra det.
Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera. Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.
Kör projektet med en webbserver med hjälp av Node.js:
Starta servern genom att köra följande kommandon från projektkatalogen:
cd react-spa/App
npm install
npm start
Kopiera den https URL som visas i terminalen, till exempel https://localhost:3000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du har begärt en e-postadress så att ett engångslösenord kan skickas till dig. Ange koden när du uppmanas att göra det.
Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera. Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.
Kör projektet med en webbserver med hjälp av Node.js:
Starta servern genom att köra följande kommandon från projektkatalogen:
cd angular-spa/App
npm install
npm start
Kopiera den https URL som visas i terminalen, till exempel https://localhost:4200och klistra in den i ett webbläsaradressfält. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du kommer att begäras en e-postadress så att ett engångslösenord kan skickas till dig. Ange koden när du uppmanas att göra det.
Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera. Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.
Kör projektet med en webbserver med hjälp av dotnet:
Starta servern genom att köra följande kommandon från projektkatalogen:
cd spa-blazor-wasm
dotnet workload install wasm-tools
dotnet run
Kopiera den http URL som visas i terminalen, till exempel http://localhost:5000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du kommer att begäras en e-postadress så att ett engångslösenord kan skickas till dig. Ange koden när du uppmanas att göra det.
Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera. Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.
Registrera applikationen och registrera identifierare
För att ditt program ska kunna logga in användare med Microsoft Entra måste Microsoft Entras Externa ID känna till det program som du skapar. Appregistreringen upprättar en förtroenderelation mellan appen och Microsoft Entra. När du registrerar ett program genererar externt ID en unik identifierare som kallas ett program-ID (klient)-ID, ett värde som används för att identifiera din app när du skapar autentiseringsbegäranden.
Följande steg visar hur du registrerar din app i administrationscentret för Microsoft Entra:
Om du har åtkomst till flera hyresgäster använder du ikonen Inställningar i den övre menyn för att växla till den externa hyresgästen från menyn Kataloger + prenumerationer.
Bläddra till Identity>Applications>App registrations.
Välj + Ny registrering.
På sidan Registrera en ansökan som visas.
Ange ett beskrivande program Namn som visas för appens användare, till exempel ciam-client-app.
Under Kontotyper som stödsväljer du endast Konton i den här organisationskatalogen.
Välj Registrera.
Programmets översiktsfönster visas vid lyckad registrering. Registrera applikations-ID (klient-ID) för användning i din applikationskällkod.
Följ dessa steg om du vill ange din apptyp för din appregistrering:
Under Hanteraväljer du Autentisering.
På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet SPA.
För omdirigerings-URI:er angerhttp://localhost:3000.
Välj Konfigurera för att spara ändringarna.
Följ dessa steg om du vill ange din apptyp för din appregistrering:
Under Hanteraväljer du Autentisering.
På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet SPA.
För omdirigerings-URI:er, mata inhttp://localhost:3000.
Välj Konfigurera för att spara ändringarna.
Följ dessa steg om du vill ange din apptyp för din appregistrering:
Under Hanteraväljer du Autentisering.
På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet SPA.
För omdirigerings-URI:er angerhttp://localhost:4200.
Välj Konfigurera för att spara ändringarna.
Bevilja administratörsmedgivande
När du har registrerat ditt program tilldelas det behörigheten User.Read. Men eftersom hyresgästen är en extern hyresgäst, kan kundanvändarna själva inte samtycka till den här behörigheten. Du som klientadministratör måste godkänna den här behörigheten för alla användare i klientorganisationen:
På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-client-app) för att öppna sidan Översikt.
Under Hanteraväljer du API-behörigheter.
Välj Bevilja administratörsmedgivande för <ditt klientnamn>och välj sedan Ja.
Välj Uppdateraoch kontrollera sedan att Beviljas för <ditt klientnamn> visas under Status för behörigheten.
Skapa ett användarflöde
För att kundanvändarna ska kunna se registrerings- eller inloggningsupplevelsen när de använder din app måste du associera appen med ett användarflöde. Även om många program kan associeras med ditt användarflöde kan ett enda program bara associeras med ett användarflöde.
På sidomenyn väljer du Identitet.
Välj externa identiteteroch sedan Användarflöden.
På sidan Användarflöden väljer du Användarflödets namn du skapade tidigare, till exempel SignInSignUpSample.
Under rubriken Använd, välj Program.
Välj Lägg till program.
Välj programmet i listan, till exempel ciam-client-app eller använd sökrutan för att hitta programmet och välj det sedan.
Välj Välj.
När du har associerat din app med ett användarflöde kan du testa användarflödet genom att simulera en användares registrering eller inloggning med ditt program från administrationscentret för Microsoft Entra. Det gör du genom att använda stegen i Testa ditt registrerings- och inloggningsanvändarflöde.
Associera SPA med användarflödet
För att kundanvändarna ska kunna se registrerings- eller inloggningsupplevelsen när de använder din app måste du associera appen med ett användarflöde. Även om många program kan associeras med ditt användarflöde kan ett enda program bara associeras med ett användarflöde.
På sidomenyn väljer du Identitet.
Välj externa identiteteroch sedan Användarflöden.
På sidan Användarflöden väljer du Användarflödets namn som du skapade tidigare, till exempel SignInSignUpSample.
Under Användväljer du Program.
Välj Lägg till program.
Välj programmet i listan, till exempel ciam-client-app eller använd sökrutan för att hitta programmet och välj det sedan.
Välj Välj.
När du har associerat din app med ett användarflöde kan du testa användarflödet genom att simulera en användares registrering eller inloggning med ditt program från administrationscentret för Microsoft Entra. Det gör du genom att använda stegen i Testa ditt registrerings- och inloggningsanvändarflöde.
Klona eller ladda ned exempel-SPA
Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil.
Öppna App/public/authConfig.js och ersätt följande med de värden som hämtas från administrationscentret för Microsoft Entra:
Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för den app som du registrerade tidigare.
Enter_the_Tenant_Subdomain_Here och ersätt den med underdomänen för Directory (hyresgäst). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn lär du dig att läsa klientinformationen.
Spara filen.
Öppna SPA\src\authConfig.js och ersätt följande med de värden som hämtas från administrationscentret för Microsoft Entra:
Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för den app som du registrerade tidigare.
Enter_the_Tenant_Subdomain_Here och ersätt det med subdomänen för Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt hyresgästnamn, lär dig hur du läser dina hyresgästs-uppgifter.
Spara filen.
Öppna SPA/src/app/auth-config.ts och ersätt följande med de värden som hämtas från administrationscentret för Microsoft Entra:
Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för den app som du registrerade tidigare.
Enter_the_Tenant_Subdomain_Here och ersätt den med underdomänen Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn lär du dig att läsa klientinformationen.
Starta servern genom att köra följande kommandon från projektkatalogen:
cd 1-Authentication\0-sign-in-vanillajs\App
npm install
npm start
Kopiera den https URL som visas i terminalen, till exempel https://localhost:3000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Logga in med ett konto som är registrerat hos klienten.
Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.
Starta servern genom att köra följande kommandon från projektkatalogen:
cd 1-Authentication\1-sign-in-react\SPA
npm install
npm start
Kopiera den https URL som visas i terminalen, till exempel https://localhost:3000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Logga in med ett konto som är registrerat i den externa klientorganisationen.
Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.
Starta servern genom att köra följande kommandon från projektkatalogen:
cd 1-Authentication\2-sign-in-angular\SPA
npm install
npm start
Kopiera den https URL som visas i terminalen, till exempel https://localhost:4200och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Logga in med ett konto som är registrerat i den externa klientorganisationen.
Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.
Logga ut från programmet
Hitta knappen Logga ut på sidan och välj den.
Du uppmanas att välja ett konto att logga ut från. Välj det konto som du använde för att logga in.
Ett meddelande visas som anger att du har loggat ut. Nu kan du stänga webbläsarfönstret.
på den översta menyn för att växla till klientorganisationen där du vill registrera programmet från menyn Kataloger + prenumerationer.
i den övre menyn för att växla till den externa hyresgästen från menyn Kataloger + prenumerationer.
