Abilitare l'autenticazione nell'applicazione Angular usando Azure Active Directory B2C

Articolo
01/11/2024

Questo articolo illustra come aggiungere l'autenticazione di Azure Active Directory B2C (Azure AD B2C) alla propria applicazione a pagina singola Angular. Informazioni su come integrare un'applicazione Angular con MSAL per Angular libreria di autenticazione.

Usare questo articolo con l'articolo correlato intitolato Configurare l'autenticazione in un esempio Angular'applicazione a pagina singola. Sostituire l'app di esempio Angular con la propria app Angular. Dopo aver completato i passaggi descritti in questo articolo, l'applicazione accetterà gli accessi tramite Azure AD B2C.

Prerequisiti

Completare i passaggi descritti nell'articolo Configurare l'autenticazione in un esempio Angular'applicazione a pagina singola.

Creare un progetto di app Angular

È possibile usare un progetto di app Angular esistente o crearne uno nuovo. Per creare un nuovo progetto, eseguire i comandi seguenti.

I comandi:

Installare l'interfaccia della riga di comando di Angular usando gestione pacchetti npm.
Creare un'area di lavoro Angular con un modulo di routing. Il nome dell'app è msal-angular-tutorial. È possibile modificarlo in qualsiasi nome di app Angular valido, ad esempio contoso-car-service.
Passare alla cartella della directory dell'app.

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

Installare le dipendenze

Per installare le librerie MSAL Browser e MSAL Angular nell'applicazione, eseguire il comando seguente nella shell dei comandi:

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

Installare la libreria dei componenti del materiale Angular (facoltativa per l'interfaccia utente):

npm install @angular/material @angular/cdk

Aggiungere i componenti di autenticazione

Il codice di esempio è costituito dai componenti seguenti:

Componente	Tipo	Descrizione
auth-config.ts	Costanti	Questo file di configurazione contiene informazioni sul provider di identità di Azure AD B2C e sul servizio API Web. L'app Angular usa queste informazioni per stabilire una relazione di trust con Azure AD B2C, accedere e disconnettere l'utente, acquisire i token e convalidare i token.
app.module.ts	modulo Angular	Questo componente descrive il modo in cui le parti dell'applicazione si adattano tra loro. Si tratta del modulo radice usato per eseguire il bootstrap e aprire l'applicazione. In questa procedura dettagliata si aggiungono alcuni componenti al modulo app.module.ts e si avvia la libreria MSAL con l'oggetto di configurazione MSAL.
app-routing.module.ts	modulo di routing Angular	Questo componente consente la navigazione interpretando un URL del browser e caricando il componente corrispondente. In questa procedura dettagliata si aggiungono alcuni componenti al modulo di routing e si proteggono i componenti con MSAL Guard. Solo gli utenti autorizzati possono accedere ai componenti protetti.
app.component.*	componente Angular	Il `ng new` comando ha creato un progetto Angular con un componente radice. In questa procedura dettagliata si modifica il componente dell'app per ospitare la barra di spostamento superiore. La barra di spostamento contiene vari pulsanti, inclusi i pulsanti di accesso e disconnessione. La `app.component.ts` classe gestisce gli eventi di accesso e disconnesso.
home.component.*	componente Angular	In questa procedura dettagliata si aggiunge il componente home per eseguire il rendering della home page per l'accesso anonimo. Questo componente illustra come verificare se un utente ha eseguito l'accesso.
profile.component.*	componente Angular	In questa procedura dettagliata si aggiunge il componente del profilo per informazioni su come leggere le attestazioni del token ID.
webapi.component.*	componente Angular	In questa procedura dettagliata si aggiunge il componente webapi per informazioni su come chiamare un'API Web.

Per aggiungere i componenti seguenti all'app, eseguire i comandi dell'interfaccia della riga di comando di Angular seguenti. I generate component comandi:

Creare una cartella per ogni componente. La cartella contiene i file TypeScript, HTML, CSS e test.
Aggiornare i app.module.ts file e app-routing.module.ts con riferimenti ai nuovi componenti.

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

Aggiungere le impostazioni dell'app

Le impostazioni per il provider di identità di Azure AD B2C e l'API Web vengono archiviate nel file auth-config.ts . Nella cartella src/app creare un file denominato auth-config.ts contenente il codice seguente. Modificare quindi le impostazioni come descritto nella versione 3.1 Configurare l'esempio di 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: []
};

Avviare le librerie di autenticazione

Le applicazioni client pubbliche non sono attendibili per mantenere i segreti dell'applicazione in modo sicuro, quindi non hanno segreti client. Nella cartella src/app aprire app.module.ts e apportare le modifiche seguenti:

