Microsoft Graph の TypeScript アプリにユーザー認証を追加する

この記事では、Microsoft Graph を使用して TypeScript アプリをビルドするで作成したアプリケーションにユーザー認証を追加します。次に、Microsoft Graph ユーザー API を使用して、認証されたユーザーを取得します。

ユーザー認証を追加する

JavaScript 用の Azure Identity クライアントライブラリには、OAuth2 トークンフローを実装する多くのTokenCredential クラスが用意されています。 Microsoft Graph JavaScript クライアントライブラリでは、これらのクラスを使用して Microsoft Graph への呼び出しを認証します。

ユーザー認証用に Graph クライアントを構成する

まず、 DeviceCodeCredential クラスを使用して、デバイスコードフローを使用してアクセストークンを要求します。

graphHelper.tsを開き、その内容を次のように置き換えます。

import 'isomorphic-fetch';
import {
  DeviceCodeCredential,
  DeviceCodePromptCallback,
} from '@azure/identity';
import { Client, PageCollection } from '@microsoft/microsoft-graph-client';
import { User, Message } from '@microsoft/microsoft-graph-types';
// prettier-ignore
import { TokenCredentialAuthenticationProvider } from
  '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';

import { AppSettings } from './appSettings.js';

let _settings: AppSettings | undefined = undefined;
let _deviceCodeCredential: DeviceCodeCredential | undefined = undefined;
let _userClient: Client | undefined = undefined;

export function initializeGraphForUserAuth(
  settings: AppSettings,
  deviceCodePrompt: DeviceCodePromptCallback,
) {
  // Ensure settings isn't null
  if (!settings) {
    throw new Error('Settings cannot be undefined');
  }

  _settings = settings;

  _deviceCodeCredential = new DeviceCodeCredential({
    clientId: settings.clientId,
    tenantId: settings.tenantId,
    userPromptCallback: deviceCodePrompt,
  });

  const authProvider = new TokenCredentialAuthenticationProvider(
    _deviceCodeCredential,
    {
      scopes: settings.graphUserScopes,
    },
  );

  _userClient = Client.initWithMiddleware({
    authProvider: authProvider,
  });
}

index.tsの空の initializeGraph 関数を次のように置き換えます。

function initializeGraph(settings: AppSettings) {
  graphHelper.initializeGraphForUserAuth(settings, (info: DeviceCodeInfo) => {
    // Display the device code message to
    // the user. This tells them
    // where to go to sign in and provides the
    // code to use.
    console.log(info.message);
  });
}

このコードでは、 DeviceCodeCredential オブジェクトと Client オブジェクトの 2 つのプライベートプロパティを宣言します。 initializeGraphForUserAuth関数は、DeviceCodeCredentialの新しいインスタンスを作成し、そのインスタンスを使用してClientの新しいインスタンスを作成します。 API 呼び出しが _userClientを介して Microsoft Graph に対して行われるたびに、提供された資格情報を使用してアクセストークンを取得します。

DeviceCodeCredential をテストする

次に、 DeviceCodeCredentialからアクセストークンを取得するコードを追加します。

次の関数を graphHelper.tsに追加します。

export async function getUserTokenAsync(): Promise<string> {
  // Ensure credential isn't undefined
  if (!_deviceCodeCredential) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Ensure scopes isn't undefined
  if (!_settings?.graphUserScopes) {
    throw new Error('Setting "scopes" cannot be undefined');
  }

  // Request token with given scopes
  const response = await _deviceCodeCredential.getToken(
    _settings?.graphUserScopes,
  );
  return response.token;
}

index.tsの空の displayAccessTokenAsync 関数を次のように置き換えます。

async function displayAccessTokenAsync() {
  try {
    const userToken = await graphHelper.getUserTokenAsync();
    console.log(`User token: ${userToken}`);
  } catch (err) {
    console.log(`Error getting user access token: ${err}`);
  }
}

プロジェクトのルートで CLI で次のコマンドを実行します。
```
npx ts-node index.ts
```

オプションの入力を求められたら、「 1 」と入力します。アプリケーションに URL とデバイスコードが表示されます。

TypeScript Graph Tutorial

[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 1
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and
enter the code RK987NX32 to authenticate.

ブラウザーを開き、表示された URL を参照します。指定したコードを入力し、サインインします。

重要

https://microsoft.com/deviceloginを参照するときにブラウザーにログインしている既存の Microsoft 365 アカウントに注意してください。プロファイル、ゲストモード、プライベートモードなどのブラウザー機能を使用して、テストに使用するアカウントとして認証することを確認します。
完了したら、アプリケーションに戻り、アクセストークンを表示します。

ヒント

検証とデバッグ のみを目的として、 https://jwt.msで Microsoft のオンライントークンパーサーを使用してユーザーアクセストークンをデコードできます (職場または学校アカウントの場合のみ)。トークンの解析は、Microsoft Graph を呼び出すときにトークンエラーが発生した場合に役立ちます。たとえば、トークン内の scp 要求に、想定される Microsoft Graph アクセス許可スコープが含まれていることを確認します。

ユーザーを取得する

認証が構成されたので、最初の Microsoft Graph API呼び出しを行うことができます。認証されたユーザーの名前と電子メールアドレスを取得するコードを追加します。

graphHelper.ts開き、次の関数を追加します。

export async function getUserAsync(): Promise<User> {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Only request specific properties with .select()
  return _userClient
    .api('/me')
    .select(['displayName', 'mail', 'userPrincipalName'])
    .get();
}

index.tsの空の greetUserAsync 関数を次のように置き換えます。

async function greetUserAsync() {
  try {
    const user = await graphHelper.getUserAsync();
    console.log(`Hello, ${user?.displayName}!`);
    // For Work/school accounts, email is in mail property
    // Personal accounts, email is in userPrincipalName
    console.log(`Email: ${user?.mail ?? user?.userPrincipalName ?? ''}`);
  } catch (err) {
    console.log(`Error getting user: ${err}`);
  }
}

アプリを今すぐ実行すると、サインインした後に名前で歓迎されます。

Hello, Megan Bowen!
Email: MeganB@contoso.com

コードの説明

getUserAsync関数のコードについて考えてみましょう。ほんの数行ですが、注意する必要がある重要な詳細がいくつかあります。

'me' へのアクセス

関数は /me を _userClient.api 要求ビルダーに渡します。これにより、 Get ユーザー API に要求がビルドされます。この API には、次の 2 つの方法でアクセスできます。

GET /me
GET /users/{user-id}

この場合、コードは GET /me API エンドポイントを呼び出します。このエンドポイントは、ユーザー ID を知らずに認証されたユーザーを取得するためのショートカットメソッドです。

注:

GET /me API エンドポイントは認証されたユーザーを取得するため、ユーザー認証を使用するアプリでのみ使用できます。アプリ専用認証アプリは、このエンドポイントにアクセスできません。

特定のプロパティの要求

関数は、要求で select メソッドを使用して、必要なプロパティのセットを指定します。このメソッドは、 $select クエリパラメーターを API 呼び出しに追加します。

厳密に型指定された戻り値の型

関数は、API からの JSON 応答から逆シリアル化された User オブジェクトを返します。コードでは selectが使用されるため、返される User オブジェクトには、要求されたプロパティのみが値を持ちます。その他のすべてのプロパティには既定値があります。

次の手順

メールの読み取りと送信

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-06-12