Condividi tramite

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

Importante

A partire dal 1° maggio 2025, Azure AD B2C non sarà più disponibile per l'acquisto per i nuovi clienti. Altre informazioni sono disponibili nelle domande frequenti.

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 la libreria di autenticazione MSAL per Angular .

Usare questo articolo con l'articolo correlato intitolato Configurare l'autenticazione in un'applicazione a pagina singola Angular di esempio. Sostituire l'app Angular di esempio 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 la procedura descritta nell'articolo Configurare l'autenticazione in un'applicazione a pagina singola angular di esempio .

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:

  1. Installare l'interfaccia della riga di comando di Angular usando gestione pacchetti npm.
  2. 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.
  3. Passare alla cartella principale 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 di Angular Material (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 integrano. 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 in modo da 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 disconnessione.
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 profile per imparare a leggere le attestazioni del token ID.
webapi.component.* Componente Angular In questa procedura dettagliata si aggiunge il componente webapi per imparare a chiamare un'API web.

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

  1. Creare una cartella per ogni componente. La cartella contiene i file TypeScript, HTML, CSS e test.
  2. 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 in 3.1 Configurare l'esempio 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 dispongono di segreti client. Nella cartella src/app aprire app.module.ts e apportare le modifiche seguenti:

  1. Importare le librerie MSAL Angular e MSAL Browser.
  2. Importare il modulo di configurazione di Azure AD B2C.
  3. Importare HttpClientModule. Il client HTTP viene usato per chiamare le API Web.
  4. Importare l'intercettore HTTP Angular. MSAL usa l'intercettore per inserire il token portatore nell'intestazione di autorizzazione HTTP.
  5. Aggiungere i materiali Angular essenziali.
  6. Creare un'istanza di MSAL usando l'oggetto applicazione client pubblica con più account. L'inizializzazione MSAL include il passaggio dei parametri:
    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 intercettore acquisisce automaticamente i token per le richieste in uscita che usano la classe Angular HttpClient per le risorse protette note.
  7. Configurare HTTP_INTERCEPTORS e i MsalGuardprovider Angular.
  8. 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 percorsi

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 canActivate del routing Angular 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 { }

Aggiungere i pulsanti di accesso e disconnessione

In questa sezione si aggiungono 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:

  1. Importare i componenti necessari.

  2. Modificare la classe per implementare il metodo OnInit. Il OnInit metodo si iscrive all'evento osservabile MSAL MsalBroadcastServiceinProgress$. Usare questo evento per conoscere lo stato delle interazioni dell'utente, in particolare per verificare che le interazioni siano completate.

    Prima delle interazioni con l'oggetto account MSAL, verificare che la proprietà InteractionStatus restituisca InteractionStatus.None. L'evento subscribe chiama il setLoginDisplay metodo per verificare se l'utente è autenticato.

  3. Aggiungere variabili di classe.

  4. Aggiungere il metodo che avvia il login flusso di autorizzazione.

  5. Aggiungere il logout metodo che disconnette l'utente.

  6. Aggiungere il setLoginDisplay metodo che controlla se l'utente è autenticato.

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

  1. Aggiungere un collegamento ai componenti del profilo e dell'API Web.
  2. Aggiungere il pulsante di accesso con l'attributo dell'evento click impostato sul metodo login(). Questo pulsante viene visualizzato solo se la variabile di loginDisplay classe è false.
  3. Aggiungere il pulsante di disconnessione con l'attributo evento di click impostato sul metodo logout(). Questo pulsante viene visualizzato solo se la variabile di loginDisplay classe è true.
  4. 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 i 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 il 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 Eseguire l'applicazione Angular .

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

  1. Sottoscrive il servizio MSAL MsalBroadcastServicemsalSubject$ e gli eventi inProgress$ osservabili.
  2. Assicura che l'evento msalSubject$ scriva il risultato dell'autenticazione nella console del browser.
  3. Assicura che l'evento inProgress$ controlli 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:

  1. Importa i componenti necessari.
  2. Sottoscrive l'evento osservabile del servizio MSAL MsalBroadcastServiceinProgress$. L'evento carica l'account e legge le attestazioni del token ID.
  3. Assicura che il metodo checkAndSetActiveAccount controlli e imposti l'account attivo. Questa azione è comune quando l'app interagisce con più flussi utente di Azure AD B2C o criteri personalizzati.
  4. Assicura che il metodo getClaims ottenga le attestazioni del token ID dall'oggetto account MSAL attivo. Il metodo aggiunge quindi le attestazioni alla dataSource matrice. Viene eseguito il rendering della matrice per l'utente tramite il binding 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 Angular HttpClient per le risorse protette note.

Importante

Il metodo di inizializzazione MSAL (nella classe app.module.ts) esegue il mapping delle risorse protette, come le API Web, agli ambiti richiesti dell'applicazione 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 Mapping delle risorse protette.

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

  1. Acquisisce un token di accesso con le autorizzazioni necessarie (ambiti) per l'endpoint dell'API web.

  2. Passa il token di accesso come token bearer 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:

  1. Usa la classe Angular HttpClient per chiamare l'API Web.
  2. 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'intercettore MSAL acquisisce un token di accesso con gli ambiti corrispondenti.
  3. Ottiene il profilo dall'API Web e imposta la variabile di profile 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

Nella finestra della console viene visualizzato il numero della porta in cui è ospitata l'applicazione.

Listening on port 4200...

Suggerimento

In alternativa, per eseguire il npm start comando, usare il debugger 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.

Passaggi successivi