Importare le librerie MSAL Angular e MSAL Browser.
Importare il modulo di configurazione di Azure AD B2C.
Importare HttpClientModule. Il client HTTP viene usato per chiamare le API Web.
Importare l'intercettore HTTP Angular. MSAL usa l'intercettore per inserire il token di connessione nell'intestazione di autorizzazione HTTP.
Aggiungere i materiali Angular essenziali.
Creare un'istanza di MSAL usando l'oggetto applicazione client pubblica con più account. L'inizializzazione MSAL include il passaggio:
1. Oggetto di configurazione per auth-config.ts.
2. Oggetto di configurazione per la protezione del routing.
3. Oggetto di configurazione per l'intercettore MSAL. La classe dell'intercettore acquisisce automaticamente i token per le richieste in uscita che usano la classe Angular HttpClient per le risorse protette note.
Configurare i HTTP_INTERCEPTORSprovider di Angular e MsalGuard .
Aggiungere MsalRedirectComponent al bootstrap Angular.

Nella cartella src/app modificare app.module.ts e apportare le modifiche illustrate nel frammento di codice seguente. Le modifiche vengono contrassegnate con "Le modifiche iniziano qui" e "Modifiche terminano qui".

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

Configurare le route

In questa sezione configurare le route per l'applicazione Angular. Quando un utente seleziona un collegamento nella pagina per spostarsi all'interno dell'applicazione a pagina singola o immette un URL nella barra degli indirizzi, le route eseguono il mapping dell'URL a un componente Angular. L'interfaccia Angular routing canActivate usa MSAL Guard per verificare se l'utente ha eseguito l'accesso. Se l'utente non ha eseguito l'accesso, MSAL porta l'utente ad Azure AD B2C per l'autenticazione.

Nella cartella src/app modificare app-routing.module.ts apportare le modifiche illustrate nel frammento di codice seguente. Le modifiche vengono contrassegnate con "Le modifiche iniziano qui" e "Modifiche terminano qui".

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

In questa sezione vengono aggiunti i pulsanti di accesso e disconnessione al componente dell'app . Nella cartella src/app aprire il file app.component.ts e apportare le modifiche seguenti:

Importare i componenti necessari.
Modificare la classe per implementare il metodo OnInit. Il OnInit metodo sottoscrive l'evento osservabile MSAL MsalBroadcastServiceinProgress$ . Usare questo evento per conoscere lo stato delle interazioni utente, in particolare per verificare che le interazioni siano state completate.

Prima di interagire con l'oggetto account MSAL, verificare che la InteractionStatus proprietà restituisca InteractionStatus.None. L'evento subscribe chiama il setLoginDisplay metodo per verificare se l'utente è autenticato.
Aggiungere variabili di classe.
Aggiungere il metodo che avvia il flusso di login autorizzazione.
Aggiungere il logout metodo che disconnette l'utente.
Aggiungere il setLoginDisplay metodo che verifica se l'utente è autenticato.
Aggiungere il metodo ngOnDestroy per pulire l'evento inProgress$ di sottoscrizione.

Dopo le modifiche, il codice dovrebbe essere simile al frammento di codice seguente:

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

Nella cartella src/app modificare app.component.html e apportare le modifiche seguenti:

Aggiungere un collegamento ai componenti dell'API Web e del profilo.
Aggiungere il pulsante di accesso con l'attributo evento click impostato sul login() metodo . Questo pulsante viene visualizzato solo se la variabile di loginDisplay classe è false.
Aggiungere il pulsante di disconnessione con l'attributo evento click impostato sul logout() metodo . Questo pulsante viene visualizzato solo se la variabile di loginDisplay classe è true.
Aggiungere un elemento router-outlet .

Dopo le modifiche, il codice dovrebbe essere simile al frammento di codice seguente:

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

Facoltativamente, aggiornare il file app.component.css con il frammento CSS seguente:

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

  a.title {
    color: white;
  }

Gestire i reindirizzamenti dell'app

Quando si usano reindirizzamenti con MSAL, è necessario aggiungere la direttiva di reindirizzamento dell'app a index.html. Nella cartella src modificare index.html come illustrato nel frammento di codice seguente:

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

Impostare css dell'app (facoltativo)

Nella cartella /src aggiornare il file styles.css con il frammento CSS seguente:

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

Suggerimento

A questo punto, è possibile eseguire l'app e testare l'esperienza di accesso. Per eseguire l'app, vedere la sezione Esegui l'applicazione Angular.

Verificare se un utente è autenticato

Il file home.component illustra come verificare se l'utente è autenticato. Nella cartella src/app/home aggiornare home.component.ts con il frammento di codice seguente.

Il codice:

Sottoscrive gli eventi msalBroadcastServicemsalSubject$ e inProgress$ osservabili.
Assicura che l'evento msalSubject$ scrive il risultato dell'autenticazione nella console del browser.
Assicura che l'evento inProgress$ verifichi se un utente è autenticato. Il getAllAccounts() metodo restituisce uno o più oggetti.

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

