Hitelesítés engedélyezése saját Angular-alkalmazásban az Azure Active Directory B2C használatával

Fontos

2025. május 1-jére az Azure AD B2C már nem lesz elérhető az új ügyfelek számára. További információ a GYIK-ben.

Ez a cikk bemutatja, hogyan adhat hozzá Azure Active Directory B2C-hitelesítést (Azure AD B2C) saját Angular egyoldalas alkalmazásához (SPA). Megtudhatja, hogyan integrálhat egy Angular-alkalmazást az MSAL for Angular hitelesítési kódtárával.

Ez a cikk a hitelesítés konfigurálása egy egyoldalas mintaalkalmazásban című cikkével együtt használható. Cserélje le az Angular-mintaalkalmazást a saját Angular-alkalmazásra. A cikkben ismertetett lépések elvégzése után az alkalmazás elfogadja a bejelentkezéseket az Azure AD B2C-vel.

Előfeltételek

Hajtsa végre a hitelesítés konfigurálása című témakör lépéseit egy egyoldalas Angular-mintaalkalmazás-cikkben .

Angular-alkalmazásprojekt létrehozása

Használhat egy meglévő Angular-alkalmazásprojektet, vagy létrehozhat egy újat. Új projekt létrehozásához futtassa az alábbi parancsokat.

A parancsok:

1. Telepítse az Angular CLI-t az npm-csomagkezelővel.
2. Hozzon létre egy Angular-munkaterületet egy útválasztási modullal. Az alkalmazás neve .msal-angular-tutorial Bármilyen érvényes Angular-alkalmazásnévre módosíthatja, például contoso-car-service.
3. Váltson az alkalmazáskönyvtár mappára.

npm install -g @angular/cli 
ng new msal-angular-tutorial --routing=true --style=css --strict=false
cd msal-angular-tutorial

A függőségek telepítése

Az MSAL Browser és az MSAL Angular kódtárak alkalmazásba való telepítéséhez futtassa a következő parancsot a parancshéjban:

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

Telepítse az Angular Material összetevőtárat (nem kötelező, felhasználói felület esetén):

npm install @angular/material @angular/cdk

A hitelesítési összetevők hozzáadása

A mintakód a következő összetevőkből áll:

Összetevő	típus	Leírás
auth-config.ts	Állandók	Ez a konfigurációs fájl információkat tartalmaz az Azure AD B2C-identitásszolgáltatóról és a webes API-szolgáltatásról. Az Angular-alkalmazás ezen információk alapján megbízhatósági kapcsolatot létesít az Azure AD B2C-vel, bejelentkezik és kijelentkezteti a felhasználót, jogkivonatokat szerez be, és érvényesíti a jogkivonatokat.
app.module.ts	Angular modul	Ez az összetevő azt ismerteti, hogy az alkalmazásrészek hogyan illeszkednek egymáshoz. Ez az a gyökérmodul, amellyel elindíthatja és megnyithatja az alkalmazást. Ebben az útmutatóban néhány összetevőt hozzáad a app.module.ts modulhoz, és elindítja az MSAL-kódtárat az MSAL konfigurációs objektummal.
app-routing.module.ts	Szögletes útválasztó modul	Ez az összetevő lehetővé teszi a navigációt egy böngésző URL-címének értelmezésével és a megfelelő összetevő betöltésével. Ebben az útmutatóban néhány összetevőt hozzáad az útválasztási modulhoz, és az összetevőket az MSAL Guard használatával védi. Csak a jogosult felhasználók férhetnek hozzá a védett összetevőkhöz.
app.component.*	Angular komponens	A ng new parancs létrehozott egy Angular-projektet egy gyökérösszetevővel. Ebben az útmutatóban módosítja az app összetevőt, hogy az a felső navigációs sávot üzemeltesse. A navigációs sáv különböző gombokat tartalmaz, beleértve a bejelentkezési és kijelentkezési gombokat. Az app.component.ts osztály kezeli a bejelentkezési és bejelentkezési eseményeket.
home.component.*	Angular komponens	Ebben az útmutatóban hozzáadja a kezdőlap összetevőt a kezdőlap névtelen hozzáféréshez való megjelenítéséhez. Ez az összetevő bemutatja, hogyan ellenőrizheti, hogy egy felhasználó bejelentkezett-e.
profil.összetevő.*	Angular komponens	Ebben az útmutatóban hozzáadja a profil komponenst, hogy megtudja, hogyan olvassa el az azonosító jogkivonat jogcímeit.
webapi.component.*	Angular komponens	Ebben az útmutatóban hozzáadja a webapi összetevőt, amelyből megtudhatja, hogyan hívhat meg webes API-t.

