Povolení ověřování ve vlastní aplikaci Angular pomocí Azure Active Directory B2C

Článek
01/11/2024

V tomto článku se dozvíte, jak přidat ověřování Azure Active Directory B2C (Azure AD B2C) do vlastní Angular jednostránkové aplikace (SPA). Zjistěte, jak integrovat aplikaci Angular s knihovnou MSAL pro ověřování Angular.

Použijte tento článek se souvisejícím článkem s názvem Konfigurace ověřování v ukázkové Angular jednostránkové aplikaci. Nahraďte ukázkovou aplikaci Angular vlastní aplikací Angular. Po dokončení kroků v tomto článku bude vaše aplikace přijímat přihlášení prostřednictvím Azure AD B2C.

Požadavky

Dokončete kroky v článku Konfigurace ověřování v ukázkové Angular jednostránkové aplikaci.

Vytvoření projektu aplikace Angular

Můžete použít existující projekt aplikace Angular nebo vytvořit nový. Pokud chcete vytvořit nový projekt, spusťte následující příkazy.

Příkazy:

Nainstalujte Angular CLI pomocí správce balíčků npm.
Vytvořte pracovní prostor Angular pomocí modulu směrování. Název aplikace je msal-angular-tutorial. Můžete ho změnit na libovolný platný název aplikace Angular, například contoso-car-service.
Přejděte do složky adresáře aplikace.

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

Instalace závislostí

Pokud chcete do aplikace nainstalovat knihovny MSAL Browser a MSAL Angular, spusťte v příkazovém prostředí následující příkaz:

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

Nainstalujte knihovnu komponent Angular Material (volitelné pro uživatelské rozhraní):

npm install @angular/material @angular/cdk

Přidání součástí ověřování

Ukázkový kód se skládá z následujících komponent:

Součást	Typ	Description
auth-config.ts	Konstanty	Tento konfigurační soubor obsahuje informace o zprostředkovateli identity Azure AD B2C a službě webového rozhraní API. Aplikace Angular tyto informace používá k navázání vztahu důvěryhodnosti s Azure AD B2C, přihlášení a odhlášení uživatele, získání tokenů a ověření tokenů.
app.module.ts	modul Angular	Tato komponenta popisuje, jak do sebe zapadají součásti aplikace. Toto je kořenový modul, který slouží k spuštění a otevření aplikace. V tomto návodu přidáte některé komponenty do modulu app.module.ts a spustíte knihovnu MSAL s objektem konfigurace MSAL.
app-routing.module.ts	modul směrování Angular	Tato komponenta umožňuje navigaci interpretací adresy URL prohlížeče a načtením odpovídající komponenty. V tomto názorném postupu přidáte do modulu směrování některé komponenty a chráníte je pomocí ochrany MSAL Guard. K chráněným komponentám mají přístup jenom oprávnění uživatelé.
app.component.*	Angular komponenta	Příkaz `ng new` vytvořil projekt Angular s kořenovou komponentou. V tomto návodu změníte komponentu aplikace tak, aby byla hostitelem horního navigačního panelu. Navigační panel obsahuje různá tlačítka, včetně tlačítek pro přihlášení a odhlášení. Třída `app.component.ts` zpracovává události přihlášení a odhlášení.
home.component.*	Angular komponenta	V tomto návodu přidáte domovskou komponentu pro vykreslení domovské stránky pro anonymní přístup. Tato komponenta ukazuje, jak zkontrolovat, jestli se uživatel přihlásil.
profile.component.*	Angular komponenta	V tomto návodu přidáte komponentu profilu , abyste se dozvěděli, jak číst deklarace identity tokenů ID.
webapi.component.*	Angular komponenta	V tomto návodu přidáte komponentu webapi, abyste se dozvěděli , jak volat webové rozhraní API.

Pokud chcete do aplikace přidat následující komponenty, spusťte následující příkazy rozhraní příkazového řádku Angular. Příkazy generate component :

Vytvořte složku pro každou komponentu. Složka obsahuje soubory TypeScript, HTML, CSS a testovací soubory.
app.module.ts Aktualizujte soubory a app-routing.module.ts odkazy na nové komponenty.

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

Přidání nastavení aplikace

Nastavení zprostředkovatele identity Azure AD B2C a webového rozhraní API jsou uložená v souboru auth-config.ts. Ve složce src/app vytvořte soubor s názvem auth-config.ts , který obsahuje následující kód. Pak změňte nastavení podle popisu ve 3.1 Konfigurace ukázky Angular.

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

Spuštění knihoven ověřování

Veřejným klientským aplikacím se nedůvěřuje bezpečnému uchovávání tajných kódů aplikací, takže nemají tajné kódy klienta. Ve složce src/app otevřete soubor app.module.ts a proveďte následující změny:

