教程：从 Angular 单页应用调用 API

项目
12/18/2024

本教程是演示如何生成 Angular 单页应用 (SPA) 的系列教程的第 4 部分，将使用 Microsoft 标识平台进行身份验证。在本教程中，你将从 Angular SPA 调用 Microsoft 图形 API。

本教程的内容：

创建对 Microsoft Graph 的 API 调用
测试应用程序

先决条件

教程：在 Angular 单页应用程序中添加登录和退出登录

创建对 Microsoft Graph 的 API 调用

要将 Angular 应用程序配置为与 Microsoft 图形 API 交互，请完成以下步骤：

打开 src/app/app.module.ts 文件，并添加以下代码片段：
```
// 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://microsoftgraph.chinacloudapi.cn/v1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}
```
MSALInterceptorConfigFactory 函数可配置 MSAL 侦听器以请求受保护资源的访问令牌。它会创建一个将 Microsoft 图形 API 终结点 https://microsoftgraph.chinacloudapi.cn/v1.0/me 与 user.read 权限链接在一起的 protectedResourceMap。然后，该函数会返回一个 MsalInterceptorConfiguration，以指定 interactionType 的 Redirect 并包括 protectedResourceMap，从而允许拦截器自动向 API 请求添加访问令牌。

打开 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://microsoftgraph.chinacloudapi.cn/v1.0/me')
      .subscribe(profile => {
        this.profile = profile;
      });

    this.tokenExpiration = localStorage.getItem('tokenExpiration')!;
  }
}

Angular 中的 ProfileComponent 会从 Microsoft Graph 的 /me 终结点中提取用户配置文件数据。它定义了 ProfileType 来构建如 displayName 和 mail 等属性。在 ngOnInit 中，它使用 HttpClient 发送 GET 请求，从而将响应分配给 profile。它还从 tokenExpiration 中的 localStorage 检索和存储令牌过期时间。

打开 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 值，并包括一条说明，指出在缓存的访问令牌接近过期之前，刷新页面将会使用该令牌，并将在过期后请求新的令牌。

测试应用程序

要测试应用程序，请完成以下步骤：

通过在终端中执行以下命令来运行 Angular 应用程序：
```
ng serve --open
```
选择“登录”按钮，以向 Microsoft Entra 租户进行身份验证。
登录后，选择“查看配置文件”链接以导航到“配置文件”页。验证是否显示用户配置文件信息，包括用户名、电子邮件、职务和其他详细信息。
选择“退出登录”按钮以退出应用程序。

后续步骤

尝试以下有关如何构建 Web API 的系列教程，了解如何使用 Microsoft 标识平台。

教程：在 Microsoft 标识平台注册 Web API

通过

教程：从 Angular 单页应用调用 API

先决条件

创建对 Microsoft Graph 的 API 调用

测试应用程序

后续步骤

其他资源