Esercitazione: Chiamare un'API da un'app a pagina singola Angular

Questa esercitazione è la parte 4 di una serie che illustra la creazione di un'app a pagina singola Angular che usa Microsoft Identity Platform per l'autenticazione. In questa esercitazione si chiama l'API Microsoft Graph dall'applicazione a pagina singola angular.

Contenuto dell'esercitazione:

Prerequisiti

• Esercitazione: Aggiungere l'accesso e disconnettersi nell'applicazione a pagina singola Angular

Creare la chiamata API a Microsoft Graph

Per configurare l'applicazione Angular per interagire con l'API Microsoft Graph, seguire questa procedura:

1. Aprire il src/app/app.module.ts file e aggiungere il frammento di codice seguente:

   // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
   export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
     const protectedResourceMap = new Map<string, Array<string>>();
     protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
   
     return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
   

   La MSALInterceptorConfigFactory funzione configura l'intercettore MSAL per richiedere token di accesso per le risorse protette. Crea un oggetto protectedResourceMap, che collega l'endpoint https://graph.microsoft.com/v1.0/me dell'API Microsoft Graph con l'autorizzazione user.read . La funzione restituisce quindi un oggetto MsalInterceptorConfiguration che specifica Redirect per interactionType e include , protectedResourceMapconsentendo all'intercettore di aggiungere automaticamente token di accesso alle richieste API.

2. Aprire il src/app/profile/profile.component.ts file e sostituire il contenuto con il frammento di codice seguente:

   // Required for Angular
   import { Component, OnInit } from '@angular/core';
   
   // Required for the HTTP GET request to Graph
   import { HttpClient } from '@angular/common/http';
   
   type ProfileType = {
     businessPhones?: string,
     displayName?: string,
     givenName?: string,
     jobTitle?: string,
     mail?: string,
     mobilePhone?: string,
     officeLocation?: string,
     preferredLanguage?: string,
     surname?: string,
     userPrincipalName?: string,
     id?: string
   }
   
   @Component({
     selector: 'app-profile',
     templateUrl: './profile.component.html'
   })
   export class ProfileComponent implements OnInit {
     profile!: ProfileType;
     tokenExpiration!: string;
   
     constructor(
       private http: HttpClient
     ) { }
   
     // When the page loads, perform an HTTP GET request from the Graph /me endpoint
     ngOnInit() {
       this.http.get('https://graph.microsoft.com/v1.0/me')
         .subscribe(profile => {
           this.profile = profile;
         });
   
       this.tokenExpiration = localStorage.getItem('tokenExpiration')!;
     }
   }
   

   In ProfileComponent Angular recupera i dati del profilo utente dall'endpoint di /me Microsoft Graph. ProfileType Definisce per strutturare proprietà come displayName e mail. In ngOnInit, usa HttpClient per inviare una richiesta GET, assegnando la risposta a profile. Recupera e archivia anche l'ora di scadenza del token da localStorage in tokenExpiration.

3. Aprire il src/app/profile/profile.component.html file e sostituire il contenuto con il frammento di codice seguente:

   <div class="profile">
       <p><strong>Business Phones:</strong> {{profile?.businessPhones}}</p>
       <p><strong>Display Name:</strong> {{profile?.displayName}}</p>
       <p><strong>Given Name:</strong> {{profile?.givenName}}</p>
       <p><strong>Job Title:</strong> {{profile?.jobTitle}}</p>
       <p><strong>Mail:</strong> {{profile?.mail}}</p>
       <p><strong>Mobile Phone:</strong> {{profile?.mobilePhone}}</p>
       <p><strong>Office Location:</strong> {{profile?.officeLocation}}</p>
       <p><strong>Preferred Language:</strong> {{profile?.preferredLanguage}}</p>
       <p><strong>Surname:</strong> {{profile?.surname}}</p>
       <p><strong>User Principal Name:</strong> {{profile?.userPrincipalName}}</p>
       <p><strong>Profile Id:</strong> {{profile?.id}}</p>
       <br><br>
       <p><strong>Token Expiration:</strong> {{tokenExpiration}}</p>
       <br><br>
       <p>Refreshing this page will continue to use the cached access token until it nears expiration, at which point a new access token will be requested.</p>
   </div>
   

   Questo codice definisce un modello HTML che visualizza le informazioni sul profilo utente, usando la sintassi di interpolazione di Angular per associare le proprietà dall'oggetto profile (ad esempio, businessPhones, , displayNamejobTitle). Mostra anche il tokenExpiration valore e include una nota che indica che l'aggiornamento della pagina userà il token di accesso memorizzato nella cache fino alla scadenza, dopo il quale verrà richiesto un nuovo token.

Testare l'applicazione

Per testare l'applicazione, completare la procedura seguente:

1. Eseguire l'applicazione Angular eseguendo il comando seguente nel terminale:

   ng serve --open
   

2. Selezionare il pulsante Accedi per eseguire l'autenticazione con il tenant di Microsoft Entra.

3. Dopo l'accesso, selezionare il collegamento Visualizza profilo per passare alla pagina Profilo . Verificare che vengano visualizzate le informazioni sul profilo utente, inclusi il nome dell'utente, l'indirizzo di posta elettronica, il titolo del processo e altri dettagli.

   

4. Selezionare il pulsante Disconnetti per disconnettersi dall'applicazione.

Passaggi successivi

Informazioni su come usare Microsoft Identity Platform provando la serie di esercitazioni seguente su come creare un'API Web.