Importujte knihovny MSAL Angular a MSAL Browser.
Importujte konfigurační modul Azure AD B2C.
Import HttpClientModule. Klient HTTP se používá k volání webových rozhraní API.
Importujte Angular zachytávání HTTP. MSAL používá interceptor k vložení nosný token do autorizační hlavičky HTTP.
Přidejte základní Angular materiály.
Vytvořte instanci MSAL pomocí objektu aplikace veřejného klienta s více účty. Inicializace MSAL zahrnuje předání:
1. Objekt konfigurace pro auth-config.ts.
2. Objekt konfigurace pro ochranu směrování.
3. Konfigurační objekt zachytávacího objektu MSAL. Třída interceptor automaticky získá tokeny pro odchozí požadavky, které používají třídu Angular HttpClient ke známým chráněným prostředkům.
HTTP_INTERCEPTORS Nakonfigurujte zprostředkovatele aMsalGuard Angular.
Přidejte MsalRedirectComponent do Angular bootstrap.

Ve složce src/app upravte soubor app.module.ts a proveďte změny uvedené v následujícím fragmentu kódu. Změny se označí příznakem "Změny začínají tady" a "Změny končí tady".

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

Konfigurace tras

V této části nakonfigurujte trasy pro Angular aplikaci. Když uživatel vybere odkaz na stránce pro přesun v rámci jednostránkové aplikace nebo zadá adresu URL do panelu Adresa, trasy mapují adresu URL na Angular komponentu. Rozhraní Angular směrování canActivate používá msal guard ke kontrole, jestli je uživatel přihlášený. Pokud uživatel není přihlášený, služba MSAL ho přenese do Azure AD B2C k ověření.

Ve složce src/app upravte app-routing.module.ts a proveďte změny uvedené v následujícím fragmentu kódu. Změny se označí příznakem "Změny začínají tady" a "Změny končí tady".

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

V této části přidáte do komponenty aplikace tlačítka pro přihlášení a odhlášení. Ve složce src/app otevřete soubor app.component.ts a proveďte následující změny:

Importujte požadované komponenty.
Změňte třídu tak, aby implementovali metodu OnInit. Metoda OnInit se přihlásí k odběru události MSAL MsalBroadcastServiceinProgress$ observable. Tato událost slouží ke zjištění stavu uživatelských interakcí, zejména ke kontrole dokončení interakcí.

Před interakcí s objektem účtu MSAL zkontrolujte, jestli InteractionStatus vlastnost vrací InteractionStatus.None. Událost subscribe volá metodu , setLoginDisplay která zkontroluje, jestli je uživatel ověřený.
Přidejte proměnné třídy.
Přidejte metodu login , která spustí tok autorizace.
Přidejte metodu logout , která uživatele odhlásí.
Přidejte metodu setLoginDisplay , která kontroluje, jestli je uživatel ověřený.
Přidejte metodu ngOnDestroy, která vyčistí událost přihlášení k odběru inProgress$ .

Po provedení změn by měl váš kód vypadat jako následující fragment kódu:

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

Ve složce src/app upravte app.component.html a proveďte následující změny:

Přidejte odkaz na profil a komponenty webového rozhraní API.
Přidejte tlačítko pro přihlášení s atributem události click nastaveným na metodu login() . Toto tlačítko se zobrazí pouze v případě, že loginDisplay je falseproměnná třídy .
Přidejte tlačítko pro odhlášení s atributem události click nastaveným na metodu logout() . Toto tlačítko se zobrazí pouze v případě, že loginDisplay je trueproměnná třídy .
Přidejte prvek router-outlet .

Po provedení změn by měl váš kód vypadat jako následující fragment kódu:

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

Volitelně aktualizujte soubor app.component.css následujícím fragmentem kódu CSS:

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

  a.title {
    color: white;
  }

Zpracování přesměrování aplikace

Pokud používáte přesměrování s knihovnou MSAL, musíte do index.htmlpřidat direktivu app-redirect. Ve složce src upravte index.html , jak je znázorněno v následujícím fragmentu kódu:

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

Nastavení šablon stylů CSS aplikace (volitelné)

Ve složce /src aktualizujte soubor styles.css následujícím fragmentem kódu CSS:

@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

V tuto chvíli můžete aplikaci spustit a otestovat přihlašovací prostředí. Pokud chcete aplikaci spustit, přečtěte si část Spuštění Angular aplikace.

Kontrola, jestli je uživatel ověřený

Soubor home.component ukazuje, jak zkontrolovat, jestli je uživatel ověřený. Ve složce src/app/home aktualizujte soubor home.component.ts následujícím fragmentem kódu.

Kód:

Přihlásí se k odběru služby MSAL MsalBroadcastServicemsalSubject$ a inProgress$ pozorovatelných událostí.
Zajišťuje, že msalSubject$ událost zapíše výsledek ověřování do konzoly prohlížeče.
Zajišťuje, že inProgress$ událost zkontroluje, jestli je uživatel ověřený. Metoda getAllAccounts() vrátí jeden nebo více objektů.

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

Ve složce src/app/home aktualizujte home.component.html následujícím fragmentem kódu HTML. *ngIf direktiva kontroluje, jestli loginDisplay proměnná třídy zobrazuje nebo skryje uvítací zprávy.

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

