MSGraphClientV3 を使用して Microsoft Graph に接続する
SharePoint Framework ソリューションをビルドする場合は、MSGraphClientV3 を使用して Microsoft Graph に簡単に接続できます。
MSGraphClientV3 は、SharePoint Framework v1.15.0 で導入された新しい HTTP クライアントであり、SharePoint Framework ソリューション内の Microsoft Graph への接続を簡略化します。 MSGraphClientV3 は Microsoft Graph JavaScript クライアント ライブラリ v3 をラップし、他のクライアント側ソリューションでクライアント ライブラリを使用する場合と同じ機能を開発者に提供します。
MSGraphClientV3 は、SharePoint Framework v1.6.0 で導入された MSGraphClient を置き換えます。 MSGraphClient は 、Microsoft Graph JavaScript クライアント ライブラリ v1 をラップしました。
ソリューションで Microsoft Graph JavaScript クライアント ライブラリを直接使用することもできますが、 MSGraphClientV3 は Microsoft Graph に対する認証を処理します。これにより、ソリューションの構築に集中できます。
注意
MSGraphClientV3 は、SharePoint Framework v1.15.0 以降を使用してビルドされたプロジェクトでのみ使用できます。 MSGraphClientV3 は、クライアント側の Web パーツを使用してこの記事で説明しますが、SharePoint Framework拡張機能でも使用できます。
注意
MSGraphClientV3 のシングル サインオンは、現在 SharePoint Online でのみ使用できます。 クライアントをオンプレミス開発に活用することはできますが、ユーザーは Web パーツ内で再度サインインするように要求されます。
SharePoint Framework ソリューションで MSGraphClientV3 を使用するには、メイン Web パーツ ファイルに次
import
の句を追加します。import { MSGraphClientV3 } from '@microsoft/sp-http';
MSGraphClientV3 は、Web パーツ コンテキストで使用できる MSGraphClientFactory を介して公開されます。 MSGraphClient への参照を取得するには、コードに以下を追加します。
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> { public render(): void { // ... this.context.msGraphClientFactory .getClient('3') .then((client: MSGraphClientV3): void => { // use MSGraphClient here }); } // ... }
MSGraphClientV3 インスタンスへの参照を取得したら、JavaScript クライアント ライブラリ構文を使用して Microsoft Graph との通信を開始します。
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> { public render(): void { // ... this.context.msGraphClientFactory .getClient('3') .then((client: MSGraphClientV3): void => { // get information about the current user from the Microsoft Graph client .api('/me') .get((error, response: any, rawResponse?: any) => { // handle the response }); }); } // ... }
Microsoft Graph と TypeScript を使って作業すると、コードのエラーをすばやく把握するのに役立つ Microsoft Graph TypeScript 型を利用することができます。 Microsoft Graph TypeScript 型は、別のパッケージとして提供されます。
Microsoft Graph TypeScript 型をインストールする:
npm install @microsoft/microsoft-graph-types --save-dev
プロジェクトにパッケージをインストールしたら、そのパッケージを Web パーツ ファイルにインポートします。
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
次のように、Microsoft Graph から取得したオブジェクトを入力します。
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> { public render(): void { // ... this.context.msGraphClientFactory .getClient('3') .then((client: MSGraphClientV3): void => { // get information about the current user from the Microsoft Graph client .api('/me') .get((error: any, user: MicrosoftGraph.User, rawResponse?: any) => { // handle the response }); }); } // ... }
既定のサービス プリンシパルでは、Microsoft Graph への明示的なアクセス許可は付与されていません。 ただし、Microsoft Graph へのアクセス トークンを要求すると、user_impersonation
のアクセス許可スコープを含むトークンを取得することができ、これを使ってユーザーに関する情報を読み取ることができます (つまり、User.Read.All
)。
追加のアクセス許可スコープを、開発者が要求し、テナント管理者から付与してもらうことができます。 詳細については、「SharePoint Framework ソリューションでの Azure AD でセキュリティ保護された API への接続」を参照してください。
MSGraphClient は、現在、Microsoft Graph の代理アクセス許可の要求時に暗黙的な認証フローを使用しています。 Microsoft ID プラットフォーム アクセス トークン に示されているように、このwids
要求は、長さの問題のため、暗黙的な承認フローを使用する場合は存在しない可能性があります。 このwids
要求には、委任されたユーザーに割り当てられた Azure AD テナント全体の役割の一覧が含まれます。
その結果、Azure AD の役割に依存している Microsoft Graph エンドポイントおよび代理アクセス許可に対するクエリは、wids
要求が存在しないことが原因で失敗する可能性があります。 これを書いている時点で、次のエンドポイントが含まれます。