Az alábbi összetevők alkalmazáshoz való hozzáadásához futtassa az alábbi Angular CLI-parancsokat. A generate component parancsok:

1. Hozzon létre egy mappát az egyes összetevőkhöz. A mappa tartalmazza a TypeScript-, HTML-, CSS- és tesztfájlokat.
2. Frissítse az app.module.ts új összetevőkre mutató hivatkozásokat tartalmazó fájlokat és app-routing.module.ts fájlokat.

ng generate component home
ng generate component profile
ng generate component webapi

Az alkalmazásbeállítások hozzáadása

Az Azure AD B2C-identitásszolgáltató és a webes API beállításai a auth-config.ts fájlban vannak tárolva. Az src/app mappában hozzon létre egy auth-config.ts nevű fájlt, amely a következő kódot tartalmazza. Ezután módosítsa a beállításokat a 3.1-ben leírt módon. Konfigurálja az Angular-mintát.

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

A hitelesítési kódtárak indítása

A nyilvános ügyfélalkalmazások nem megbízhatók az alkalmazás titkos kulcsának biztonságos megőrzéséhez, így nem rendelkeznek titkos ügyfélkódokkal. Az src/app mappában nyissa meg a app.module.ts , és végezze el a következő módosításokat:

1. Importálja az MSAL Angular- és MSAL-böngészőtárakat.
2. Importálja az Azure AD B2C konfigurációs modult.
3. Importál HttpClientModule. A HTTP-ügyfél webes API-k meghívására szolgál.
4. Importálja az Angular HTTP interceptort. Az MSAL az elfogóval injektálja a tulajdonosi jogkivonatot a HTTP-engedélyezési fejlécbe.
5. Adja hozzá az alapvető Angular-anyagokat.
6. Hozzon létre egy MSAL példányt a több fiókos nyilvános ügyfélalkalmazás-objektum használatával. Az MSAL inicializálása magában foglalja a továbbítást:
   1. A auth-config.ts konfigurációs objektuma.
   2. Az útválasztási védő konfigurációs objektuma.
   3. Az MSAL-elfogó konfigurációs objektuma. Az interceptor osztály automatikusan jogkivonatokat szerez be kimenő kérésekhez, amelyek az Angular HttpClient osztályt használják ismert védett erőforrásokhoz.
7. Konfigurálja a HTTP_INTERCEPTORS és a MsalGuardAngular-szolgáltatókat.
8. Adja hozzá MsalRedirectComponent az Angular bootstrap-hez.

Az src/app mappában szerkessze app.module.ts , és végezze el a módosításokat az alábbi kódrészletben. A módosítások a "Változások itt kezdődnek" és "A módosítások itt érnek véget" felirattal vannak megjelölve.

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

Útvonalak konfigurálása

Ebben a szakaszban konfigurálja az Angular-alkalmazás útvonalait. Ha egy felhasználó kiválaszt egy hivatkozást a lapon az egyoldalas alkalmazáson belüli áthelyezéshez, vagy beír egy URL-címet a címsorba, az útvonalak az URL-címet egy Angular-összetevőre képezik le. Az Angular routing canActivate interfész MSAL Guard használatával ellenőrzi, hogy a felhasználó bejelentkezett-e. Ha a felhasználó nincs bejelentkezve, az MSAL az Azure AD B2C-be viszi a felhasználót a hitelesítéshez.

Az src/app mappában szerkessze az app-routing.module.ts fájlt, és hajtsa végre a módosításokat az alábbi kódrészlet szerint. A módosítások a "Változások itt kezdődnek" és "A módosítások itt érnek véget" felirattal vannak megjelölve.

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

