MSGraphClientV3 を使用して Microsoft Graph に接続する

SharePoint Framework ソリューションをビルドする場合は、MSGraphClientV3 を使用して Microsoft Graph に簡単に接続できます。

MSGraphClient の概要

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 に対する認証を処理します。これにより、ソリューションの構築に集中できます。

ソリューションで MSGraphClient を使う

注:

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 型は、別のパッケージとして提供されます。

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 への接続」を参照してください。

既知の問題

Azure AD の役割と代理認証

MSGraphClient は、現在、Microsoft Graph の代理アクセス許可の要求時に暗黙的な認証フローを使用しています。 Microsoft ID プラットフォームアクセストークンに示されているように、このwids要求は、長さの問題のため、暗黙的な承認フローを使用する場合は存在しない可能性があります。このwids要求には、委任されたユーザーに割り当てられた Azure AD テナント全体の役割の一覧が含まれます。

その結果、Azure AD の役割に依存している Microsoft Graph エンドポイントおよび代理アクセス許可に対するクエリは、wids要求が存在しないことが原因で失敗する可能性があります。これを書いている時点で、次のエンドポイントが含まれます。

Office 365 使用状況レポート