Delen via

Verificatie inschakelen in uw eigen Angular-toepassing met behulp van Azure Active Directory B2C

Belangrijk

Vanaf 1 mei 2025 is Azure AD B2C niet meer beschikbaar voor nieuwe klanten. Meer informatie vindt u in onze veelgestelde vragen.

In dit artikel leest u hoe u Verificatie van Azure Active Directory B2C (Azure AD B2C) toevoegt aan uw eigen Angular-toepassing met één pagina (SPA). Meer informatie over het integreren van een Angular-toepassing met de MSAL voor Angular-verificatiebibliotheek .

Gebruik dit artikel met het bijbehorende artikel getiteld Verificatie configureren in een voorbeeldtoepassing met één pagina van Angular. Vervang de voorbeeld-Angular-app door uw eigen Angular-app. Nadat u de stappen in dit artikel hebt voltooid, accepteert uw toepassing aanmeldingen via Azure AD B2C.

Vereiste voorwaarden

Voltooi de stappen in het artikel Verificatie configureren in een voorbeeld van een toepassingsartikel met één pagina in Angular .

Een Angular-app-project maken

U kunt een bestaand Angular-app-project gebruiken of een nieuw project maken. Voer de volgende opdrachten uit om een nieuw project te maken.

De opdrachten:

  1. Installeer de Angular CLI met behulp van npm Package Manager.
  2. Maak een Angular-werkruimte met een routeringsmodule. De naam van de app is msal-angular-tutorial. U kunt deze wijzigen in elke geldige Angular-app-naam, zoals contoso-car-service.
  3. Ga naar de map van de app-directory.
npm install -g @angular/cli 
ng new msal-angular-tutorial --routing=true --style=css --strict=false
cd msal-angular-tutorial

De afhankelijkheden installeren

Als u de MSAL Browser - en MSAL Angular-bibliotheken in uw toepassing wilt installeren, voert u de volgende opdracht uit in de opdrachtshell:

npm install @azure/msal-browser @azure/msal-angular

Installeer de Angular Material-onderdeelbibliotheek (optioneel voor de gebruikersinterface):

npm install @angular/material @angular/cdk

De verificatieonderdelen toevoegen

De voorbeeldcode bestaat uit de volgende onderdelen:

Onderdeel Typologie Beschrijving
auth-config.ts Constanten Dit configuratiebestand bevat informatie over uw Azure AD B2C-id-provider en de web-API-service. De Angular-app gebruikt deze informatie om een vertrouwensrelatie tot stand te brengen met Azure AD B2C, de gebruiker aan te melden en af te melden, tokens te verkrijgen en de tokens te valideren.
app.module.ts Angular-module In dit onderdeel wordt beschreven hoe de toepassingsonderdelen bij elkaar passen. Dit is de hoofdmodule die wordt gebruikt om de toepassing te bootstrapen en te openen. In dit scenario voegt u enkele onderdelen toe aan de app.module.ts-module en start u de MSAL-bibliotheek met het MSAL-configuratieobject.
app-routing.module.ts Angular-routeringsmodule Dit onderdeel maakt navigatie mogelijk door een browser-URL te interpreteren en het bijbehorende onderdeel te laden. In dit scenario voegt u enkele onderdelen toe aan de routeringsmodule en beveiligt u onderdelen met MSAL Guard. Alleen geautoriseerde gebruikers hebben toegang tot de beveiligde onderdelen.
app.component.* Angular-component Met de ng new opdracht is een Angular-project gemaakt met een hoofdonderdeel. In dit scenario wijzigt u het app-onderdeel om de bovenste navigatiebalk te hosten. De navigatiebalk bevat verschillende knoppen, waaronder aanmeldings- en afmeldingsknoppen. De app.component.ts klasse verwerkt de aanmeldings- en afmeldingsgebeurtenissen.
startpagina.component.* Angular-component In deze handleiding voegt u de homecomponent toe om de thuispagina weer te geven voor anonieme toegang. Dit onderdeel laat zien hoe u kunt controleren of een gebruiker zich heeft aangemeld.
profiel.component.* Angular-component In dit scenario voegt u de profielcomponent toe om te leren hoe u de ID-tokenclaims leest.
webapi.component.* Angular-component In dit scenario voegt u het webapi-onderdeel toe om te leren hoe u een web-API aanroept.