A bejelentkezési és kijelentkezés gomb hozzáadása

Ebben a szakaszban hozzáadja a bejelentkezési és kijelentkezés gombokat az alkalmazás összetevőjéhez. Az src/app mappában nyissa meg a app.component.ts fájlt, és végezze el a következő módosításokat:

1. Importálja a szükséges összetevőket.

2. Módosítsa az osztályt az OnInit metódus implementálásához. A OnInit metódus feliratkozik az MSAL MsalBroadcastServiceinProgress$ megfigyelhető eseményre. Ez az esemény a felhasználói interakciók állapotának megismerésére használható, különösen az interakciók befejezésének ellenőrzéséhez.

   Mielőtt interakcióba lép az MSAL-fiók objektumával, ellenőrizze, hogy a tulajdonság visszaadja-eInteractionStatus.InteractionStatus.None Az subscribe esemény meghívja a setLoginDisplay metódust annak ellenőrzésére, hogy a felhasználó hitelesítése megtörtént-e.

3. Osztályváltozók hozzáadása.

4. Adja hozzá az login engedélyezési folyamatot elindító metódust.

5. Adja hozzá a logout metódust, amely kijelentkezteti a felhasználót.

6. Adja hozzá azt a setLoginDisplay metódust, amely ellenőrzi, hogy a felhasználó hitelesítése megtörtént-e.

7. Adja hozzá az ngOnDestroy metódust a feliratkozási inProgress$ esemény törléséhez.

A módosítások után a kódnak a következő kódrészlethez hasonlóan kell kinéznie:

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

Az src/app mappában szerkessze aapp.component.html , és végezze el a következő módosításokat:

1. Adjon hozzá egy hivatkozást a profilhoz és a webes API-összetevőkhöz.
2. Adja hozzá a bejelentkezési gombot a metódushoz login() beállított kattintási eseményattribútummal. Ez a gomb csak akkor jelenik meg, ha az loginDisplay osztályváltozó false.
3. Adja hozzá a kijelentkezési gombot a metódushoz logout() beállított kattintási eseményattribútummal. Ez a gomb csak akkor jelenik meg, ha az loginDisplay osztályváltozó true.
4. Adjon hozzá egy útválasztó-aljzat elemet.

A módosítások után a kódnak a következő kódrészlethez hasonlóan kell kinéznie:

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

Ha szükséges, frissítse a app.component.css fájlt a következő CSS-kódrészlettel:

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

  a.title {
    color: white;
  }

Az alkalmazás átirányításainak kezelése

Ha átirányításokat használ az MSAL-lel, hozzá kell adnia az app-redirect direktívát a index.html-hoz. Az src mappában szerkessze aindex.html az alábbi kódrészletben látható módon:

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

Alkalmazás CSS beállítása (nem kötelező)

A /src mappában frissítse a styles.css fájlt a következő CSS-kódrészlettel:

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

Jótanács

Ezen a ponton futtathatja az alkalmazást, és tesztelheti a bejelentkezési élményt. Az alkalmazás futtatásához tekintse meg az Angular-alkalmazás futtatása szakaszt .

Annak ellenőrzése, hogy a felhasználó hitelesítése megtörtént-e

A home.component fájl bemutatja, hogyan ellenőrizheti, hogy a felhasználó hitelesítése megtörtént-e. Az src/app/home mappában frissítse home.component.ts a következő kódrészlettel.

A kód:

1. Feliratkozik az MSAL MsalBroadcastService szolgáltatásramsalSubject$ és inProgress$ a megfigyelhető eseményekre.
2. Biztosítja, hogy az msalSubject$ esemény írja a hitelesítési eredményt a böngészőkonzolra.
3. Biztosítja, hogy az inProgress$ esemény ellenőrizze, hogy egy felhasználó hitelesítve van-e. A getAllAccounts() metódus egy vagy több objektumot ad vissza.

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

Az src/app/home mappában frissítse home.component.html a következő HTML-kódrészlettel. A *ngIf direktíva ellenőrzi az loginDisplay osztályváltozót az üdvözlő üzenetek megjelenítéséhez vagy elrejtéséhez.

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

Az azonosító token állításainak olvasása

