チュートリアル: Angular SPA を使用してユーザー データを抽出する

適用対象: 従業員テナント 外部テナント (詳細はこちら)

このチュートリアルは、Angular シングルページ アプリケーション (SPA) の構築と、Microsoft ID プラットフォームを使用した認証の追加を示すシリーズの最後の部分です。 このシリーズのパート 2 では、Angular SPA を作成し、従業員テナントでの認証用に準備しました。

このチュートリアルでは、次のことを行いました。

• Angular アプリケーションにデータ処理を追加します。
• アプリケーションをテストし、ユーザー データを抽出します。

前提条件

• チュートリアル: Angular シングルページ アプリケーションでサインインとサインアウトを追加する

アプリケーション UI で表示するデータを抽出する

従業員テナント

Microsoft Graph API と対話するように Angular アプリケーションを構成するには、次の手順を実行します。

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>
   

   このコードでは、Angular の補間構文を使用して、 profile オブジェクト (たとえば、 businessPhones、 displayName、 jobTitle) からプロパティをバインドして、ユーザー プロファイル情報を表示する HTML テンプレートを定義します。 また、 tokenExpiration 値も表示され、ページを更新すると、有効期限が近くまでキャッシュされたアクセス トークンが使用され、その後新しいトークンが要求されることを示すメモが含まれています。

外部テナント

サインイン時に ID トークンに要求を表示するように 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 テナントで認証し、ユーザー データを抽出する必要があります。

従業員テナント

アプリケーションをテストするには、次の手順を実行します。

1. ターミナルで次のコマンドを実行して、Angular アプリケーションを実行します。

   ng serve --open
   

2. [ サインイン ] ボタンを選択して、Microsoft Entra テナントで認証します。

3. サインインしたら、[ プロファイルの表示 ] リンクを選択して [ プロファイル ] ページに移動します。 ユーザーの名前、電子メール、役職、その他の詳細など、ユーザー プロファイル情報が表示されていることを確認します。

   

4. [ サインアウト ] ボタンを選択して、アプリケーションからサインアウトします。

外部テナント

1. アプリケーション フォルダーからコマンド ライン プロンプトで次のコマンドを実行して、Web サーバーを起動します。

   npm install
   npm start
   

2. ブラウザーで、「 http://localhost:4200 」と入力してアプリケーションを開きます。

   

3. 画面の右上隅にある [ログイン ] ボタンを選択します。

4. サインインすると、プロファイル情報がページに表示されます。

   

5. 画面の右上隅にある [ログアウト ] ボタンを選択してサインアウトします。

次のステップ

Web API を構築する方法に関する次のチュートリアル シリーズを試して、Microsoft ID プラットフォームを使用する方法について説明します。

チュートリアル: Microsoft ID プラットフォームに Web API を登録する