Nella cartella src/app/home aggiornare home.component.html con il frammento HTML seguente. La direttiva *ngIf controlla la loginDisplay variabile di classe per visualizzare o nascondere i messaggi di benvenuto.

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

Leggere le attestazioni del token ID

Il file profile.component illustra come accedere alle attestazioni del token ID dell'utente. Nella cartella src/app/profile aggiornare profile.component.ts con il frammento di codice seguente.

Il codice:

Importa i componenti necessari.
Sottoscrive l'evento osservabile MSAL MsalBroadcastServiceinProgress$ . L'evento carica l'account e legge le attestazioni del token ID.
Assicura che il checkAndSetActiveAccount metodo controlli e imposta l'account attivo. Questa azione è comune quando l'app interagisce con più flussi utente di Azure AD B2C o criteri personalizzati.
Assicura che il getClaims metodo ottenga le attestazioni del token ID dall'oggetto account MSAL attivo. Il metodo aggiunge quindi le attestazioni alla dataSource matrice. La matrice viene eseguito il rendering all'utente con l'associazione del modello del componente.

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

Nella cartella src/app/profile aggiornare profile.component.html con il frammento HTML seguente:

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

Chiamare un'API Web

Per chiamare un'API Web di autorizzazione basata su token, l'app deve avere un token di accesso valido. Il provider MsalInterceptor acquisisce automaticamente i token per le richieste in uscita che usano la classe HttpClient Angular per le risorse protette note.

Importante

Il metodo di inizializzazione MSAL (nella app.module.ts classe) esegue il mapping delle risorse protette, ad esempio API Web, con gli ambiti dell'app necessari usando l'oggetto protectedResourceMap . Se il codice deve chiamare un'altra API Web, aggiungere l'URI dell'API Web e il metodo HTTP dell'API Web, con gli ambiti corrispondenti, all'oggetto protectedResourceMap . Per altre informazioni, vedere Mappa risorse protette.

Quando l'oggetto HttpClient chiama un'API Web, il provider MsalInterceptor esegue la procedura seguente:

Acquisisce un token di accesso con le autorizzazioni necessarie (ambiti) per l'endpoint api Web.
Passa il token di accesso come token di connessione nell'intestazione di autorizzazione della richiesta HTTP usando questo formato:
```
Authorization: Bearer <access-token>
```

Il file webapi.component illustra come chiamare un'API Web. Nella cartella src/app/webapi aggiornare webapi.component.ts con il frammento di codice seguente.

Il codice:

Usa la classe Angular HttpClient per chiamare l'API Web.
Legge l'elemento auth-config della protectedResources.todoListApi.endpoint classe. Questo elemento specifica l'URI dell'API Web. In base all'URI dell'API Web, l'intercettatore MSAL acquisisce un token di accesso con gli ambiti corrispondenti.
Ottiene il profilo dall'API Web e imposta la profile variabile di classe.

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

Nella cartella src/app/webapi aggiornare webapi.component.html con il frammento HTML seguente. Il modello del componente esegue il rendering del nome restituito dall'API Web. Nella parte inferiore della pagina il modello esegue il rendering dell'indirizzo API Web.

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

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

Facoltativamente, aggiornare il file webapi.component.css con il frammento CSS seguente:

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

Eseguire l'applicazione Angular

Eseguire il comando seguente:

npm start

La finestra della console visualizza il numero della porta in cui è ospitata l'applicazione.

Listening on port 4200...

Suggerimento

In alternativa, per eseguire il comando, usare il npm startdebugger di Visual Studio Code. Il debugger consente di accelerare la modifica, la compilazione e il ciclo di debug.

Passare a http://localhost:4200 nel browser per visualizzare l'applicazione.

Condividi tramite

Abilitare l'autenticazione nell'applicazione Angular usando Azure Active Directory B2C

Prerequisiti

Creare un progetto di app Angular

Installare le dipendenze

Aggiungere i componenti di autenticazione

Aggiungere le impostazioni dell'app

Avviare le librerie di autenticazione

Configurare le route

Gestire i reindirizzamenti dell'app

Impostare css dell'app (facoltativo)

Verificare se un utente è autenticato

Leggere le attestazioni del token ID

Chiamare un'API Web

Eseguire l'applicazione Angular

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Abilitare l'autenticazione nell'applicazione Angular usando Azure Active Directory B2C

Prerequisiti

Creare un progetto di app Angular

Installare le dipendenze

Aggiungere i componenti di autenticazione

Aggiungere le impostazioni dell'app

Avviare le librerie di autenticazione

Configurare le route

Aggiungere i pulsanti di accesso e disconnessione

Gestire i reindirizzamenti dell'app

Impostare css dell'app (facoltativo)

Verificare se un utente è autenticato

Leggere le attestazioni del token ID

Chiamare un'API Web

Eseguire l'applicazione Angular

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive