Microsoft Graphを使用して JavaScript アプリをビルドする
このチュートリアルでは、Microsoft Graph APIを使用する JavaScript コンソール アプリを構築する方法について説明します。
ヒント
完了したチュートリアルをダウンロードするだけの場合は、GitHub リポジトリをダウンロードまたは複製できます。
前提条件
このチュートリアルを開始する前に、開発用コンピューターに Node.js がインストールされている必要があります。
また、Outlook.com 上のメールボックスを持つ個人用 Microsoft アカウント、または Microsoft 職場または学校アカウントも必要です。 Microsoft アカウントをお持ちでない場合は、無料アカウントを取得するためのいくつかのオプションがあります。
- 新しい個人用 Microsoft アカウントにサインアップできます。
- Microsoft 365開発者プログラムにサインアップして、無料のMicrosoft 365 サブスクリプションを取得できます。
注意
このチュートリアルは、Node.js バージョン 16.14.2 で記述されました。 このガイドの手順は、他のバージョンでも動作する場合がありますが、テストされていません。
ポータルでアプリを登録する
この演習では、ユーザー認証を有効にするために、Azure Active Directoryに新しいアプリケーションを登録します。 アプリケーションは、Azure Active Directory管理センターを使用するか、Microsoft Graph PowerShell SDK を使用して登録できます。
ユーザー認証用にアプリケーションを登録する
このセクションでは、 デバイス コード フローを使用したユーザー認証をサポートするアプリケーションを登録します。
ブラウザーを開き、Azure Active Directory 管理センターへ移動して、個人用アカウント (別名: Microsoft アカウント)、または 職場/学校アカウント を使用してログインします。
左側のナビゲーションで [Azure Active Directory] を選択し、それから [管理] で [アプリの登録] を選択します。

[新規登録] を選択します。 たとえば、
JavaScript Graph Tutorialアプリケーションの名前を入力します。必要に応じて、サポートされているアカウントの種類 を設定します。 以下のオプションがあります:
オプション Whoサインインできますか? この組織のディレクトリ内のアカウントのみ Microsoft 365組織内のユーザーのみ 組織のディレクトリ内のアカウント 任意のMicrosoft 365組織のユーザー (職場または学校アカウント) 任意の組織ディレクトリ内のアカウント ...および個人用の Microsoft アカウント 任意のMicrosoft 365組織 (職場または学校アカウント) および個人用 Microsoft アカウントのユーザー [リダイレクト URI] を空のままにします。
[登録] を選択します。 アプリケーションの [概要] ページで、 アプリケーション (クライアント) ID の値をコピーして保存します。次の手順で必要になります。 この組織のディレクトリの [アカウント] を [サポートされているアカウントの種類] に対してのみ選択した場合は、ディレクトリ (テナント) ID もコピーして保存します。

