教學課程：使用 Angular SPA 擷取用戶數據

適用於： 工作團隊租戶 外部租戶（深入瞭解）

本教學課程是一系列的最後一部分，示範如何使用 Microsoft 身分識別平臺建置 Angular 單頁應用程式 （SPA） 和新增驗證。 在此系列 的第 2 部分中，您已建立了 Angular SPA，並已為工作群租戶的驗證做好準備。

在本教學指南中，您將會

• 將數據處理新增至 Angular 應用程式。
• 測試應用程式並擷取用戶數據。

先決條件

• 教學：在 Angular 單頁應用程式中新增登入和登出

擷取數據以在應用程式UI中檢視

Workforce 租戶

若要設定 Angular 應用程式以與 Microsoft Graph API 互動，請完成下列步驟：

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

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

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 值，並附上說明指出，重新整理頁面將使用快取的存取令牌，直至該令牌接近過期，然後才會請求新的令牌。

外部租戶

您會將 Angular 應用程式設定為在登入時，在識別碼令牌中顯示宣告。

1. 在 src/app/ 資料夾中建立名為 claim-utils.ts 的檔案，並將下列代碼段貼入其中。

   /**
    * Populate claims table with appropriate description
    * @param {Record} claims ID token claims
    * @returns claimsTable
    */
   export const createClaimsTable = (claims: Record<string, string>): any[] => {
     const claimsTable: any[] = [];
   
     Object.keys(claims).map((key) => {
       switch (key) {
         case 'aud':
           populateClaim(
             key,
             claims[key],
             "Identifies the intended recipient of the token. In ID tokens, the audience is your app's Application ID, assigned to your app in the Azure portal.",
             claimsTable
           );
           break;
         case 'iss':
           populateClaim(
             key,
             claims[key],
             'Identifies the issuer, or authorization server that constructs and returns the token. It also identifies the Azure AD tenant for which the user was authenticated. If the token was issued by the v2.0 endpoint, the URI will end in /v2.0.',
             claimsTable
           );
           break;
         case 'iat':
           populateClaim(
             key,
             changeDateFormat(+claims[key]),
             '"Issued At" indicates the timestamp (UNIX timestamp) when the authentication for this user occurred.',
             claimsTable
           );
           break;
         case 'nbf':
           populateClaim(
             key,
             changeDateFormat(+claims[key]),
             'The nbf (not before) claim dictates the time (as UNIX timestamp) before which the JWT must not be accepted for processing.',
             claimsTable
           );
           break;
         case 'exp':
           populateClaim(
             key,
             changeDateFormat(+claims[key]),
             "The exp (expiration time) claim dictates the expiration time (as UNIX timestamp) on or after which the JWT must not be accepted for processing. It's important to note that in certain circumstances, a resource may reject the token before this time. For example, if a change in authentication is required or a token revocation has been detected.",
             claimsTable
           );
           break;
         case 'name':
           populateClaim(
             key,
             claims[key],
             "The name claim provides a human-readable value that identifies the subject of the token. The value isn't guaranteed to be unique, it can be changed, and it's designed to be used only for display purposes. The 'profile' scope is required to receive this claim.",
             claimsTable
           );
           break;
         case 'preferred_username':
           populateClaim(
             key,
             claims[key],
             'The primary username that represents the user. It could be an email address, phone number, or a generic username without a specified format. Its value is mutable and might change over time. Since it is mutable, this value must not be used to make authorization decisions. It can be used for username hints, however, and in human-readable UI as a username. The profile scope is required in order to receive this claim.',
             claimsTable
           );
           break;
         case 'nonce':
           populateClaim(
             key,
             claims[key],
             'The nonce matches the parameter included in the original /authorize request to the IDP.',
             claimsTable
           );
           break;
         case 'oid':
           populateClaim(
             key,
             claims[key],
             'The oid (user object id) is the only claim that should be used to uniquely identify a user in an Azure AD tenant.',
             claimsTable
           );
           break;
         case 'tid':
           populateClaim(
             key,
             claims[key],
             'The id of the tenant where this application resides. You can use this claim to ensure that only users from the current Azure AD tenant can access this app.',
             claimsTable
           );
           break;
         case 'upn':
           populateClaim(
             key,
             claims[key],
             'upn (user principal name) might be unique amongst the active set of users in a tenant but tend to get reassigned to new employees as employees leave the organization and others take their place or might change to reflect a personal change like marriage.',
             claimsTable
           );
           break;
         case 'email':
           populateClaim(
             key,
             claims[key],
             'Email might be unique amongst the active set of users in a tenant but tend to get reassigned to new employees as employees leave the organization and others take their place.',
             claimsTable
           );
           break;
         case 'acct':
           populateClaim(
             key,
             claims[key],
             'Available as an optional claim, it lets you know what the type of user (homed, guest) is. For example, for an individuals access to their data you might not care for this claim, but you would use this along with tenant id (tid) to control access to say a company-wide dashboard to just employees (homed users) and not contractors (guest users).',
             claimsTable
           );
           break;
         case 'sid':
           populateClaim(
             key,
             claims[key],
             'Session ID, used for per-session user sign-out.',
             claimsTable
           );
           break;
         case 'sub':
           populateClaim(
             key,
             claims[key],
             'The sub claim is a pairwise identifier - it is unique to a particular application ID. If a single user signs into two different apps using two different client IDs, those apps will receive two different values for the subject claim.',
             claimsTable
           );
           break;
         case 'ver':
           populateClaim(
             key,
             claims[key],
             'Version of the token issued by the Microsoft identity platform',
             claimsTable
           );
           break;
         case 'login_hint':
           populateClaim(
             key,
             claims[key],
             'An opaque, reliable login hint claim. This claim is the best value to use for the login_hint OAuth parameter in all flows to get SSO.',
             claimsTable
           );
           break;
         case 'idtyp':
           populateClaim(
             key,
             claims[key],
             'Value is app when the token is an app-only token. This is the most accurate way for an API to determine if a token is an app token or an app+user token',
             claimsTable
           );
           break;
         case 'uti':
         case 'rh':
           break;
         default:
           populateClaim(key, claims[key], '', claimsTable);
       }
     });
   
     return claimsTable;
   };
   
   /**
    * Populates claim, description, and value into an claimsObject
    * @param {String} claim
    * @param {String} value
    * @param {String} description
    * @param {Array} claimsObject
    */
   const populateClaim = (
     claim: string,
     value: string,
     description: string,
     claimsTable: any[]
   ): void => {
     claimsTable.push({
       claim: claim,
       value: value,
       description: description,
     });
   };
   
   /**
    * Transforms Unix timestamp to date and returns a string value of that date
    * @param {number} date Unix timestamp
    * @returns
    */
   const changeDateFormat = (date: number) => {
     let dateObj = new Date(date * 1000);
     return `${date} - [${dateObj.toString()}]`;
   };
   

