Tutorial: Chamar uma API a partir de um aplicativo Angular de página única

Este tutorial é a parte 4 de uma série que demonstra a criação de um aplicativo de página única (SPA) Angular, que usa a plataforma de identidade da Microsoft para autenticação. Neste tutorial, você chama a API do Microsoft Graph a partir do seu SPA Angular.

Neste tutorial:

• Criar a chamada de API para o Microsoft Graph
• Testar a aplicação

Pré-requisitos

• Tutorial: Adicionar login e logout em seu aplicativo Angular de página única

Criar a chamada de API para o Microsoft Graph

Para configurar seu aplicativo Angular para interagir com a API do Microsoft Graph, conclua as seguintes etapas:

1. Abra o src/app/app.module.ts arquivo e adicione o seguinte trecho 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
     };
   }
   

   A MSALInterceptorConfigFactory função configura o MSAL Intercetor para solicitar tokens de acesso para recursos protegidos. Ele cria um protectedResourceMap, vinculando o ponto de extremidade https://graph.microsoft.com/v1.0/me da API do Microsoft Graph com a user.read permissão. Em seguida, a função retorna um MsalInterceptorConfiguration que especifica Redirect e interactionType inclui o protectedResourceMap, permitindo que o intercetador adicione tokens de acesso às solicitações de API automaticamente.

2. Abra o src/app/profile/profile.component.ts arquivo e substitua o conteúdo pelo seguinte trecho 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')!;
     }
   }
   

   O ProfileComponent in Angular busca dados de perfil de usuário do ponto de extremidade do /me Microsoft Graph. Ele define ProfileType para estruturar propriedades como displayName e mail. No ngOnInit, ele usa HttpClient para enviar uma solicitação GET, atribuindo a resposta a profile. Ele também recupera e armazena o tempo de expiração do token a partir do localStorage .tokenExpiration

3. Abra o src/app/profile/profile.component.html arquivo e substitua o conteúdo pelo seguinte trecho 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>
   

   Esse código define um modelo HTML que exibe informações de perfil de usuário, usando a sintaxe de interpolação do Angular para vincular propriedades do profile objeto (Por exemplo., businessPhones, displayNamejobTitle, ). Ele também mostra o tokenExpiration valor e inclui uma nota informando que a atualização da página usará o token de acesso armazenado em cache até que ele se aproxime da expiração, após o qual um novo token será solicitado.

Testar a aplicação

Para testar o aplicativo, conclua as seguintes etapas:

1. Execute o aplicativo Angular executando o seguinte comando no terminal:

   ng serve --open
   

2. Selecione o botão Entrar para autenticar com seu locatário do Microsoft Entra.

3. Depois de entrar, selecione o link Exibir perfil para navegar até a página Perfil . Verifique se as informações do perfil do usuário são exibidas, incluindo o nome do usuário, e-mail, cargo e outros detalhes.

   

4. Selecione o botão Sair para sair do aplicativo.

Próximos passos

Saiba como usar a plataforma de identidade da Microsoft experimentando a seguinte série de tutoriais sobre como criar uma API da Web.

Tutorial: Registrar uma API da Web com a plataforma de identidade da Microsoft