Voer de volgende Angular CLI-opdrachten uit om de volgende onderdelen aan uw app toe te voegen. De generate component opdrachten:

  1. Maak een map voor elk onderdeel. De map bevat de TypeScript-, HTML-, CSS- en testbestanden.
  2. Werk de app.module.ts en app-routing.module.ts bestanden bij met verwijzingen naar de nieuwe onderdelen.
ng generate component home
ng generate component profile
ng generate component webapi

De app-instellingen toevoegen

Instellingen voor de Azure AD B2C-id-provider en de web-API worden opgeslagen in het auth-config.ts-bestand . Maak in de map src/app een bestand met de naam auth-config.ts met de volgende code. Wijzig vervolgens de instellingen zoals beschreven in 3.1 Configureer het Angular-voorbeeld.

import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
 
export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
     cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE, 
     },
     system: {
         loggerOptions: {
            loggerCallback: (logLevel, message, containsPii) => {
                console.log(message);
             },
             logLevel: LogLevel.Verbose,
             piiLoggingEnabled: false
         }
     }
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-name.onmicrosoft.com/api/tasks.read"],
  },
}
export const loginRequest = {
  scopes: []
};

De verificatiebibliotheken starten

Openbare clienttoepassingen worden niet vertrouwd om toepassingsgeheimen veilig te bewaren, zodat ze geen clientgeheimen hebben. In de map src/app, open app.module.ts en breng de volgende wijzigingen aan.

  1. Importeer de MSAL Angular- en MSAL Browser-bibliotheken.
  2. Importeer de Azure AD B2C-configuratiemodule.
  3. Importeren HttpClientModule. De HTTP-client wordt gebruikt om web-API's aan te roepen.
  4. Importeer de Angular HTTP-interceptor. MSAL gebruikt de interceptor om het bearer-token in te injecteren in de HTTP-autorisatieheader.
  5. Voeg de essentiële Angular-materialen toe.
  6. Instantieer MSAL door gebruik te maken van een openbaar clienttoepassingsobject voor meerdere accounts. De MSAL-initialisatie omvat het doorgeven van:
    1. Het configuratieobject voor auth-config.ts.
    2. Het configuratieobject voor de routeringsbeveiliging.
    3. Het configuratieobject voor de MSAL-interceptor. De interceptorklasse verkrijgt automatisch tokens voor uitgaande aanvragen die gebruikmaken van de Angular HttpClient-klasse voor bekende beveiligde resources.
  7. Configureer de HTTP_INTERCEPTORS en MsalGuardAngular-providers.
  8. Voeg MsalRedirectComponent toe aan de Angular bootstrap.

Bewerk app.module.ts in de map src/app en breng de wijzigingen aan die worden weergegeven in het volgende codefragment. De wijzigingen worden gemarkeerd met 'Wijzigingen beginnen hier' en 'Wijzigingen eindigen hier'.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

/* Changes start here. */
// Import MSAL and MSAL browser libraries. 
import { MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';

// Import the Azure AD B2C configuration 
import { msalConfig, protectedResources } from './auth-config';

// Import the Angular HTTP interceptor. 
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';
import { WebapiComponent } from './webapi/webapi.component';

// Add the essential Angular materials.
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatTableModule } from '@angular/material/table';
/* Changes end here. */

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    HomeComponent,
    WebapiComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    /* Changes start here. */
    // Import the following Angular materials. 
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatTableModule,
    // Import the HTTP client. 
    HttpClientModule,

    // Initiate the MSAL library with the MSAL configuration object
    MsalModule.forRoot(new PublicClientApplication(msalConfig),
      {
        // The routing guard configuration. 
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: protectedResources.todoListApi.scopes
        }
      },
      {
        // MSAL interceptor configuration.
        // The protected resource mapping maps your web API with the corresponding app scopes. If your code needs to call another web API, add the URI mapping here.
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map([
          [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
        ])
      })
    /* Changes end here. */
  ],
  providers: [
    /* Changes start here. */
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalGuard
    /* Changes end here. */
  ],
  bootstrap: [
    AppComponent,
    /* Changes start here. */
    MsalRedirectComponent
    /* Changes end here. */
  ]
})
export class AppModule { }