2. 開啟 src/index.html，並以下列代碼段取代程式代碼。

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>Microsoft identity platform</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.svg">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
   <body class="mat-typography">
     <app-root></app-root>
     <app-redirect></app-redirect>
   </body>
   </html>
   

3. 開啟 src/app/guarded/guarded.component.ts，並以下列代碼段取代現有的程式代碼。

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-guarded',
     templateUrl: './guarded.component.html',
     styleUrls: ['./guarded.component.css']
   })
   export class GuardedComponent implements OnInit {
   
     constructor() { }
   
     ngOnInit(): void {
     }
   
   }
   

測試應用程式

若要讓應用程式運作，您必須執行 Angular 應用程式並登入，以向您的 Microsoft Entra 租使用者進行驗證，並擷取用戶數據。

Workforce 租戶

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

1. 在終端機中執行下列命令，以執行 Angular 應用程式：

   ng serve --open
   

2. 選取 登入 按鈕，以向您的 Microsoft Entra 租戶進行驗證。

3. 登入之後，選取 [檢視配置檔] 連結，以流覽至 [配置檔] 頁面。 確認顯示使用者檔案資訊，包括使用者的名稱、電子郵件、職稱和其他細節。

   

4. 選取 註銷 按鈕以登出應用程式。

外部租戶

1. 在應用程式資料夾的命令列提示字元中執行下列命令，以啟動網頁伺服器：

   npm install
   npm start
   

2. 在您的瀏覽器中，輸入 http://localhost:4200 以開啟應用程式。

   

3. 選取畫面右上角的 [登入] 按鈕。

4. 登入之後，您會看到頁面上顯示的個人資料資訊。

   

5. 選取畫面右上角的 [註銷] 按鈕來註銷。

後續步驟

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

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