Microsoft Graph ツールキットを使用して、ソリューションを Microsoft Graph に接続する

2023-03-21

SharePoint Framework ソリューションを構築する場合、Microsoft 365 からのデータを表示する最も簡単な方法は、Microsoft Graph ツールキットを使用することです。

Microsoft Graph ツールキットとは

Microsoft Graph ツールキットは、Microsoft Graph にアクセスして操作するための、再利用可能でフレームワークに依存しないコンポーネントと認証プロバイダーのコレクションです。コンポーネントは、Microsoft Graph で認証し、Microsoft Graph からデータを取得する組み込みのプロバイダーを使用して、すぐに完全に機能します。

Microsoft Graph ツールキットを使用すると、アプリケーションで Microsoft Graph を簡単に使用できます。次の例は、予定一覧コンポーネントを使用して、1 行のコードで、サインインしたユーザーのカレンダーイベントを示しています。

この例を mgt.dev で開く

SharePoint Framework で Microsoft Graph ツールキットを使用する理由

SharePoint Framework を使用してソリューションを構築する場合、SharePoint Framework によって公開されている MSGraphClient を使用して Microsoft Graph に接続します。 MSGraphClient は、Microsoft Graph で認証を処理するため、アプリの構築に集中できます。それでも、必要な API リクエストを構築して実行し、それらの応答を処理して、アプリにデータを表示する必要があります。

Microsoft Graph ツールキットは、Microsoft Graph の操作をさらに簡素化します。認証を処理するだけでなく、Microsoft Graph と通信し、取得したデータをアプリに自動的に表示して、貴重な時間を節約します。

次の例は、プレーンな JavaScript SharePoint Framework Web パーツでツールキットの予定一覧コンポーネントを使用して、現在のユーザーのカレンダーイベントを表示する方法を示しています。

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

// ...

export default class CalendarWebPart extends BaseClientSideWebPart<ICalendarWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.calendar }">
        <mgt-agenda></mgt-agenda>
      </div>`;
  }

  // ...
}

Microsoft Graph ツールキットが SharePoint Framework の現在のコンテキストを使用し、Microsoft Graph からカレンダーイベントを取得して、アプリで 1 行のコード <mgt-agenda></mgt-agenda> に表示する方法を抽象化することに注意してください。

SharePoint Framework で Microsoft Graph ツールキットを使用する

Microsoft Graph ツールキットは Microsoft Graph に接続して、Microsoft 365 に保存されているデータを取得します。データにアクセスするには、API との通信を容易にするサービスプリンシパルに、Microsoft Graph に必要な API アクセス許可を要求します。プロジェクトに必要なアクセス許可は、使用するツールキットコンポーネントによって異なります。コンポーネントに必要な Microsoft Graph のアクセス許可の詳細については、ドキュメントを参照してください。

SharePoint Framework プロジェクトに必要な API アクセス許可のリストを決定したら、それらをプロジェクトの構成に追加します。

次の手順は、Microsoft Graph ツールキットをプロジェクトに追加することです。正確な手順については、Microsoft Graph ツールキットの SharePoint Framework ライブラリのドキュメントを参照してください。

重要

SharePoint Framework プロジェクトで React を使用する場合は、プロジェクトに @microsoft/mgt-spfx と @microsoft/mgt-react の両方のパッケージをインストールする必要があります。また、ツールキットから読み込む種類のインポートを調整する必要があります。詳細については、Microsoft Graph ツールキットの SharePoint Framework ライブラリのドキュメントの React セクションを参照してください。

構成手順を完了すると、プロジェクトで Microsoft Graph ツールキットを使用する準備が整います。

既知の問題

Web パーツと拡張機能にエラーが表示される

Microsoft Graph ツールキットを使用する SharePoint Framework Web パーツと拡張機能は、次のようなエラーを表示します。

'CustomElementRegistry' で 'define' の実行に失敗しました: 名前 "mgt-xyz" は既にこのレジストリで使用されています。

このエラーは、複数の SharePoint Framework コンポーネントがMicrosoft Graph ツールキットの独自のコピーをインスタンス化しようとしたことが原因で発生します。この問題を回避するには、mgt-spfx.sppkg パッケージをテナントの SharePoint アプリカタログに展開し、Microsoft Graph ツールキットを使用するすべてのソリューションを更新して @microsoft/mgt-spfx SharePoint パッケージを使用する必要があります。詳細については、Microsoft Graph ツールキットの SharePoint Framework ライブラリのドキュメントを参照してください。

開発者コンソールに記録された `AADSTS65001` エラー

Microsoft Graph ツールキットを使用する SharePoint Framework Web パーツおよび拡張機能が期待どおりに機能しません。開発者コンソールに、次のようなエラーが表示されます。

AADSTS65001: ユーザーまたは管理者は、'SharePoint Online クライアント拡張性 Web アプリケーションプリンシパル' という名前の ID 'f96cafc5-5fa8-4594-9815-aa169a8c6d09' のアプリケーションを使用することに同意していません。このユーザーとリソースに対してインタラクティブな承認要求を送信します。

このエラーは、SharePoint Framework サービスプリンシパルに必要な Microsoft Graph API アクセス許可が付与されていないことが原因であることがよくあります。 SharePoint 管理センターで、必要なアクセス許可が付与され、API アクセスページにリストされていることを確認します。詳細については、SharePoint API 管理ドキュメントを参照してください。

次の方法で共有