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

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

Vereisten

• Een Azure-account met een actief abonnement. Als u nog geen account hebt, maakt u gratis een account.
• Node.js
• Visual Studio 2022 of Visual Studio Code

De toepassings- en record-id's registreren

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 van de toepassing de id's weergegeven die nodig zijn in de broncode van de toepassing.

1. Meld u aan bij het Microsoft Entra-beheercentrum.

2. 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.

3. Blader naar Identiteitstoepassingen>> App-registraties en selecteer Nieuwe registratie.

4. Voer een naam in voor de toepassing, zoals identity-client-spa.

5. Bij Ondersteunde accounttypen selecteert u Enkel accounts in deze organisatieadreslijst. Selecteer de optie Help mij kiezen voor informatie over verschillende accounttypen.

6. Selecteer Registreren.

   

7. Het deelvenster Overzicht van de toepassing wordt weergegeven wanneer de registratie is voltooid. Noteer de map-id (tenant) en de toepassings-id (client) die moet worden gebruikt in de broncode van uw toepassing.

   

   Notitie

   De ondersteunde accounttypen kunnen worden gewijzigd door te verwijzen naar De accounts wijzigen die door een toepassing worden ondersteund.

Een omleidings-URI voor platform toevoegen

Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:

1. Selecteer Verificatie onder Beheren.
2. Selecteer op de pagina Platformconfiguraties de optie Een platform toevoegen en selecteer vervolgens de optie BEVEILIGD-WACHTWOORDVERIFICATIE.
3. Voer voor de omleidings-URI's in http://localhost:4200.
4. Selecteer Configureren om uw wijzigingen op te slaan.

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.

Het project configureren

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

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

   // 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 waarde van de toepassings-id (client) 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 id-waarde van de map (tenant) 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.

Voer de toepassing uit en meld u aan

Het project uitvoeren met een webserver met behulp van Node.js:

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

   npm install
   npm start
   

2. Kopieer de https URL die in de terminal wordt weergegeven, 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.

   

Afmelden bij de toepassing

1. Zoek de knop Afmelden in de rechterbovenhoek van de pagina en selecteer deze.
2. 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.

Gerelateerde inhoud

• Quickstart: Een ASP.NET Core-web-API beveiligen met het Microsoft Identity Platform

• Meer informatie door deze volledig nieuwe Angular SPA te bouwen met de volgende reeks - Zelfstudie: Gebruikers aanmelden en Microsoft Graph aanroepen