[管理] の下の [認証] を選択します。 [詳細設定] セクションを見つけて、[パブリック クライアント フローを許可する] トグルを [はい] に変更し、[保存] を選択 します。
![[パブリック クライアント フローを許可する] トグルのスクリーンショット](images/aad-default-client-type.png)
注意
アプリの登録に対する Microsoft Graphアクセス許可を構成していなかったことに注意してください。 これは、サンプルが 動的同意 を使用して、ユーザー認証に対する特定のアクセス許可を要求するためです。
JavaScript コンソール アプリを作成する
まず、新しいNode.js プロジェクトを作成します。 プロジェクトを作成するディレクトリで、コマンド ライン インターフェイス (CLI) を開きます。 次のコマンドを実行します。
npm init
プロンプトに応答するには、独自の値を指定するか、既定値を受け入れます。
依存関係のインストール
先に進む前に、後で使用する依存関係をいくつか追加します。
- ユーザーを認証し、アクセス トークンを取得するための JavaScript 用の Azure Identity クライアント ライブラリ。
- Microsoft Graph JavaScript クライアント ライブラリを使用して、Microsoft Graphを呼び出します。
- isomorphic-fetch を使用して API をNode.jsに追加
fetchします。 これは、Microsoft Graph JavaScript クライアント ライブラリの依存関係です。 - ユーザーに入力を求める readline-sync。
CLI で次のコマンドを実行して、依存関係をインストールします。
npm install @azure/identity @microsoft/microsoft-graph-client isomorphic-fetch readline-sync
アプリケーション設定の読み込み
このセクションでは、アプリ登録の詳細をプロジェクトに追加します。
appSettings.jsという名前のプロジェクトのルートにファイル を 作成し、次のコードを追加します。
次の表に
settings従って値を更新します。設定 値 clientIdアプリ登録のクライアント ID authTenant組織内のユーザーのみにサインインを許可するオプションを選択した場合は、この値をテナント ID に変更します。 それ以外の場合は 、 common.
アプリを設計する
このセクションでは、単純なコンソール ベースのメニューを作成します。
graphHelper.jsという名前のプロジェクトのルートにファイル を 作成し、次のプレースホルダー コードを追加します。 このファイルは、後の手順でさらにコードを追加します。
module.exports = {};index.jsという名前のプロジェクトのルートにファイル を 作成し、次のコードを追加します。
ファイルの末尾に次のプレースホルダー メソッドを追加します。 後の手順で実装します。
function initializeGraph(settings) { // TODO } async function greetUserAsync() { // TODO } async function displayAccessTokenAsync() { // TODO } async function listInboxAsync() { // TODO } async function sendMailAsync() { // TODO } async function listUsersAsync() { // TODO } async function makeGraphCallAsync() { // TODO }
これは、基本的なメニューを実装し、コマンド ラインからユーザーの選択を読み取ります。
ユーザー認証を追加する
このセクションでは、Azure AD での認証をサポートするために、前の演習からアプリケーションを拡張します。 これは、Microsoft Graphを呼び出すために必要な OAuth アクセス トークンを取得するために必要です。 この手順では、JavaScript 用の Azure Identity クライアント ライブラリをアプリケーションに統合し、Microsoft Graph JavaScript クライアント ライブラリの認証を構成します。
Azure Identity ライブラリには、OAuth2 トークン フローを実装する多数の TokenCredential クラスが用意されています。 Microsoft Graph クライアント ライブラリでは、これらのクラスを使用して Microsoft Graphの呼び出しを認証します。 この例では、次 TokenCredential のクラスを使用します。
DeviceCodeCredentialは、ユーザー認証用の デバイス コード フロー を実装します。ClientSecretCredentialは、アプリ専用認証用の クライアント資格情報フロー を実装します。 このクラスは、オプションのアプリ専用セクションで使用します。
ユーザー認証用Graphクライアントを構成する
このセクションでは、このクラスを DeviceCodeCredential 使用して、 デバイス コード フローを使用してアクセス トークンを要求します。
graphHelper.js という名前のプロジェクトのルートに新しいファイルを作成し、そのファイルに次のコードを追加します。
index.js の空
initializeGraphの関数を次のように置き換えます。
このコードでは、オブジェクトとオブジェクトという 2 つのプライベート プロパティをDeviceCodeCredential``Client宣言します。 関数は initializeGraphForUserAuth 新しいインスタンス DeviceCodeCredentialを作成し、そのインスタンスを使用して 、 Client. API 呼び出しが Microsoft Graphを介して_userClient行われるたびに、指定された資格情報を使用してアクセス トークンを取得します。
DeviceCodeCredential をテストする
次に、. からアクセス トークンを取得するコードを追加します DeviceCodeCredential。
次の関数を graphHelper.js に追加します。
index.js の空
displayAccessTokenAsyncの関数を次のように置き換えます。プロジェクトのルートにある CLI で次のコマンドを実行します。
node index.jsオプションの入力を求められたら入力
1します。 アプリケーションに URL とデバイス コードが表示されます。JavaScript Graph Tutorial [1] Display access token [2] List my inbox [3] Send mail [4] List users (requires app-only) [5] Make a Graph call [0] Exit Select an option [1...5 / 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 アカウントに注意してください。 プロファイル、ゲスト モード、プライベート モードなどのブラウザー機能を使用して、テストに使用するアカウントとして確実に認証します。完了したら、アプリケーションに戻ってアクセス トークンを確認します。
ヒント
検証とデバッグ の目的でのみ、Microsoft のオンライン トークン パーサー https://jwt.msを使用して (職場または学校アカウントの場合のみ) ユーザー アクセス トークンをデコードできます。 これは、Microsoft Graphを呼び出すときにトークン エラーが発生した場合に役立ちます。 たとえば、トークン内の
scp要求に、想定される Microsoft Graphアクセス許可スコープが含まれていることを確認します。
ユーザーを取得する
このセクションでは、Microsoft Graphをアプリケーションに組み込みます。 Microsoft Graph JavaScript クライアント ライブラリを使用して、Microsoft Graphを呼び出します。
graphHelper.js を開き、次の関数を追加します。
index.js の空
greetUserAsyncの関数を次のように置き換えます。
今すぐアプリを実行した場合は、アプリにログインすると、名前が表示されます。
Hello, Megan Bowen!
Email: MeganB@contoso.com
コードの説明
関数内のコードについて getUserAsync 考えてみましょう。 これはほんの数行ですが、注意する必要がある重要な詳細がいくつかあります。
'me' にアクセスする
この関数は要求ビルダーに_userClient.api渡/meされ、Get ユーザー API への要求がビルドされます。 この API には、次の 2 つの方法でアクセスできます。
GET /me
GET /users/{user-id}
この場合、コードは API エンドポイントを GET /me 呼び出します。 これは、ユーザー ID を知らなくても認証されたユーザーを取得するためのショートカット 方法です。
注意
API エンドポイントは GET /me 認証されたユーザーを取得するため、ユーザー認証を使用するアプリでのみ使用できます。 アプリのみの認証アプリはこのエンドポイントにアクセスできません。
特定のプロパティを要求する
この関数は、要求の select メソッドを使用して、必要なプロパティのセットを指定します。 これにより、 $selectクエリ パラメーター が API 呼び出しに追加されます。
厳密に型指定された戻り値の型
この関数は、 User API からの JSON 応答から逆シリアル化されたオブジェクトを返します。 コードは使用 selectするため、要求されたプロパティのみが返される User オブジェクトに値を持ちます。 他のすべてのプロパティには既定値が設定されます。
受信トレイを一覧表示する
このセクションでは、ユーザーの電子メール受信トレイにメッセージを一覧表示する機能を追加します。
graphHelper.js を開き、次の関数を追加します。
index.js の空
ListInboxAsyncの関数を次のように置き換えます。アプリを実行してサインインし、オプション 2 を選択して受信トレイを一覧表示します。
[1] Display access token [2] List my inbox [3] Send mail [4] List users (requires app-only) [5] Make a Graph call [0] Exit Select an option [1...5 / 0]: 2 Message: Updates from Ask HR and other communities From: Contoso Demo on Yammer Status: Read Received: 12/30/2021 4:54:54 AM -05:00 Message: Employee Initiative Thoughts From: Patti Fernandez Status: Read Received: 12/28/2021 5:01:10 PM -05:00 Message: Voice Mail (11 seconds) From: Alex Wilber Status: Unread Received: 12/28/2021 5:00:46 PM -05:00 Message: Our Spring Blog Update From: Alex Wilber Status: Unread Received: 12/28/2021 4:49:46 PM -05:00 Message: Atlanta Flight Reservation From: Alex Wilber Status: Unread Received: 12/28/2021 4:35:42 PM -05:00 Message: Atlanta Trip Itinerary - down time From: Alex Wilber Status: Unread Received: 12/28/2021 4:22:04 PM -05:00 ... More messages available? true
コードの説明
関数内のコードについて getInboxAsync 考えてみましょう。
既知のメール フォルダーへのアクセス
この関数は要求ビルダーに_userClient.api渡/me/mailFolders/inbox/messagesされ、List messages API への要求がビルドされます。 API エンドポイントの部分が /mailFolders/inbox 含まれるため、API は要求されたメール フォルダー内のメッセージのみを返します。 この場合、受信トレイはユーザーのメールボックス内の既定の既知のフォルダーであるため、既知の名前を使用してアクセスできます。 既定以外のフォルダーには、よく知られている名前をメール フォルダーの ID プロパティに置き換えることで、同じ方法でアクセスされます。 使用可能な既知のフォルダー名の詳細については、「 mailFolder リソースの種類」を参照してください。
コレクションへのアクセス
1 つのオブジェクトを getUserAsync 返す前のセクションの関数とは異なり、このメソッドはメッセージのコレクションを返します。 コレクションを返す Microsoft Graphのほとんどの API は、使用可能なすべての結果を 1 つの応答で返すわけではありません。 代わりに、ページング を 使用して結果の一部を返しながら、クライアントが次の "ページ" を要求するメソッドを提供します。
既定のページ サイズ
ページングを使用する API では、既定のページ サイズが実装されます。 メッセージの場合、既定値は 10 です。 クライアントは、 $top クエリ パラメーターを使用して、より多く (またはそれ以下) 要求できます。 では getInboxAsync、これはメソッドを使用して .top(25) 実行されます。
注意
渡される .top() 値は、明示的な数値ではなく、上限です。 API は、指定した値までのメッセージの数 を 返します。
後続のページの取得
サーバーで使用可能な結果が多い場合、コレクション応答には、次のページにアクセスするための API URL を持つプロパティが含まれます @odata.nextLink 。 Java クライアント ライブラリは、オブジェクトに対してこのプロパティを PageCollection 公開します。 このプロパティが未定義でない場合は、使用可能な結果が増えます。
値を @odata.nextLink 渡して _userClient.api 、結果の次のページを取得できます。 または、クライアント ライブラリのオブジェクトを PageIterator 使用して 、使用可能なすべてのページを反復処理することもできます。
コレクションを並べ替える
この関数は、要求のメソッドを orderby 使用して、メッセージが受信された時刻 (receivedDateTime プロパティ) で並べ替えられた結果を要求します。 キーワードが含まれているの DESC で、最近受信したメッセージが最初に一覧表示されます。 これにより、 $orderbyクエリ パラメーター が API 呼び出しに追加されます。
メールを送信する
このセクションでは、認証されたユーザーとして電子メール メッセージを送信する機能を追加します。
graphHelper.js を開き、次の関数を追加します。
index.js の空
sendMailAsyncの関数を次のように置き換えます。アプリを実行してサインインし、オプション 3 を選択して自分にメールを送信します。
[1] Display access token [2] List my inbox [3] Send mail [4] List users (requires app-only) [5] Make a Graph call [0] Exit Select an option [1...5 / 0]: 3 Mail sent.注意
Microsoft 365開発者プログラムから開発者テナントを使用してテストしている場合、送信したメールが配信されず、配信不能レポートが届く場合があります。 この問題が発生した場合は、Microsoft 365 管理センターからサポートにお問い合わせください。
コードの説明
関数内のコードについて sendMailAsync 考えてみましょう。
メールの送信
この関数は要求ビルダーに_userClient.api渡/me/sendMailされ、送信メール API への要求がビルドされます。 要求ビルダーは、送信するメッセージを Message 表すオブジェクトを受け取ります。
オブジェクトの作成
データの読み取りのみを行う Microsoft Graphに対する以前の呼び出しとは異なり、この呼び出しではデータが作成されます。 クライアント ライブラリでこれを行うには、データを表すクラスのインスタンスを作成します (この場合は、 Message目的のプロパティを設定してから、API 呼び出しで送信します)。 呼び出しはデータを送信するため、 post メソッドは get.
オプション: アプリのみの認証を構成する
このセクションでは、アプリのみの認証をサポートするように、前のセクションから アプリの登録を更新します。 アプリのみの認証はバックグラウンド サービスに適しています。また、アプリのみの認証のみをサポートする API もあります。 このチュートリアルのアプリ専用部分を使用する場合にのみ、このセクションを完了する必要があります。 そうでない場合は、次の手順に進んでも問題ありません。
重要
このセクションの手順では、グローバル管理者 ロールを持つ職場/学校アカウントが必要です。
Azure AD 管理センターの前のセクションからアプリの登録を開きます。
[管理] で、[API のアクセス許可] を選択します。
[構成済みアクセス許可] で既定の User.Read アクセス許可を削除するには、行の省略記号 (...) を選択し、[アクセス許可の削除] を選択します。
[アクセス許可の追加] を選択し、Microsoft Graph を選択します。
[ アプリケーションのアクセス許可] を選択します。
[User.Read.All] を選択し、[アクセス許可の追加] を選択します。
[ 管理者の同意を付与する]...、 [ はい ] を選択して、選択したアクセス許可に対する管理者の同意を提供します。

[管理**] で [証明書とシークレット**] を選択し、[新しいクライアント シークレット] を選択します。
説明を入力し、期間を選択して、[ 追加] を選択します。
[値] 列からシークレットをコピーします。次の手順で必要になります。
重要
このクライアント シークレットは今後表示されないため、この段階で必ずコピーするようにしてください。
注意
このセクションでは、ユーザー認証の登録時の手順とは異なり、アプリの登録に対する Microsoft Graphアクセス許可を構成しました。 これは、アプリのみの認証で クライアント資格情報フローが使用されるためです。このフローでは、アプリの登録時にアクセス許可を構成する必要があります。 詳細については 、.default スコープ を参照してください。
省略可能: アプリのみの認証を追加する
このセクションでは、アプリケーションにアプリのみの認証を追加します。 このセクションは省略可能であり、 [省略可能: アプリのみの認証を構成する] を完了する必要があります。 これらの手順は、職場または学校アカウントでのみ実行できます。
アプリ専用認証用Graphクライアントを構成する
このセクションでは、このクラスを ClientSecretCredential 使用して、 クライアント資格情報フローを使用してアクセス トークンを要求します。
次の表に
settings従って値を更新します。設定 値 tenantId組織のテナント ID clientSecret前の手順で生成されたクライアント シークレット 組織の
tenantIdテナント ID を 使用して、appsettings.js の値を更新します。graphHelper.js を開き、次のコードを追加します。
省略可能: ユーザーを一覧表示する
このセクションでは、アプリのみの認証を使用して、Azure Active Directory内のすべてのユーザーを一覧表示する機能を追加します。 このセクションは省略可能であり、 省略可能: アプリのみの認証の構成 と 省略可能: アプリのみの認証の追加を完了する必要があります。 これらの手順は、職場または学校アカウントでのみ実行できます。
graphHelper.js を開き、次の関数を追加します。
index.js の空
listUsersAsyncの関数を次のように置き換えます。アプリを実行してサインインし、オプション 4 を選択してユーザーを一覧表示します。
[1] Display access token [2] List my inbox [3] Send mail [4] List users (requires app-only) [5] Make a Graph call [0] Exit Select an option [1...5 / 0]: 4 User: Adele Vance ID: 05fb57bf-2653-4396-846d-2f210a91d9cf Email: AdeleV@contoso.com User: Alex Wilber ID: a36fe267-a437-4d24-b39e-7344774d606c Email: AlexW@contoso.com User: Allan Deyoung ID: 54cebbaa-2c56-47ec-b878-c8ff309746b0 Email: AllanD@contoso.com User: Bianca Pisani ID: 9a7dcbd0-72f0-48a9-a9fa-03cd46641d49 Email: NO EMAIL User: Brian Johnson (TAILSPIN) ID: a8989e40-be57-4c2e-bf0b-7cdc471e9cc4 Email: BrianJ@contoso.com ... More users available? true
コードの説明
関数内のコードについて getUsersAsync 考えてみましょう。 次のコード getInboxAsyncによく似ています。
- ユーザーのコレクションを取得します。
- 特定のプロパティを要求するために使用されます
select - 返されるユーザーの数を制限するために使用
topされます - 応答の並べ替えに使用
orderByされます
主な違いは、このコードでは _appClient、 _userClient. どちらのクライアントも同じ構文と要求ビルダーを使用しますが、異なる資格情報で構成されています。
省略可能: 独自のコードを追加する
このセクションでは、独自の Microsoft Graph機能をアプリケーションに追加します。 これは、Microsoft Graph ドキュメント、Graph エクスプローラーのコード スニペット、または作成したコードである可能性があります。 このセクションは省略可能です。
アプリを更新する
graphHelper.js を開き、次の関数を追加します。
index.js の空
makeGraphCallAsyncの関数を次のように置き換えます。
API を選択する
Microsoft Graphで試したい API を見つけます。 たとえば、 Create event API です。 API ドキュメントの例のいずれかを使用することも、Graph エクスプローラーで API 要求をカスタマイズして、生成されたスニペットを使用することもできます。
アクセス許可を構成する
選択した API のリファレンス ドキュメントの [アクセス許可] セクションで、サポートされている認証方法を確認します。 一部の API では、たとえば、アプリ専用の Microsoft アカウントや個人用の Microsoft アカウントがサポートされていません。
- ユーザー認証を使用して API を呼び出すには (API でユーザー (委任された) 認証がサポートされている場合)、appSettings.jsに必要なアクセス許可スコープ を 追加します。
- アプリのみの認証を使用して API を呼び出すには (API でサポートされている場合)、Azure AD 管理センターに必要なアクセス許可スコープを追加します。
コードを追加する
graphHelper.jsの makeGraphCallAsync 関数にコード を コピーします。 ドキュメントまたはGraph エクスプローラーからスニペットをコピーする場合は、必ず適切なクライアントに名前を変更clientしてください_appClient。 _userClient
おめでとうございます。
JavaScript Microsoft Graph チュートリアルを完了しました。 Microsoft Graphを呼び出す作業アプリが作成できたので、新しい機能を試して追加できます。 Microsoft Graphの概要にアクセスして、Microsoft Graphでアクセスできるすべてのデータを確認します。
Microsoft Graph ツールキット
UI を使用して JavaScript アプリをビルドする場合、Microsoft Graph Toolkitでは開発を簡略化できるコンポーネントのコレクションが提供されます。
TypeScript/JavaScript のサンプル
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。