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

Cikk
01/11/2024

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

Használja ezt a cikket a hitelesítés konfigurálása minta Angular egyoldalas alkalmazásban című kapcsolódó cikkel. Cserélje le a minta Angular alkalmazást a saját Angular alkalmazásával. A cikk lépéseinek elvégzése után az alkalmazás a B2C Azure AD keresztül fogadja a bejelentkezéseket.

Előfeltételek

Hajtsa végre a hitelesítés konfigurálása minta Angular egyoldalas alkalmazással foglalkozó cikkben található lépéseket.

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:

Telepítse a Angular parancssori felületet az npm csomagkezelővel.
Hozzon létre egy Angular munkaterületet egy útválasztási modullal. Az alkalmazás neve msal-angular-tutorial. Módosíthatja azt bármely érvényes Angular alkalmazásnévre, például contoso-car-service.
Váltson az alkalmazáskönyvtár mappájá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ásbeli telepítéséhez futtassa a következő parancsot a parancshéjban:

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

Telepítse a Angular Anyag összetevő-kódtárat (felhasználói felület esetén nem kötelező):

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	Description
auth-config.ts	Állandók	Ez a konfigurációs fájl információkat tartalmaz a Azure AD B2C-identitásszolgáltatóról és a webes API-szolgáltatásról. A Angular alkalmazás ezeket az adatokat használja a Azure AD B2C-vel való megbízhatósági kapcsolat létrehozásához, a felhasználó bejelentkezéséhez és kijelentkezéséhez, jogkivonatok beszerzéséhez és a jogkivonatok érvényesítéséhez.
app.module.ts	Angular modul	Ez az összetevő azt ismerteti, hogy az alkalmazás részei hogyan illeszkednek egymáshoz. Ez az a gyökérmodul, amely az alkalmazás elindításához és megnyitásához használható. Ebben az útmutatóban hozzáad néhány összetevőt az app.module.ts modulhoz, és az MSAL-kódtárat az MSAL konfigurációs objektummal indítja el.
app-routing.module.ts	Angular útválasztási 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 hozzáad néhány összetevőt az útválasztási modulhoz, és megvédi az összetevőket az MSAL Guard használatával. Csak a jogosult felhasználók férhetnek hozzá a védett összetevőkhöz.
app.component.*	Angular összetevő	A `ng new` parancs létrehozott egy Angular projektet egy gyökérösszetevővel. Ebben az útmutatóban az alkalmazás-összetevőt a felső navigációs sáv üzemeltetésére módosítja. A navigációs sáv különböző gombokat tartalmaz, köztük a bejelentkezési és a kijelentkezés gombokat. Az `app.component.ts` osztály kezeli a bejelentkezési és bejelentkezési eseményeket.
home.component.*	Angular összetevő	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.
profile.component.*	Angular összetevő	Ebben az útmutatóban hozzáadja a profilösszetevőt, hogy megtudja, hogyan olvashatja el az azonosító jogkivonat-jogcímeit.
webapi.component.*	Angular összetevő	Ebben az útmutatóban hozzáadja a webapi összetevőt, hogy megtudja, hogyan hívhat meg egy webes API-t.

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

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

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

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

A Azure AD B2C-identitásszolgáltató és a webes API beállításai az auth-config.ts fájlban vannak tárolva. Az src/app mappában hozzon létre egy auth-config.ts nevű fájlt, amely az alábbi kódot tartalmazza. Ezután módosítsa a beállításokat a 3.1-ben leírt módon: Konfigurálja a 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 elindí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 az app.module.ts fájlt, és végezze el a következő módosításokat:

Importálja az MSAL Angular és az MSAL Browser kódtárakat.
Importálja a Azure AD B2C konfigurációs modult.
Importálás HttpClientModule. A HTTP-ügyfél a webes API-k hívására szolgál.
Importálja a Angular HTTP-elfogót. Az MSAL az elfogóval adja be a tulajdonosi jogkivonatot a HTTP-engedélyezési fejlécbe.
Adja hozzá az alapvető Angular anyagokat.
Az MSAL példányosítása több fiók nyilvános ügyfélalkalmazás-objektumával. Az MSAL inicializálása a következőket tartalmazza:
1. Az 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. A interceptor osztály automatikusan jogkivonatokat szerez be a kimenő kérésekhez, amelyek a Angular HttpClient osztályt használják az ismert védett erőforrásokhoz.
Konfigurálja a és MsalGuard a HTTP_INTERCEPTORSAngular szolgáltatókat.
Adja hozzá MsalRedirectComponent a Angular bootstraphoz.

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

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 a Angular alkalmazás útvonalait. Ha egy felhasználó kiválaszt egy hivatkozást a lapon, hogy az egyoldalas alkalmazáson belül mozogjon, vagy megad egy URL-címet a címsorban, az útvonalak leképezik az URL-címet egy Angular összetevőre. Az Angular útválasztási canActivate felület az MSAL Guard használatával ellenőrzi, hogy a felhasználó bejelentkezett-e. Ha a felhasználó nincs bejelentkezve, az MSAL arra kéri a felhasználót, hogy Azure AD B2C-t a hitelesítéshez.

