Руководство. Вызов API из одностраничного приложения Angular

Это руководство является частью 4 серии, демонстрирующей создание одностраничного приложения Angular (SPA), которое использует платформа удостоверений Майкрософт для проверки подлинности. В этом руководстве вы вызываете API Microsoft Graph из spa Angular.

В этом руководстве рассматриваются следующие темы:

• Создание вызова API в Microsoft Graph
• Тестирование приложения

Необходимые компоненты

• Руководство. Добавление входа и выход в одностраничные приложения Angular

Создание вызова API в Microsoft Graph

Чтобы настроить приложение Angular для взаимодействия с API Microsoft Graph, выполните следующие действия.

1. Откройте файл и замените содержимое src/app/profile/profile.component.ts следующим фрагментом кода:

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

   В ProfileComponent Angular извлекает данные профиля пользователя из конечной точки Microsoft Graph /me . Он определяет ProfileType структуру свойств, таких как displayName и mail. В ngOnInitнем используется HttpClient для отправки запроса GET, назначая ответ profile. Он также извлекает и сохраняет время истечения срока действия маркера.localStoragetokenExpiration

2. Откройте файл и замените содержимое src/app/profile/profile.component.html следующим фрагментом кода:

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

   Этот код определяет HTML-шаблон, отображающий сведения о профиле пользователя, используя синтаксис интерполяции Angular для привязки свойств объекта profile (например, businessPhones, , displayName). jobTitle Он также отображает tokenExpiration значение и содержит примечание о том, что обновление страницы будет использовать кэшированный маркер доступа до истечения срока действия, после чего будет запрошен новый маркер.

Тестирование приложения

Чтобы протестировать приложение, выполните следующие действия.

1. Запустите приложение Angular, выполнив следующую команду в терминале:

   ng serve --open
   

2. Нажмите кнопку входа , чтобы пройти проверку подлинности в клиенте Microsoft Entra.

3. После входа выберите ссылку "Профиль представления", чтобы перейти на страницу "Профиль". Убедитесь, что отображаются сведения профиля пользователя, включая имя пользователя, электронную почту, название задания и другие сведения.

   

4. Нажмите кнопку выхода , чтобы выйти из приложения.

Следующие шаги

Узнайте, как использовать платформа удостоверений Майкрософт, попробовав приведенный ниже серию руководств по созданию веб-API.

Руководство. Регистрация веб-API с помощью платформа удостоверений Майкрософт