Routes instellen

In deze sectie configureert u de routes voor uw Angular-toepassing. Wanneer een gebruiker een koppeling op de pagina selecteert om te navigeren in uw toepassing met één pagina of een URL in de adresbalk invoert, worden de URL door de routes toegewezen aan een Angular-onderdeel. De Angular-routeringsinterface canActivate maakt gebruik van MSAL Guard om te controleren of de gebruiker is aangemeld. Als de gebruiker niet is aangemeld, leidt MSAL de gebruiker naar Azure AD B2C om te authenticeren.

Bewerk in de src/app map de app-routing.module.ts en breng de wijzigingen aan die getoond worden in het volgende codefragment. De wijzigingen worden gemarkeerd met 'Wijzigingen beginnen hier' en 'Wijzigingen eindigen hier'.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { WebapiComponent } from './webapi/webapi.component';

const routes: Routes = [
  /* Changes start here. */
  {
    path: 'profile',
    component: ProfileComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    path: 'webapi',
    component: WebapiComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    // The home component allows anonymous access
    path: '',
    component: HomeComponent
  }
  /* Changes end here. */
];


@NgModule({
  /* Changes start here. */
  // Replace the following line with the next one
  //imports: [RouterModule.forRoot(routes)],
  imports: [RouterModule.forRoot(routes, {
    initialNavigation:'enabled'
  })],
  /* Changes end here. */
  exports: [RouterModule]
})
export class AppRoutingModule { }

De knoppen voor aanmelden en afmelden toevoegen

In deze sectie voegt u de knoppen voor aanmelden en afmelden toe aan het app-onderdeel . Open in de map src/app het bestand app.component.ts en breng de volgende wijzigingen aan:

  1. Importeer de vereiste onderdelen.

  2. Wijzig de klasse om de OnInit-methode te implementeren. De OnInit methode abonneert zich op de waarneembare gebeurtenis MSAL MsalBroadcastServiceinProgress$ . Gebruik deze gebeurtenis om de status van gebruikersinteracties te kennen, met name om te controleren of interacties zijn voltooid.

    Controleer voordat u interacties aangaat met het MSAL-accountobject of de InteractionStatus eigenschap InteractionStatus.None retourneert. De subscribe gebeurtenis roept de setLoginDisplay methode aan om te controleren of de gebruiker is geverifieerd.

  3. Klassevariabelen toevoegen.

  4. Voeg de methode toe waarmee de login autorisatiestroom wordt gestart.

  5. Voeg de logout methode toe waarmee de gebruiker wordt afgemeld.

  6. Voeg de setLoginDisplay methode toe die controleert of de gebruiker is geverifieerd.

  7. Voeg de methode ngOnDestroy toe om de inProgress$ abonnement gebeurtenis op te schonen.

Na de wijzigingen moet uw code eruitzien als het volgende codefragment:

import { Component, OnInit, Inject } from '@angular/core';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { InteractionStatus, RedirectRequest } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

/* Changes start here. */
export class AppComponent implements OnInit{
  title = 'msal-angular-tutorial';
  loginDisplay = false;
  private readonly _destroying$ = new Subject<void>();

  constructor(@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration, private broadcastService: MsalBroadcastService, private authService: MsalService) { }

  ngOnInit() {

    this.broadcastService.inProgress$
    .pipe(
      filter((status: InteractionStatus) => status === InteractionStatus.None),
      takeUntil(this._destroying$)
    )
    .subscribe(() => {
      this.setLoginDisplay();
    })
  }

  login() {
    if (this.msalGuardConfig.authRequest){
      this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  logout() { 
    this.authService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200'
    });
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
  /* Changes end here. */
}

Bewerk app.component.html in de map src/app en breng de volgende wijzigingen aan:

  1. Voeg een koppeling toe aan de onderdelen van het profiel en de web-API.
  2. Voeg de aanmeldknop toe met het attribuut click-event geconfigureerd voor de login() methode. Deze knop wordt alleen weergegeven als de loginDisplay klassevariabele is false.
  3. Voeg de afmeldingsknop toe met het kenmerk van de klikgebeurtenis ingesteld op de logout()-methode. Deze knop wordt alleen weergegeven als de loginDisplay klassevariabele is true.
  4. Voeg een router-outlet element toe.

Na de wijzigingen moet uw code eruitzien als het volgende codefragment:

<mat-toolbar color="primary">
  <a class="title" href="/">{{ title }}</a>

