Freigeben über

Aktivieren der Authentifizierung in Ihrer eigenen Angular-Anwendung mithilfe von Azure Active Directory B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel erfahren Sie, wie Sie Ihrer eigenen Angular-Single-Page-Anwendung (SPA) die Azure Active Directory B2C-Authentifizierung (Azure AD B2C) hinzufügen. Erfahren Sie, wie Sie eine Angular-Anwendung in die MSAL für Angular-Authentifizierungsbibliothek integrieren.

Verwenden Sie diesen Artikel zusammen mit dem verwandten Artikel Konfigurieren der Authentifizierung in einer Single-Page-Beispielanwendung von Angular. Ersetzen Sie die Angular-Beispiel-App durch Ihre eigene Angular-App. Nachdem Sie die Schritte in diesem Artikel ausgeführt haben, akzeptiert Ihre Anwendung Anmeldungen über Azure AD B2C.

Voraussetzungen

Führen Sie die Schritte im Artikel Konfigurieren der Authentifizierung in einer Single-Page-Beispielanwendung für Angular aus.

Erstellen eines Angular-App-Projekts

Sie können ein vorhandenes Angular-App-Projekt verwenden oder ein neues erstellen. Führen Sie die folgenden Befehle aus, um ein neues Projekt zu erstellen.

Die Befehle:

  1. Installieren Sie die Angular CLI mithilfe des npm-Paket-Managers.
  2. Erstellen Sie einen Angular-Arbeitsbereich mit einem Routing-Modul. Der App-Name lautet msal-angular-tutorial. Sie können ihn in einen beliebigen gültigen Angular-App-Namen ändern, z. B contoso-car-service. .
  3. Wechseln Sie in den Ordner des App-Verzeichnisses.
npm install -g @angular/cli 
ng new msal-angular-tutorial --routing=true --style=css --strict=false
cd msal-angular-tutorial

Installieren der Abhängigkeiten

Um den MSAL-Browser und die MSAL Angular-Bibliotheken in Ihrer Anwendung zu installieren, führen Sie den folgenden Befehl in der Befehlsshell aus:

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

Installieren Sie die Komponentenbibliothek "Angular Material " (optional, für die Benutzeroberfläche):

npm install @angular/material @angular/cdk

Hinzufügen der Authentifizierungskomponenten

Der Beispielcode besteht aus den folgenden Komponenten:

Komponente Typ BESCHREIBUNG
auth-config.ts Konstanten Diese Konfigurationsdatei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter und dem Web-API-Dienst. Die Angular-App verwendet diese Informationen, um eine Vertrauensstellung mit Azure AD B2C herzustellen, den Benutzer an- und abzumelden, Token abzurufen und die Token zu überprüfen.
app.module.ts Angular-Modul Diese Komponente beschreibt, wie die Anwendungsteile zusammenpassen. Dies ist das Root-Modul, das zum Bootstrapping und Öffnen der Anwendung verwendet wird. In dieser exemplarischen Vorgehensweise fügen Sie dem app.module.ts-Modul einige Komponenten hinzu, und Sie starten die MSAL-Bibliothek mit dem MSAL-Konfigurationsobjekt .
app-routing.module.ts Winkel-Routing-Modul Diese Komponente ermöglicht die Navigation, indem sie eine Browser-URL interpretiert und die entsprechende Komponente lädt. In dieser exemplarischen Vorgehensweise fügen Sie dem Routingmodul einige Komponenten hinzu, und Sie schützen Komponenten mit MSAL Guard. Nur autorisierte Benutzer können auf die geschützten Komponenten zugreifen.
app.component.* Angular-Komponente Mit dem ng new Befehl wurde ein Angular-Projekt mit einer Root-Komponente erstellt. In dieser exemplarischen Vorgehensweise ändern Sie die App-Komponente so, dass sie die obere Navigationsleiste hostet. Die Navigationsleiste enthält verschiedene Schaltflächen, darunter Schaltflächen zum An- und Abmelden. Die app.component.ts Klasse behandelt die Anmelde- und Abmeldeereignisse.
home.component.* Angular-Komponente In dieser exemplarischen Vorgehensweise fügen Sie die Startkomponente hinzu, um die Startseite für den anonymen Zugriff zu rendern. Diese Komponente veranschaulicht, wie überprüft wird, ob sich ein Benutzer angemeldet hat.
profile.component.* Angular-Komponente In dieser Schritt-für-Schritt-Anleitung fügen Sie die Profilkomponente hinzu, um zu erfahren, wie Sie die ID-Token-Claims lesen.
webapi.component.* Angular-Komponente In dieser exemplarischen Vorgehensweise fügen Sie die webapi-Komponente hinzu, um zu erfahren, wie eine Web-API aufgerufen wird.

