Share via

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

  • Artikel

In dit artikel wordt beschreven hoe u Azure Active Directory B2C-verificatie (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 gerelateerde artikel met de titel Verificatie configureren in een voorbeeld Angular toepassing met één pagina. 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.

Vereisten

Voer de stappen uit in het artikel Verificatie configureren in een voorbeeld Angular toepassing met één pagina.

Een Angular-app-project maken

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

De opdrachten:

  1. Installeer de Angular CLI met behulp van npm-pakketbeheer.
  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.
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 Component Library (optioneel, voor de gebruikersinterface):

npm install @angular/material @angular/cdk

De verificatieonderdelen toevoegen

De voorbeeldcode bestaat uit de volgende onderdelen:

Onderdeel Type Description
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 in 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 module app.module.ts 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-onderdeel Met de ng new opdracht is een Angular-project met een hoofdonderdeel gemaakt. In dit scenario wijzigt u het app-onderdeel om de bovenste navigatiebalk te hosten. De navigatiebalk bevat verschillende knoppen, waaronder knoppen voor aanmelden en afmelden. De app.component.ts klasse verwerkt de aanmeldings- en afmeldingsgebeurtenissen.
home.component.* Angular-onderdeel In dit scenario voegt u het basisonderdeel toe om de startpagina weer te geven voor anonieme toegang. Dit onderdeel laat zien hoe u kunt controleren of een gebruiker zich heeft aangemeld.
profile.component.* Angular-onderdeel In dit scenario voegt u het profielonderdeel toe om te leren hoe u de id-tokenclaims kunt lezen.
webapi.component.* Angular-onderdeel In dit scenario voegt u het webapi-onderdeel toe om te leren hoe u een web-API aanroept.

Als u de volgende onderdelen aan uw app wilt toevoegen, voert u de volgende Angular CLI-opdrachten uit. 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 bestanden en bij app-routing.module.ts 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 bestand auth-config.ts. Maak in de map src/app een bestand met de naam auth-config.ts dat de volgende code bevat. Wijzig vervolgens de instellingen zoals beschreven in 3.1 De Angular voorbeeld configureren.

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, dus ze hebben geen clientgeheimen. Open app.module.ts in de map src/app en breng de volgende wijzigingen aan:

  1. Importeer de MSAL-Angular- en MSAL-browserbibliotheken.
  2. Importeer de Azure AD B2C-configuratiemodule.
  3. Importeer 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 de HTTP-autorisatieheader te injecteren.
  5. Voeg de essentiële Angular materialen toe.
  6. Maak MSAL met behulp van het openbare 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 klasse Angular HttpClient voor bekende beveiligde resources.
  7. Configureer de HTTP_INTERCEPTORSproviders en MsalGuard Angular.
  8. Voeg toe MsalRedirectComponent 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 configureren

Configureer in deze sectie de routes voor uw Angular-toepassing. Wanneer een gebruiker een koppeling op de pagina selecteert om te verplaatsen binnen uw toepassing met één pagina of een URL invoert in de adresbalk, wordt de URL toegewezen aan een Angular onderdeel. De Angular routering canActivate-interface maakt gebruik van MSAL Guard om te controleren of de gebruiker is aangemeld. Als de gebruiker niet is aangemeld, brengt MSAL de gebruiker naar Azure AD B2C om te verifiëren.

In de map src/app bewerkt u app-routing.module.ts de wijzigingen 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 { 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 methode OnInit te implementeren. De OnInit methode abonneert zich op de msal MsalBroadcastServiceinProgress$ waarneembare gebeurtenis. Gebruik deze gebeurtenis om de status van gebruikersinteracties te kennen, met name om te controleren of interacties zijn voltooid.

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

  3. Voeg klassevariabelen toe.

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

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

  6. Voeg de setLoginDisplay methode toe waarmee wordt gecontroleerd of de gebruiker is geverifieerd.

  7. Voeg de methode ngOnDestroy toe om de inProgress$ gebeurtenis abonneren 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 naar het profiel en de web-API-onderdelen.
  2. Voeg de aanmeldingsknop toe waarbij het gebeurteniskenmerk click is ingesteld op de login() methode. Deze knop wordt alleen weergegeven als de loginDisplay klassevariabele is false.
  3. Voeg de afmeldingsknop toe waarbij het gebeurteniskenmerk click is 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 optioneel het bestand app.component.css bij met het volgende CSS-fragment:

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

  a.title {
    color: white;
  }

De app-omleidingen verwerken

Wanneer u omleidingen gebruikt met MSAL, moet u de app-omleidingsrichtlijn toevoegen aan index.html. Bewerk index.html in de map src, zoals wordt weergegeven 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>

APP-CSS instellen (optioneel)

Werk in de map /src het bestand styles.css 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%; }

Tip

Op dit moment kunt u uw app uitvoeren en de aanmeldingservaring testen. Zie de sectie De 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 home.component.ts bij in de map src/app/home met het volgende codefragment.

De code:

  1. Abonneren op de MSAL MsalBroadcastServicemsalSubject$ en inProgress$ waarneembare 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 in de map src/app/homehome.component.html bij met het volgende HTML-fragment. 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 profile.component.ts bij in de map src/app/profile met het volgende codefragment.

De code:

  1. Importeert de vereiste onderdelen.
  2. Abonneren op de msal MsalBroadcastServiceinProgress$ waarneembare gebeurtenis. De gebeurtenis laadt het account en leest de id-tokenclaims.
  3. Zorgt ervoor dat de methode het checkAndSetActiveAccount 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 web-API voor autorisatie 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 klasse Angular HttpClient naar bekende beveiligde resources.

Belangrijk

De MSAL-initialisatiemethode (in de app.module.ts klasse) wijst beveiligde resources, zoals web-API's, toe aan 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 web-API-HTTP-methode, met de bijbehorende bereiken, toe aan het protectedResourceMap object. Zie Beveiligde resourcetoewijzing voor meer informatie.

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 bestand webapi.component laat zien hoe u een web-API aanroept. Werk in de map src/app/webapiwebapi.component.ts bij met het volgende codefragment.

De code:

  1. Maakt gebruik van de klasse Angular HttpClient om de web-API aan te roepen.
  2. Leest het element van protectedResources.todoListApi.endpoint de auth-config klasse. Met dit element wordt de web-API-URI opgegeven. Op basis van de web-API-URI verkrijgt de MSAL-interceptor een toegangstoken met de bijbehorende bereiken.
  3. Haalt het profiel op van de web-API en stelt 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 in de map src/app/webapiwebapi.component.html bij met het volgende HTML-fragment. De sjabloon van het onderdeel geeft de naam weer die de web-API retourneert. Onder aan de pagina geeft de sjabloon het web-API-adres weer.

<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 bestand webapi.component.css 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 waar de toepassing wordt gehost.

Listening on port 4200...

Tip

U kunt ook het foutopsporingsprogramma van Visual Studio Code gebruiken om de npm start-opdracht uit te voeren. Het foutopsporingsprogramma helpt bij het versnellen van uw bewerkings-, compileer- en foutopsporingslus.

Ga in de browser naar http://localhost:4200 om de toepassing te bekijken.

Volgende stappen