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 パーツ内で再度サインインするように要求されます。

  1. SharePoint Framework ソリューションで MSGraphClientV3 を使用するには、メイン Web パーツ ファイルに次importの句を追加します。

    import { MSGraphClientV3 } from '@microsoft/sp-http';

  2. 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
      });
  }

  // ...
}

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

  1. Microsoft Graph TypeScript 型をインストールする:

    npm install @microsoft/microsoft-graph-types --save-dev

  2. プロジェクトにパッケージをインストールしたら、そのパッケージを Web パーツ ファイルにインポートします。

    import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

  3. 次のように、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要求が存在しないことが原因で失敗する可能性があります。 これを書いている時点で、次のエンドポイントが含まれます。

関連項目