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 by using the MSGraphClient.

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, MSGraphClient handles authenticating against the Microsoft Graph for you, which allows 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 later. この記事では MSGraphClient がクライアント側の Web パーツを使って説明されていますが、SharePoint Framework 拡張機能でも使用できます。While the MSGraphClient is explained in this article by using a client-side web part, you can also use it 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-http';
    
  2. MSGraphClient は、Web パーツのコンテキストで使用可能な MSGraphClientFactory を通じて公開されます。MSGraphClient is exposed through the MSGraphClientFactory available on the web part context. MSGraphClient への参照を取得するには、コードに以下を追加します。To get a reference to MSGraphClient, in your code add:

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

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

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

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

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

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

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
     public render(): void {
       // ...
    
       this.context.msGraphClientFactory
         .getClient()
         .then((client: MSGraphClient): void => {
           // 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)。However, if you request an access token for the Microsoft Graph, you get a token with the user_impersonation permission scope that can be used for reading information about the users (that is, 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.

関連項目See also