Um Ihrer App die folgenden Komponenten hinzuzufügen, führen Sie die folgenden Angular CLI-Befehle aus. Die generate component-Befehle haben folgende Aufgaben:

  1. Erstellen Sie für jede Komponente einen Ordner. Der Ordner enthält die TypeScript-, HTML-, CSS- und Testdateien.
  2. Aktualisieren Sie die app.module.ts, app-routing.module.ts Dateien mit Verweisen auf die neuen Komponenten.
ng generate component home
ng generate component profile
ng generate component webapi

Hinzufügen der App-Einstellungen

Die Einstellungen für den Azure AD B2C-Identitätsanbieter und die Web-API werden in der auth-config.ts Datei gespeichert. Erstellen Sie in Ihrem Ordner src/app eine Datei mit dem Namen auth-config.ts , die den folgenden Code enthält. Ändern Sie dann die Einstellungen, wie in 3.1 Konfigurieren des Angular-Beispiels beschrieben.

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: []
};

Starten der Authentifizierungsbibliotheken

Öffentliche Clientanwendungen sind nicht vertrauenswürdig, um Anwendungsgeheimnisse sicher aufzubewahren, daher verfügen sie nicht über geheime Clientschlüssel. Öffnen Sie im Ordner src/appapp.module.ts und nehmen Sie die folgenden Änderungen vor:

  1. Importieren Sie die MSAL Angular- und MSAL Browser-Bibliotheken.
  2. Importieren Sie das Azure AD B2C-Konfigurationsmodul.
  3. Importieren Sie HttpClientModule. Der HTTP-Client wird zum Aufrufen von Web-APIs verwendet.
  4. Importieren Sie den Angular HTTP-Interceptor. MSAL verwendet den Interceptor, um das Bearer-Token in den HTTP-Autorisierungsheader einzufügen.
  5. Fügen Sie die wesentlichen Angular-Materialien hinzu.
  6. Instanziieren Sie die MSAL mithilfe des öffentlichen Clientanwendungsobjekts mit mehreren Konten. Die MSAL-Initialisierung umfasst die Übergabe von:
    1. Das Konfigurationsobjekt für auth-config.ts.
    2. Das Konfigurationsobjekt für den Routing-Wächter.
    3. Das Konfigurationsobjekt für den MSAL-Interceptor. Die Interceptor-Klasse bezieht automatisch Token für ausgehende Anforderungen, die die HttpClient-Klasse von Angular für bekannte geschützte Ressourcen verwenden.
  7. Konfigurieren Sie die HTTP_INTERCEPTORS und MsalGuardAngular-Anbieter.
  8. Fügen Sie MsalRedirectComponent dem Angular-Bootstrap hinzu.

Bearbeiten Sie im Ordner src/appapp.module.ts , und nehmen Sie die im folgenden Codeausschnitt gezeigten Änderungen vor. Die Änderungen werden mit "Änderungen beginnen hier" und "Änderungen enden hier" gekennzeichnet.

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 { }

Konfigurieren von Routen

Konfigurieren Sie in diesem Abschnitt die Routen für Ihre Angular-Anwendung. Wenn ein Benutzer einen Link auf der Seite auswählt, um ihn innerhalb Ihrer Single-Page-Anwendung zu verschieben, oder eine URL in die Adressleiste eingibt, ordnen die Routen die URL einer Angular-Komponente zu. Die canActivate-Schnittstelle des Angular-Routings verwendet MSAL Guard, um zu überprüfen, ob der Benutzer angemeldet ist. Wenn der Benutzer nicht angemeldet ist, leitet MSAL den Benutzer zur Authentifizierung zu Azure AD B2C weiter.

Nehmen Sie im Ordner src/app die im folgenden Codeausschnitt gezeigten Änderungen in der Datei app-routing.module.ts vor. Die Änderungen werden mit "Änderungen beginnen hier" und "Änderungen enden hier" gekennzeichnet.

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 { }

Hinzufügen der Schaltflächen für die An- und Abmeldung