A profile.component fájl bemutatja, hogyan férhet hozzá a felhasználó ID token állításaihoz. Az src/app/profil mappában frissítse profile.component.ts a következő kódrészlettel.

A kód:

1. Importálja a szükséges összetevőket.
2. Feliratkozik az MSAL MsalBroadcastServiceinProgress$ megfigyelhető eseményre. Az esemény betölti a fiókot, és beolvassa az azonosító jogkivonat tulajdonságait.
3. Biztosítja, hogy a checkAndSetActiveAccount metódus ellenőrizze és beállítsa az aktív fiókot. Ez a művelet akkor gyakori, ha az alkalmazás több Azure AD B2C felhasználói folyamattal vagy egyéni szabályzattal kommunikál.
4. Biztosítja, hogy a getClaims metódus lekérje az ID token jogcímeit az aktív MSAL-fiókobjektumból. A metódus ezután hozzáadja a jogcímeket a dataSource tömbhöz. A tömb a komponens sablonkötésével jelenik meg a felhasználó számára.

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

Az src/app/profile mappában frissítse profile.component.html a következő HTML-kódrészlettel:

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

Hívj meg egy webes API-t

Jogkivonatalapú engedélyezési webes API meghívásához az alkalmazásnak érvényes hozzáférési jogkivonattal kell rendelkeznie. Az MsalInterceptor-szolgáltató automatikusan jogkivonatokat szerez be az Angular HttpClient osztályt használó kimenő kérelmekhez az ismert védett erőforrásokhoz.

Fontos

Az MSAL inicializálási módszer (a app.module.ts osztályban) leképezi a védett erőforrásokat, például a webes API-kat a szükséges alkalmazásterületekkel a protectedResourceMap objektum használatával. Ha a kódnak egy másik webes API-t kell meghívnia, adja hozzá a webes API URI-t és a webes API HTTP-metódust a megfelelő hatókörökkel az protectedResourceMap objektumhoz. További információ: Védett erőforrás-térkép.

Amikor a HttpClient objektum webes API-t hív meg, az MsalInterceptor-szolgáltató a következő lépéseket hajtja végre:

1. A webes API-végponthoz szükséges engedélyekkel (hatókörökkel) rendelkező hozzáférési jogkivonatot szerez be.

2. A http-kérelem engedélyezési fejlécében a következő formátumban adja át a hozzáférési jogkivonatot tulajdonosi jogkivonatként:

   Authorization: Bearer <access-token>
   

A webapi.component fájl bemutatja, hogyan hívhat meg webes API-t. Az src/app/webapi mappában frissítse a webapi.component.ts a következő kódrészlettel.

A kód:

1. Az Angular HttpClient osztály használatával hívja meg a webes API-t.
2. Beolvassa a(z) auth-config osztály protectedResources.todoListApi.endpoint elemét. Ez az elem a webes API URI-t adja meg. A webes API URI-cím alapján az MSAL interceptor egy hozzáférési token-t szerez be a megfelelő hatókörökkel.
3. Lekéri a profilt a webes API-ból, és beállítja az osztályváltozót profile .

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;
      });
  }
}

Az src/app/webapi mappában frissítse webapi.component.html a következő HTML-kódrészlettel. Az összetevő sablonja megjeleníti a webes API által visszaadott nevet. A lap alján a sablon megjeleníti a webes API-címet.

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

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

Szükség esetén frissítse a webapi.component.css fájlt a következő CSS-kódrészlettel:

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

Az Angular-alkalmazás futtatása

Futtassa a következő parancsot:

npm start

A konzolablakban annak a portnak a száma látható, ahol az alkalmazás üzemel.

Listening on port 4200...

Jótanács

Alternatívaként, a npm start parancs futtatásához használja a Visual Studio Code hibakeresőt. A hibakereső segít felgyorsítani a szerkesztési, fordítási és hibakeresési ciklust.

Nyissa meg a böngészőben a http://localhost:4200 hivatkozást az alkalmazás megtekintéséhez.

Következő lépések

• Hitelesítési beállítások konfigurálása saját Angular-alkalmazásban az Azure AD B2C használatával
• Hitelesítés engedélyezése a saját webes API-ban