Čtení deklarací identity tokenů ID

Soubor profile.component ukazuje, jak získat přístup k deklaracím identity tokenu ID uživatele. Ve složce src/app/profile aktualizujte profile.component.ts následujícím fragmentem kódu.

Kód:

Importuje požadované komponenty.
Přihlásí se k odběru pozorovatelné události MSAL MsalBroadcastServiceinProgress$ . Událost načte účet a přečte deklarace identity tokenu ID.
Zajišťuje, že metoda zkontroluje checkAndSetActiveAccount a nastaví aktivní účet. Tato akce je běžná, když aplikace komunikuje s více Azure AD toky uživatelů B2C nebo vlastními zásadami.
Zajišťuje, že getClaims metoda získá deklarace identity tokenu ID z aktivního objektu účtu MSAL. Metoda pak přidá deklarace identity do dataSource pole. Pole se uživateli vykreslí pomocí vazby šablony komponenty.

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

Ve složce src/app/profile aktualizujte profile.component.html následujícím fragmentem kódu HTML:

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

Volání webového rozhraní API

Pokud chcete volat webové rozhraní API pro autorizaci založené na tokenech, musí mít aplikace platný přístupový token. Zprostředkovatel MsalInterceptor automaticky získává tokeny pro odchozí požadavky, které používají třídu Angular HttpClient ke známým chráněným prostředkům.

Důležité

Inicializační metoda MSAL (ve app.module.ts třídě ) mapuje chráněné prostředky, jako jsou webová rozhraní API, s požadovanými obory aplikace pomocí objektu protectedResourceMap . Pokud váš kód potřebuje volat jiné webové rozhraní API, přidejte do protectedResourceMap objektu identifikátor URI webového rozhraní API a metodu HTTP webového rozhraní API s odpovídajícími obory. Další informace najdete v tématu Mapa chráněných prostředků.

Když objekt HttpClient volá webové rozhraní API, zprostředkovatel MsalInterceptor provede následující kroky:

Získá přístupový token s požadovanými oprávněními (obory) pro koncový bod webového rozhraní API.
Přístupový token předá jako nosný token v autorizační hlavičce požadavku HTTP pomocí tohoto formátu:
```
Authorization: Bearer <access-token>
```

Soubor webapi.component ukazuje, jak volat webové rozhraní API. Ve složce src/app/webapi aktualizujte webapi.component.ts následujícím fragmentem kódu.

Kód:

K volání webového rozhraní API používá třídu Angular HttpClient.
auth-config Přečte element třídyprotectedResources.todoListApi.endpoint. Tento element určuje identifikátor URI webového rozhraní API. Na základě identifikátoru URI webového rozhraní API získá zachytávač MSAL přístupový token s odpovídajícími obory.
Získá profil z webového rozhraní API a nastaví proměnnou profile třídy.

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

Ve složce src/app/webapi aktualizujtewebapi.component.html následujícím fragmentem kódu HTML. Šablona komponenty vykreslí název, který webové rozhraní API vrátí. Šablona v dolní části stránky vykreslí adresu webového rozhraní API.

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

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

Volitelně můžete soubor webapi.component.css aktualizovat následujícím fragmentem kódu CSS:

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

Spuštění aplikace Angular

Spusťte následující příkaz:

npm start

V okně konzoly se zobrazí číslo portu, kde je aplikace hostovaná.

Listening on port 4200...

Tip

Případně ke spuštění npm start příkazu použijte ladicí program editoru Visual Studio Code. Ladicí program pomáhá zrychlit smyčku úprav, kompilace a ladění.

http://localhost:4200 Aplikaci zobrazíte tak, že v prohlížeči přejdete na adresu .

Sdílet prostřednictvím

Povolení ověřování ve vlastní aplikaci Angular pomocí Azure Active Directory B2C

Požadavky

Vytvoření projektu aplikace Angular

Instalace závislostí

Přidání součástí ověřování

Přidání nastavení aplikace

Spuštění knihoven ověřování

Konfigurace tras

Zpracování přesměrování aplikace

Nastavení šablon stylů CSS aplikace (volitelné)

Kontrola, jestli je uživatel ověřený

Čtení deklarací identity tokenů ID

Volání webového rozhraní API

Spuštění aplikace Angular

Další kroky

Váš názor

Další materiály

Sdílet prostřednictvím

Povolení ověřování ve vlastní aplikaci Angular pomocí Azure Active Directory B2C

Požadavky

Vytvoření projektu aplikace Angular

Instalace závislostí

Přidání součástí ověřování

Přidání nastavení aplikace

Spuštění knihoven ověřování

Konfigurace tras

Přidání tlačítek pro přihlášení a odhlášení

Zpracování přesměrování aplikace

Nastavení šablon stylů CSS aplikace (volitelné)

Kontrola, jestli je uživatel ověřený

Čtení deklarací identity tokenů ID

Volání webového rozhraní API

Spuštění aplikace Angular

Další kroky

Váš názor

Další materiály