In diesem Abschnitt fügen Sie der App-Komponente die Schaltflächen für die An- und Abmeldung hinzu. Öffnen Sie im Ordner src/app die Datei app.component.ts , und nehmen Sie die folgenden Änderungen vor:

  1. Importieren Sie die erforderlichen Komponenten.

  2. Ändern Sie die Klasse, um die OnInit-Methode zu implementieren. Die OnInit-Methode abonniert MSAL MsalBroadcastService das beobachtbare Ereignis inProgress$. Verwenden Sie dieses Ereignis, um den Status von Benutzerinteraktionen zu ermitteln, insbesondere um zu überprüfen, ob Interaktionen abgeschlossen sind.

    Überprüfen Sie vor Interaktionen mit dem MSAL-Kontoobjekt, ob die InteractionStatus Eigenschaft InteractionStatus.None zurückgibt. Das subscribe Ereignis ruft die setLoginDisplay Methode auf, um zu überprüfen, ob der Benutzer authentifiziert ist.

  3. Fügen Sie Klassenvariablen hinzu.

  4. Fügen Sie die login-Methode hinzu, die den Autorisierungsfluss startet.

  5. Fügen Sie die logout Methode hinzu, mit der der Benutzer abgemeldet wird.

  6. Fügen Sie die Methode hinzu, mit der setLoginDisplay überprüft wird, ob der Benutzer authentifiziert ist.

  7. Fügen Sie die ngOnDestroy-Methode hinzu, um das inProgress$ subscribe-Ereignis zu bereinigen.

Nach den Änderungen sollte der Code wie der folgende Codeausschnitt aussehen:

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. */
}

Bearbeiten Sie im src/app-Ordner app.component.html und nehmen Sie die folgenden Änderungen vor.

  1. Fügen Sie einen Link zu den Profil- und Web-API-Komponenten hinzu.
  2. Fügen Sie die Login-Schaltfläche hinzu, wobei das Klickereignis-Attribut auf die login() Methode gesetzt ist. Diese Schaltfläche wird nur angezeigt, wenn die Klassenvariable loginDisplay den Wert false hat.
  3. Fügen Sie die Abmeldeschaltfläche mit auf die logout()-Methode festgelegtem Klickereignisattribut hinzu. Diese Schaltfläche wird nur angezeigt, wenn die Klassenvariable loginDisplay den Wert true hat.
  4. Fügen Sie ein Router-Outlet-Element hinzu.

Nach den Änderungen sollte der Code wie der folgende Codeausschnitt aussehen:

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

Aktualisieren Sie optional die app.component.css Datei mit dem folgenden CSS-Codeausschnitt :

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

  a.title {
    color: white;
  }

Verwalten der App-Umleitungen

Wenn Sie Umleitungen mit MSAL verwenden, müssen Sie die App-Umleitungsdirektive zu index.htmlhinzufügen. Bearbeiten Sie den Ordner "src" und index.html, wie im folgenden Codeausschnitt gezeigt:

<!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>

Festlegen von App-CSS (optional)

Aktualisieren Sie im Ordner /src die styles.css Datei mit dem folgenden CSS-Codeausschnitt :

@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%; }

Tipp

An diesem Punkt können Sie Ihre App ausführen und die Anmeldung testen. Informationen zum Ausführen Ihrer App finden Sie im Abschnitt Ausführen der Angular-Anwendung .

Überprüfen, ob ein Benutzer authentifiziert ist

Die Datei home.component veranschaulicht, wie überprüft wird, ob der Benutzer authentifiziert ist. Aktualisieren Sie home.component.ts im Ordner src/app/home mit dem folgenden Codeausschnitt.

Der Code:

  1. Abonniert MSAL MsalBroadcastService und die beobachtbaren Ereignisse msalSubject$ und inProgress$.
  2. Stellt sicher, dass das msalSubject$ Ereignis das Authentifizierungsergebnis in die Browserkonsole schreibt.
  3. Stellt sicher, dass das inProgress$ Ereignis überprüft, ob ein Benutzer authentifiziert ist. Die getAllAccounts() Methode gibt ein oder mehrere Objekte zurück.
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;
  }
}

Aktualisieren Sie den Inhalt in der Datei "src/app/home" und ersetzen Sie home.component.html durch das folgende HTML-Snippet. Die *ngIf-Direktive prüft die loginDisplay Klassenvariable, um die Begrüßungsnachrichten ein- oder auszublenden.

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

