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

Esse 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. Nesse tutorial, você chamará a API do Microsoft Graph a partir do seu Angular SPA.

Neste tutorial:

• Criar a chamada à API ao Microsoft Graph
• Testar o aplicativo

Pré-requisitos

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

Criar a chamada à API ao Microsoft Graph

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

1. Abra o arquivo src/app/app.module.ts 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 função MSALInterceptorConfigFactory configura o MSAL Interceptor para solicitar tokens de acesso para recursos protegidos. Ele cria um protectedResourceMap, vinculando o ponto de extremidade da API do Microsoft Graph https://graph.microsoft.com/v1.0/me com a permissão user.read. A função então retorna um MsalInterceptorConfiguration que especifica Redirect para interactionType e inclui o protectedResourceMap, permitindo que o interceptador adicione tokens de acesso às solicitações de API automaticamente.

2. Abra o arquivo src/app/profile/profile.component.ts 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 no Angular busca dados de perfil de usuário do ponto de extremidade /me do Microsoft Graph. Ele define ProfileType para estruturar propriedades como displayName e mail. Em 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 de localStorage em tokenExpiration.

3. Abra o arquivo src/app/profile/profile.component.html 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 do perfil do usuário, usando a sintaxe de interpolação do Angular para vincular propriedades do objeto profile (por exemplo., businessPhones, displayName, jobTitle). Ele também mostra o valor tokenExpiration e inclui uma nota informando que a atualização da página usará o token de acesso armazenado em cache até que ele esteja próximo da expiração, após o qual um novo token será solicitado.

Testar o aplicativo

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. Após fazer login, selecione o link Ver perfil para navegar até a página Perfil. Verifique se as informações do perfil do usuário são exibidas, incluindo nome do usuário, email, cargo e outros detalhes.

   

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

Próximas etapas

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

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