鍋綿ブログ

C#・SharePoint・SharePoint Framework・Office365を中心に扱うブログです。

SharePoint Framework (SPFx) で Microsoft Graph API を利用する方法

Office 365関連のサービスの多くは Graph API で操作することができます。メール、予定表、Planner、OneDrive上のファイルなど様々なオブジェクトにアクセス可能です。

参考:Microsoft Graph の概要

これをSharePoint Framework (SPFx)で扱う方法を試したところ非常に簡単に実現ができましたので備忘を残しておきます。

 

 

利用例

  • ログインユーザーのPlannerタスクを表示

GitHub - MickNabewata/spfx-planner-webpart-sample

  • ログインユーザーの予定表データを表示

GitHub - MickNabewata/spfx-list-schedule-sample:

実現手順

まずはAPIのエンドポイントを調べる

Microsoft Docsなどを参考にAPIのURLを確定しましょう。

例えば自分に割り当てられたPlannerタスクの取得は以下URLです。

調査したURLが正しいかどうかはGraph エクスプローラーで試してみてください。

 

プロジェクト作成

サンプルとしてSPFxでWebパーツを作成してみます。

お好きな設定でWebパーツプロジェクトを作成してください。

手順が分からない場合はこちらを参考にしてください。

開発環境が整っていない方はこちらを先にどうぞ。

 

アクセス許可の定義

Webパーツを利用するユーザーがGraph APIを実行するには、予めアクセス許可が与えられている必要があります。アクセス許可の付与には通常Azure ADへのアプリケーション登録が必要ですが、SPFxからの操作に限りこの手順が簡略化されています。

作成したプロジェクトを見るとconfigフォルダ内にpackage-solution.jsonという名前のファイルがありますので、これを編集して下記赤字部分を追加します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "planner-webpart-client-side-solution",
    "id": "8c919eff-bb57-4f13-8d3d-832f7b6a7160",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Group.Read.All"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/planner-webpart.sppkg"
  }
}

 

この指定をしておくと、WebパーツをSharePointのアプリカタログに展開した時にアクセス許可の承諾を求められるようになります。管理者はそれを承諾するだけでWebパーツの利用者にアクセス許可を与えることができます。

 

Microsoft Graph関連オブジェクトの型定義をインポート

この後はMicrosoft Graphへの問い合わせ処理を書いていきますが、Graph APIからの応答を表す型定義があるとコーディングが非常に楽になります。ご自身のWebパーツに以下のパッケージを追加してください。

@microsoft/microsoft-graph-types

 

例えばnpmを利用している場合は以下コマンドでインストールできます。

npm i @microsoft/microsoft-graph-types

 

Microsoft Graphへの問い合わせ処理を作成

ここでは単純化のためにWebパーツの定義クラスに直接処理を書いていきます。

src > webparts > (webパーツ名) > (webパーツ名)WebPart.ts ファイルに以下のimport文を追加します。

// Microsoft Graphへの問い合わせ実行のために追加
import { MSGraphClient } from '@microsoft/sp-http';
import { GraphError } from '@microsoft/microsoft-graph-client';

// Microsoft Graphからの応答を表す型があるほうがコーディングが楽なので追加
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

 

次に同ファイルに問い合わせ処理を書きましょう。

  /** Microsoft Graphからのデータ取得 */
  protected getTasks(callBack: (error: GraphError, datas: any) => void): Promise<any> {
    return this.context.msGraphClientFactory
      .getClient()
      .then((client: MSGraphClient) => {
        // ユーザー自身(me)のPlanner(planner)からタスク(tasks)を取得
        return client
          .api("me/planner/tasks/")
          .get((error: GraphError, datas: any, rawResponse?: any) => {
            callBack(error, datas);
          });
      });
  }

エンドポイント(me/planner/tasks)を指定して応答を返却するだけのシンプルなコードです。

描画する処理を作成

同ファイルのrenderメソッドを以下のように記述します。

  /** 描画 */
  public render(): void {

    // Plannerタスク一覧を取得
    this.getTasks((error: GraphError, datas: any) => {

      if (error) {
        this.domElement.innerHTML = `${JSON.stringify(error)}`;
      }
      else {
        // 応答内容を型に当てはめる
        let events: MicrosoftGraph.PlannerTask[] = datas.value;

        this.domElement.innerHTML = `省略!`;
      }
    });
  }

 

前述のgetTasksメソッドを呼び出して結果を描画しますが、描画自体はここでは省略します。応答の内容を型に当てはめてあげると入力補完が効いて良い感じです。

SharePointへのデプロイ

以下コマンドでパッケージ化します。

gulp build --ship
gulp bundle --ship
gulp package-solution --ship

 

sharepoint > solution フォルダに (ソリューション名).sppkgが出来上がるので、これをSharePointのアプリカタログに登録します。すると SharePoint 管理センターの「API の管理」画面でアクセス許可の承諾 / 拒否を行えるようになりますので承諾します。

Webパーツの追加

任意のSharePointサイトでデプロイしたアプリを追加し、適当なページにWebパーツを追加して結果を確認してください。

 

以上、参考になれば幸いです。