Tutorial: Llamada a una API desde una aplicación de página única de Angular

Este tutorial forma parte 4 de una serie que muestra la creación de una aplicación de página única (SPA) de Angular, que usa la plataforma de identidad de Microsoft para la autenticación. En este tutorial, llamará a Microsoft Graph API desde su SPA de Angular.

En este tutorial:

• Creación de la llamada API a Microsoft Graph
• Prueba de la aplicación

Requisitos previos

• Tutorial: Incorporación de inicio de sesión y cierre de sesión en la aplicación de página única de Angular

Creación de la llamada API a Microsoft Graph

Para configurar la aplicación de Angular para que interactúe con Microsoft Graph API, complete los pasos siguientes:

1. Abra el archivo src/app/app.module.ts y agregue el siguiente fragmento de código:

   // 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 función MSALInterceptorConfigFactory configura el interceptor de MSAL para solicitar tokens de acceso para los recursos protegidos. Crea un protectedResourceMap, vinculando el punto de conexión de Microsoft Graph API https://graph.microsoft.com/v1.0/me con el permiso user.read. A continuación, la función devuelve un MsalInterceptorConfiguration que especifica Redirect para interactionType e incluye el protectedResourceMap, lo que permite al interceptor agregar tokens de acceso a las solicitudes de API automáticamente.

2. Abra el archivo src/app/profile/profile.component.ts y reemplace el contenido por el siguiente fragmento de código:

   // 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')!;
     }
   }
   

   El ProfileComponent en Angular captura los datos del perfil de usuario del punto de conexión de /me Microsoft Graph. Define ProfileType para estructurar propiedades como displayName y mail. En ngOnInit, usa HttpClient para enviar una solicitud GET, asignando la respuesta a profile. También recupera y almacena el tiempo de expiración del token de localStorage en tokenExpiration.

3. Abra el archivo src/app/profile/profile.component.html y reemplace el contenido por el siguiente fragmento de código:

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

   Este código define una plantilla HTML que muestra información de perfil de usuario, mediante la sintaxis de interpolación de Angular para enlazar propiedades desde el objeto profile (Por ejemplo, businessPhones, displayName, jobTitle). También muestra el valor de tokenExpiration e incluye una nota que indica que la actualización de la página usará el token de acceso almacenado en caché hasta que se acerca a la expiración, después de lo cual se solicitará un nuevo token.

Prueba de la aplicación

Para probar la aplicación, complete los pasos siguientes:

1. Ejecute la aplicación angular ejecutando el siguiente comando en el terminal:

   ng serve --open
   

2. Seleccione el botón Iniciar sesión para autenticarse con el inquilino de Microsoft Entra.

3. Después de iniciar sesión, seleccione el vínculo Ver perfil para ir a la página Perfil. Compruebe que se muestra la información del perfil de usuario, incluido el nombre del usuario, el correo electrónico, el título del trabajo y otros detalles.

   

4. Seleccione el botón Cerrar sesión para cerrar la sesión de la aplicación.

Pasos siguientes

Aprenda a usar la plataforma de identidad de Microsoft probando la siguiente serie de tutoriales sobre cómo crear una API web.

Tutorial: Registrar una API web con la plataforma de identidad de Microsoft