Lesen der ID-Tokenansprüche

Die Datei profile.component veranschaulicht, wie auf die ID-Tokenansprüche des Benutzers zugegriffen wird. Aktualisieren Sie profile.component.ts im Ordner src/app/profile mit dem folgenden Codeausschnitt.

Der Code:

  1. Importiert die erforderlichen Komponenten.
  2. Abonniert MSAL MsalBroadcastService und das beobachtbare Ereignis inProgress$. Das Ereignis lädt das Konto und liest die ID-Tokenansprüche.
  3. Stellt sicher, dass die checkAndSetActiveAccount Methode das aktive Konto überprüft und festlegt. Diese Aktion ist häufig der Fall, wenn die App mit mehreren Azure AD B2C-Benutzerflows oder benutzerdefinierten Richtlinien interagiert.
  4. Stellt sicher, dass die getClaims-Methode die ID-Tokenansprüche aus dem aktiven MSAL-Kontoobjekt abruft. Die Methode fügt dann die Ansprüche dem dataSource Array hinzu. Das Array wird für die Benutzenden mit der Vorlagenbindung der Komponente gerendert.
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;
}

Aktualisieren Sie im Ordner src/app/profileprofile.component.html mit dem folgenden HTML-Codeausschnitt:

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

Aufrufen einer Web-API

Um eine tokenbasierte Autorisierungsweb-API aufzurufen, muss die App über ein gültiges Zugriffstoken verfügen. Der MsalInterceptor-Anbieter ruft automatisch Token für ausgehende Anforderungen ab, die die Angular HttpClient-Klasse für bekannte geschützte Ressourcen verwenden.

Von Bedeutung

Die MSAL-Initialisierungsmethode (in der app.module.ts Klasse) ordnet geschützte Ressourcen, z. B. Web-APIs, mithilfe des protectedResourceMap Objekts den erforderlichen App-Bereichen zu. Wenn Ihr Code eine andere Web-API aufrufen muss, fügen Sie dem protectedResourceMap Objekt den Web-API-URI und die Web-API-HTTP-Methode mit den entsprechenden Bereichen hinzu. Weitere Informationen finden Sie unter Protected Resource Map.

Wenn das HttpClient-Objekt eine Web-API aufruft, führt der MsalInterceptor-Anbieter die folgenden Schritte aus:

  1. Erwirbt ein Zugriffstoken mit den erforderlichen Berechtigungen (Bereichen) für den Web-API-Endpunkt.

  2. Übergibt das Zugriffstoken als Bearertoken im Autorisierungsheader der HTTP-Anforderung mithilfe dieses Formats:

    Authorization: Bearer <access-token>

Die Datei webapi.component veranschaulicht, wie eine Web-API aufgerufen wird. Aktualisieren Sie webapi.component.ts im Ordner src/app/webapi mit dem folgenden Codeausschnitt.

Der Code:

  1. Verwendet die Angular HttpClient-Klasse , um die Web-API aufzurufen.
  2. Liest das auth-config Element der protectedResources.todoListApi.endpoint Klasse. Dieses Element gibt den Web-API-URI an. Basierend auf dem URI der Web-API bezieht der MSAL-Interceptor ein Zugriffstoken mit den entsprechenden Geltungsbereichen.
  3. Ruft das Profil von der Web-API ab und legt die profile Klassenvariable fest.
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;
      });
  }
}

Aktualisieren Sie im Ordner src/app/webapiwebapi.component.html mit dem folgenden HTML-Codeausschnitt. Die Vorlage der Komponente rendert den Namen, den die Web-API zurückgibt. Am unteren Rand der Seite rendert die Vorlage die Web-API-Adresse.

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

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

Aktualisieren Sie optional die webapi.component.css Datei mit dem folgenden CSS-Codeausschnitt :

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

Ausführen der Angular-Anwendung

Führen Sie den folgenden Befehl aus:

npm start

Im Konsolenfenster wird die Nummer des Ports angezeigt, an dem die Anwendung gehostet wird.

Listening on port 4200...

Tipp

Verwenden Sie alternativ zum Ausführen des npm start Befehls den Visual Studio Code-Debugger. Der Debugger beschleunigt die Bearbeitungs-, Kompilierungs- und Debugschleife.

Gehen Sie in Ihrem Browser zu http://localhost:4200, um die Anwendung anzuzeigen.

Nächste Schritte