  <div class="toolbar-spacer"></div>

  <a mat-button [routerLink]="['profile']">Profile</a>
  <a mat-button [routerLink]="['webapi']">Web API</a>

  <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
  <button mat-raised-button *ngIf="loginDisplay" (click)="logout()">Logout</button>

</mat-toolbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Werk desgewenst het app.component.css-bestand bij met het volgende CSS-fragment:

.toolbar-spacer {
    flex: 1 1 auto;
  }

  a.title {
    color: white;
  }

De app-omleidingen afhandelen

Wanneer u omleidingen met MSAL gebruikt, moet u de app-omleidingsrichtlijn toevoegen aan index.html. Bewerk index.html in de map src, zoals te zien in het volgende codefragment.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MsalAngularTutorial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <!-- Changes start here -->
  <app-redirect></app-redirect>
  <!-- Changes end here -->
</body>
</html>

CSS van de app instellen (optioneel)

Werk in de map /src het styles.css-bestand bij met het volgende CSS-fragment:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
.container { margin: 1%; }

Aanbeveling

Op dit moment kunt u uw app uitvoeren en de aanmeldingservaring testen. Zie de sectie Angular-toepassing uitvoeren om uw app uit te voeren.

Controleren of een gebruiker is geverifieerd

Het bestand home.component laat zien hoe u kunt controleren of de gebruiker is geverifieerd. Werk in de map src/app/homehome.component.ts bij met het volgende codefragment.

De code:

  1. Abonneert op de MSAL MsalBroadcastServicemsalSubject$ en inProgress$ observeerbare gebeurtenissen.
  2. Zorgt ervoor dat de msalSubject$ gebeurtenis het verificatieresultaat naar de browserconsole schrijft.
  3. Zorgt ervoor dat de inProgress$ gebeurtenis controleert of een gebruiker is geverifieerd. De getAllAccounts() methode retourneert een of meer objecten.
import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  loginDisplay = false;

  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
      )
      .subscribe((result: EventMessage) => {
        console.log(result);
      });

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      })
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }
}

Werk het home.component.html-gedeelte bij in de map src/app/home met de volgende HTML-code. De *ngIf-instructie controleert de loginDisplay klassevariabele om de welkomstberichten weer te geven of te verbergen.

<div *ngIf="!loginDisplay">
    <p>Please sign-in to see your profile information.</p>
</div>

<div *ngIf="loginDisplay">
    <p>Login successful!</p>
    <p>Request your profile information by clicking Profile above.</p>
</div>

De id-tokenclaims lezen

Het bestand profile.component laat zien hoe u toegang hebt tot de id-tokenclaims van de gebruiker. Werk in de map src/app/profileprofile.component.ts bij met het volgende codefragment.

De code:

  1. Importeert de vereiste onderdelen.
  2. Abonneert op de waarneembare MsalBroadcastService-gebeurtenis. De gebeurtenis laadt het account en leest de id-tokenclaims.
  3. Zorgt ervoor dat de checkAndSetActiveAccount methode het actieve account controleert en instelt. Deze actie is gebruikelijk wanneer de app communiceert met meerdere Azure AD B2C-gebruikersstromen of aangepaste beleidsregels.
  4. Zorgt ervoor dat de getClaims methode de id-tokenclaims ophaalt van het actieve MSAL-accountobject. De methode voegt vervolgens de claims toe aan de dataSource matrix. De matrix wordt weergegeven aan de gebruiker met de sjabloonbinding van het onderdeel.
import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {
  displayedColumns: string[] = ['claim', 'value'];
  dataSource: Claim[] = [];
  private readonly _destroying$ = new Subject<void>();
  
  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) =>  status === InteractionStatus.None || status === InteractionStatus.HandleRedirect),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.checkAndSetActiveAccount();
        this.getClaims(this.authService.instance.getActiveAccount()?.idTokenClaims)
      })
  }

  checkAndSetActiveAccount() {

    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }
  }

  getClaims(claims: any) {

    let list: Claim[]  =  new Array<Claim>();

    Object.keys(claims).forEach(function(k, v){
      
      let c = new Claim()
      c.id = v;
      c.claim = k;
      c.value =  claims ? claims[k]: null;
      list.push(c);
    });
    this.dataSource = list;

  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
}

