MSGraphClient を使って Microsoft Graph に接続するUse the MSGraphClient to connect to Microsoft Graph

SharePoint Framework ソリューションを作成するときに、MSGraphClient を使えば簡単に Microsoft Graph に接続できます。When building SharePoint Framework solutions, you can easily connect to the Microsoft Graph using the MSGraphClient.

重要

AadHttpClient および MSGraphClient クライアント オブジェクトは、現在プレビューの段階であり、変更される可能性があります。AadHttpClient and MSGraphClient client objects are currently in preview and are subject to change. 運用環境では使用しないでください。Do not use them in a production environment. また、package-solution.jsonwebApiPermissionRequests プロパティも運用テナントでサポートされていません。Also note that the webApiPermissionRequests properties in package-solution.json are not supported in production tenants.

MSGraphClient の概要MSGraphClient overview

MSGraphClient は、SharePoint Framework v1.4.1 で導入された新しい HTTP クライアントで、SharePoint Framework ソリューション内での Microsoft Graph への接続を簡略化します。MSGraphClient is a new HTTP client introduced in SharePoint Framework v1.4.1, that simplifies connecting to the Microsoft Graph inside SharePoint Framework solutions. MSGraphClient は、既存の Microsoft Graph JavaScript クライアント ライブラリをラップすることにより、他のクライアント側ソリューションのクライアント ライブラリを使ったときと同様の機能を開発者に提供します。MSGraphClient wraps the existing Microsoft Graph JavaScript Client Library offering developers the same capabilities as when using the client library in other client-side solutions.

Microsoft Graph JavaScript クライアント ライブラリはソリューションで直接使える一方で、MSGraphClient は Microsoft Graph に対する認証も処理するため、開発者はソリューションの作成に集中することができます。While you could use the Microsoft Graph JavaScript Client Library in your solution directly, using the MSGraphClient will handle authenticating against the Microsoft Graph for you, allowing you to focus on building your solution.

ソリューションで MSGraphClient を使うUse the MSGraphClient in your solution

注意

MSGraphClient は、SharePoint Framework v1.4.1 以降を使ってビルドされたプロジェクトでのみ使用可能です。The MSGraphClient is available only in projects built using SharePoint Framework v1.4.1 and newer. この記事では MSGraphClient がクライアント側の Web パーツを使って説明されていますが、SharePoint Framework 拡張機能でも使用できます。While using the MSGraphClient is explained using a client-side web part, you can use it just as well in SharePoint Framework extensions.

  1. SharePoint Framework ソリューションで MSGraphClient を使うには、メインの Web パーツ ファイルに次の import 句を追加します。To use the MSGraphClient in your SharePoint Framework solution, add the following import clause in your main web part file:

    import { MSGraphClient } from '@microsoft/sp-client-preview';
    
  2. MSGraphClient はサービスとして提供されるので、参照を取得するには、サービス スコープから利用する必要があります。MSGraphClient is provided as a service, which you have to consume from the service scope to get a reference to. そのためには、コードに以下を追加します。To do that, in your code add:

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
     public render(): void {
       // ...
    
       const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);
     }
    
     // ...
    }
    
  3. MSGraphClient インスタンスへの参照を取得したら、JavaScript クライアント ライブラリの構文を使って、Microsoft Graph との通信を開始します。Once you have the reference to the MSGraphClient instance, you can start communicating with the Microsoft Graph, using its JavaScript Client Library syntax:

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
     public render(): void {
       // ...
    
       const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);
       // 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 型を使用するUse the Microsoft Graph TypeScript types

Microsoft Graph と TypeScript を使って作業すると、コードのエラーをすばやく把握するのに役立つ Microsoft Graph TypeScript 型を利用することができます。When working with the Microsoft Graph and TypeScript, you can benefit of the Microsoft Graph TypeScript types which will help you catch errors in your code faster. Microsoft Graph TypeScript 型は、別のパッケージとして提供されます。Microsoft Graph TypeScript types are provided as a separate package, which you can install using:

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

    npm install @microsoft/microsoft-graph-types --save-dev
    
  2. プロジェクトにパッケージをインストールしたら、そのパッケージを Web パーツ ファイルにインポートします。After installing the package in your project, import it in your web part file using:

    import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
    
  3. 次のように、Microsoft Graph から取得したオブジェクトを入力します。Now you can type the objects retrieved from the Microsoft Graph, for example:

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
     public render(): void {
       // ...
    
       const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);
       // get information about the current user from the Microsoft Graph
       client
         .api('/me')
         .get((error, user: MicrosoftGraph.User, rawResponse?: any) => {
           // handle the response
       });
     }
    
     // ...
    }
    

使用可能なアクセス許可のスコープAvailable permission scopes

既定のサービス プリンシパルでは、Microsoft Graph への明示的なアクセス許可は付与されていません。By default, the service principal has no explicit permissions granted to access the Microsoft Graph. ただし、Microsoft Graph へのアクセス トークンを要求すると、user_impersonation のアクセス許可スコープを含むトークンを取得することができ、これを使ってユーザーに関する情報を読み取ることができます (つまり、User.Read.All)。If you would however request an access token for the Microsoft Graph, you would get a token with the user_impersonation permission scope, that can be used for reading information about the users (i.e. User.Read.All).

追加のアクセス許可スコープを、開発者が要求し、テナント管理者から付与してもらうことができます。Additional permission scopes can be requested by developers and granted by tenant administrators. 詳細については、「SharePoint Framework ソリューションでの Azure AD でセキュリティ保護された API への接続」を参照してください。For more information, see Connect to Azure AD secured APIs in SharePoint Framework solutions.

重要

user_impersonation を使用する動作は、この機能が一般公開される前に変更される可能性があります。The behavior that uses user_impersonation is subject to change before general availability of this capability. このような既定のアクセス許可に依存しないようにすることをお勧めします。We recommend that you not take dependency on these default permissions.

関連項目See also