Az src/app mappában módosítsa az app-routing.module.ts fájlt, és végezze el a módosításokat az alábbi kódrészletben. A módosítások a következőkkel vannak megjelölve: "A módosítások itt kezdődnek" és "A módosítások itt érnek véget".

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

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

Importálja a szükséges összetevőket.
Módosítsa az osztályt az OnInit metódus implementálásához. A OnInit metódus előfizet 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-e InteractionStatus.Nonea InteractionStatus értéket. Az subscribe esemény meghívja a setLoginDisplay metódust annak ellenőrzéséhez, hogy a felhasználó hitelesítése megtörtént-e.
Osztályváltozók hozzáadása.
Adja hozzá az login engedélyezési folyamatot elindító metódust.
Adja hozzá a logout felhasználót kijelentkeztető metódust.
Adja hozzá azt a setLoginDisplay metódust, amely ellenőrzi, hogy a felhasználó hitelesítése megtörtént-e.
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 app.component.html , és végezze el a következő módosításokat:

Adjon hozzá egy hivatkozást a profil- és webes API-összetevőkhöz.
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
Adja hozzá a kijelentkezés 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
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 szeretné, frissítse az 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 szolgáltatással, hozzá kell adnia az alkalmazásátirányítási irányelvet index.html. 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%; }

Tipp

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

Ellenőrizze, 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 a home.component.ts fájlt az alábbi kódrészlettel.

A kód:

Feliratkozik az MSAL MsalBroadcastService szolgáltatásramsalSubject$ és inProgress$ a megfigyelhető eseményekre.
Biztosítja, hogy az msalSubject$ esemény írja a hitelesítési eredményt a böngészőkonzolra.
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ó-jogkivonat jogcímeinek olvasása

A profile.component fájl bemutatja, hogyan lehet hozzáférni a felhasználó azonosító jogkivonat-jogcímeihez. Az src/app/profile mappában frissítse a profile.component.ts fájlt az alábbi kódrészlettel.

A kód:

Importálja a szükséges összetevőket.
Feliratkozik az MSAL MsalBroadcastServiceinProgress$ megfigyelhető eseményre. Az esemény betölti a fiókot, és beolvassa az azonosító jogkivonat jogcímeit.
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 folyamatokkal vagy egyéni szabályzatokkal kommunikál.
Biztosítja, hogy a getClaims metódus lekérje az id token jogcímeket 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 az összetevő 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 aprofile.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>

Webes API-hívás

A 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 a kimenő kérésekhez, amelyek a Angular HttpClient osztályt használják az ismert védett erőforrásokhoz.

Fontos

Az MSAL inicializálási módszere (az osztályban) leképezi a app.module.ts védett erőforrásokat, például a webes API-kat a szükséges alkalmazáshatókörökkel az 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 együtt az protectedResourceMap objektumhoz. További információ: Védett erőforrás-megfeleltetés.

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

Hozzáférési jogkivonatot szerez be a webes API-végponthoz szükséges engedélyekkel (hatókörökkel).
A hozzáférési jogkivonatot tulajdonosi jogkivonatként adja át a HTTP-kérelem engedélyezési fejlécében az alábbi formátumban:
```
Authorization: Bearer <access-token>
```

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

A kód:

A Angular HttpClient osztály használatával hívja meg a webes API-t.
Beolvassa az auth-config osztály elemét protectedResources.todoListApi.endpoint . Ez az elem határozza meg a webes API URI-t. A webes API URI-ja alapján az MSAL elfogó eszköz egy hozzáférési jogkivonatot szerez be a megfelelő hatókörökkel.
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 az alábbi 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 az alábbi parancsot:

npm start

A konzolablak megjeleníti annak a portnak a számát, ahol az alkalmazás üzemel.

Listening on port 4200...

Tipp

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

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

Megosztás a következőn keresztül:

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

Előfeltételek

Angular alkalmazásprojekt létrehozása

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

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

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

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

Útvonalak konfigurálása

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

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

Ellenőrizze, hogy a felhasználó hitelesítése megtörtént-e

Az azonosító-jogkivonat jogcímeinek olvasása

Webes API-hívás

Az Angular alkalmazás futtatása

Következő lépések

További források

Megosztás a következőn keresztül:

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

Előfeltételek

Angular alkalmazásprojekt létrehozása

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

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

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

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

Útvonalak konfigurálása

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

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

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

Ellenőrizze, hogy a felhasználó hitelesítése megtörtént-e

Az azonosító-jogkivonat jogcímeinek olvasása

Webes API-hívás

Az Angular alkalmazás futtatása

Következő lépések

További források