export class Claim {
  id: number;
  claim: string;
  value: string;
}

Werk in de map src/app/profileprofile.component.html bij met het volgende HTML-fragment:

<h1>ID token claims:</h1>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Claim Column -->
  <ng-container matColumnDef="claim">
    <th mat-header-cell *matHeaderCellDef> Claim </th>
    <td mat-cell *matCellDef="let element"> {{element.claim}} </td>
  </ng-container>

  <!-- Value Column -->
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{element.value}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Een web-API aanroepen

Als u een autorisatieweb-API op basis van tokens wilt aanroepen, moet de app een geldig toegangstoken hebben. De MsalInterceptor-provider verkrijgt automatisch tokens voor uitgaande aanvragen die gebruikmaken van de Angular HttpClient-klasse voor bekende beveiligde resources.

Belangrijk

Met de MSAL-initialisatiemethode (in de app.module.ts klasse) worden beveiligde resources, zoals web-API's, toegewezen met de vereiste app-bereiken met behulp van het protectedResourceMap object. Als uw code een andere web-API moet aanroepen, voegt u de web-API-URI en de HTTP-methode voor de web-API, met de bijbehorende bereiken, toe aan het protectedResourceMap object. Voor meer informatie, zie Beschermde bronnenkaart.

Wanneer het HttpClient-object een web-API aanroept, voert de MsalInterceptor-provider de volgende stappen uit:

  1. Hiermee verkrijgt u een toegangstoken met de vereiste machtigingen (bereiken) voor het eindpunt van de web-API.

  2. Geeft het toegangstoken door als bearer-token in de autorisatieheader van de HTTP-aanvraag met behulp van deze indeling:

    Authorization: Bearer <access-token>

Het webapi.component-bestand laat zien hoe u een web-API aanroept. Werk het bestand webapi.component.ts bij in de map src/app/webapi met het volgende codefragment.

De code:

  1. Gebruikt de Angular HttpClient-klasse om de web-API aan te roepen.
  2. Leest het auth-config element van de protectedResources.todoListApi.endpoint klasse. Dit element geeft de web-API-URI op. Aan de hand van de web-API-URI verkrijgt de MSAL-interceptor een toegangstoken met de bijbehorende toepassingsgebieden.
  3. Hiermee haalt u het profiel op uit de web-API en stelt u de profile klassevariabele in.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { protectedResources } from '../auth-config';

type ProfileType = {
  name?: string
};

@Component({
  selector: 'app-webapi',
  templateUrl: './webapi.component.html',
  styleUrls: ['./webapi.component.css']
})
export class WebapiComponent implements OnInit {
  todoListEndpoint: string = protectedResources.todoListApi.endpoint;
  profile!: ProfileType;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    this.http.get(this.todoListEndpoint)
      .subscribe(profile => {
        this.profile = profile;
      });
  }
}

Werk webapi.component.html bij in de map src/app/webapi met het volgende HTML-fragment. De sjabloon van het onderdeel geeft de naam weer die door de web-API wordt geretourneerd. Onder aan de pagina wordt met de sjabloon het web-API-adres weergegeven.

<h1>The web API returns:</h1>
<div>
    <p><strong>Name: </strong> {{profile?.name}}</p>
</div>

<div class="footer-text">
    Web API: {{todoListEndpoint}}
</div>

Werk desgewenst het webapi.component.css bestand bij met het volgende CSS-fragment:

.footer-text {
    position: absolute;
    bottom: 50px;
    color: gray;
}

De Angular-toepassing uitvoeren

Voer de volgende opdracht uit:

npm start

In het consolevenster wordt het nummer weergegeven van de poort waarop de toepassing wordt gehost.

Listening on port 4200...

Aanbeveling

Als u de npm start opdracht wilt uitvoeren, gebruikt u het foutopsporingsprogramma van Visual Studio Code. Het foutopsporingsprogramma helpt uw bewerkings-, compileer- en foutopsporingslus te versnellen.

Ga naar http://localhost:4200 in uw browser om de toepassing weer te geven.

Volgende stappen

  • Last updated on