教學課程：從 Angular 單頁應用程式呼叫 API

發行項
11/12/2024

本教學課程是一系列的第 4 部分，示範如何建置 Angular 單頁應用程式（SPA），其會使用 Microsoft 身分識別平台進行驗證。在本教學課程中，您會從 Angular SPA 呼叫 Microsoft Graph API。

在本教學課程中：

建立 Microsoft Graph 的 API 呼叫
測試應用程式

必要條件

教學課程：在 Angular 單頁應用程式中新增登入和註銷

建立 Microsoft Graph 的 API 呼叫

若要設定 Angular 應用程式以與 Microsoft Graph 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://graph.microsoft.com/v1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}
```
函 MSALInterceptorConfigFactory 式會設定 MSAL 攔截器，以要求受保護資源的存取令牌。它會建立 protectedResourceMap，並將 Microsoft Graph API 端點 https://graph.microsoft.com/v1.0/me 與 user.read 許可權連結。然後，函式會 MsalInterceptorConfiguration 傳回，指定 Redirect interactionType 並包含 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://graph.microsoft.com/v1.0/me')
      .subscribe(profile => {
        this.profile = profile;
      });

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

ProfileComponent In Angular 會從 Microsoft Graph 的/me端點擷取使用者配置文件數據。它會定義 ProfileType 結構屬性，例如 displayName 和 mail。在中 ngOnInit，它會使用 HttpClient 傳送 GET 要求，將回應指派給 profile。它也會從 localStorage 擷 tokenExpiration取並儲存令牌到期時間。

開啟檔案， 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、 displayNamejobTitle。它也會顯示 tokenExpiration 值，並包含指出重新整理頁面將會使用快取存取令牌，直到快取存取令牌接近到期為止，之後才會要求新的令牌。

測試應用程式

若要測試應用程式，請完成下列步驟：

在終端機中執行下列命令，以執行 Angular 應用程式：
```
ng serve --open
```
選取 [ 登入 ] 按鈕，向您的 Microsoft Entra 租用戶進行驗證。
登入之後，選取 [檢視配置檔] 連結以流覽至 [配置檔] 頁面。確認顯示使用者配置檔資訊，包括使用者的名稱、電子郵件、職稱和其他詳細數據。
選取 [ 註銷 ] 按鈕以註銷應用程式。

下一步

透過下列教學課程系列，瞭解如何建置 Web API 以使用 Microsoft 身分識別平台。

教學課程：以 Microsoft 身分識別平台註冊 Web API

共用方式為

教學課程：從 Angular 單頁應用程式呼叫 API

必要條件

建立 Microsoft Graph 的 API 呼叫

測試應用程式

下一步

意見反應

其他資源