Microsoft Graph Toolkit の概要

[アーティクル]
11/15/2023

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

Microsoft Graph ツールキットを使用すると、アプリケーションで Microsoft Graph を簡単に使用できます。次の例では、 Login コンポーネントと Agenda コンポーネントを使用して、サインインしているユーザーとその予定表イベントを 2 行のコードだけで表示します。

HTML
React

mgt.dev でこの例を開きます。

Microsoft Graph Toolkit を使用する理由

Microsoft Graph Toolkit を使用すると、Microsoft Graph を利用した一般的なエクスペリエンスを独自のアプリケーションに迅速かつ簡単に統合できます。ツールキット:

開発時間を削減します。 Microsoft Graph API に接続し、Microsoft 365 エクスペリエンスのように見える UI でデータをレンダリングする作業は、カスタマイズは必要ありません。
どこでも動作します。すべてのコンポーネントは Web 標準に基づいており、最新のブラウザーと Web フレームワーク (React、Angular、Vue など) とシームレスに連携します。
美しいですが、柔軟です。コンポーネントは、Microsoft 365 エクスペリエンスのように見える設計になっていますが、 CSS のカスタムプロパティとテンプレートを使用してカスタマイズすることもできます。

誰がそれを使用する必要がありますか?

Microsoft Graph Toolkit は、次のような Microsoft Graph からデータに接続してアクセスするアプリを開発するすべてのエクスペリエンスレベルの開発者に最適です。

Web アプリケーション
[Microsoft Teams] タブ
プログレッシブ Web アプリ (PWA)
Electron アプリ
SharePoint Web パーツ

Microsoft Graph Toolkit の内容

コンポーネント

Microsoft Graph Toolkit には、Microsoft Graph API を搭載した最も一般的に構築されたエクスペリエンス用の Web コンポーネントのコレクションが含まれています。

コンポーネントは、React コンポーネントとしても使用できます。

コンポーネント	説明
Agenda	ユーザーまたはグループの予定表にイベントを表示します。
チャット (プレビュー)	Microsoft Teams からの 1:1 またはグループ会話を表示します
ファイル	アイコン、ファイル名、作成者などを含むファイルまたはフォルダーを表します。
ファイル一覧	複数のファイルまたはフォルダーの一覧を表示します。
Get	HTML 内の任意の Microsoft Graph APIに対して直接 GET クエリを実行できます。
ログイン	Microsoft ID プラットフォームでユーザーを認証し、サインイン時にユーザーのプロファイル情報を表示するためのボタンとポップアップコントロール。
新しいチャット (プレビュー)	Microsoft Teams で新しい 1:1 またはグループ会話を作成するためのフォーム
People	写真やイニシャルでユーザーまたは連絡先のグループを表示します。
People ピッカー	ユーザーのSearchし、結果の一覧を表示します。
人	写真、名前、メールアドレスで、ユーザーまたは連絡先を表示します。
人物カード	ユーザーに関するより多くのプロファイル情報を表示するためにユーザーコンポーネントで使用されるポップアップ。
ピッカー	リソースの配列から 1 つのリソースを選択できるドロップダウンコントロールをレンダリングします。
Planner タスク	Microsoft Plannerまたは Microsoft To Do からのタスクの追加、削除、完了、または編集を表示および有効にします。
[検索ボックス]	microsoft Teams チャネルのSearch、結果のレンダリングされた一覧からチャネルを選択します。
結果のSearch	HTML で直接 Microsoft Graph の検索エンドポイントに対してクエリを実行できます。
分類ピッカー	分類ピッカーコンポーネントを使用して、Microsoft Graph APIに分類についてクエリを実行し、用語を含むドロップダウンコントロールをレンダリングします。
Teams チャネルピッカー	microsoft Teams チャネルのSearch、結果のレンダリングされた一覧からチャネルを選択します。
To Do	Microsoft To Do からのタスクの追加、削除、完了、または編集を表示および有効にします。

プロバイダー

プロバイダーは、認証を有効にし、さまざまなプラットフォームでアクセストークンを取得するための実装を提供し、Microsoft Graph API を呼び出すための Microsoft Graph クライアントを公開します。コンポーネントは、プロバイダーで使用する場合に最適に機能しますが、プロバイダーは独自に使用できます。

プロバイダー	説明
Custom	アプリケーションの既存の認証コードを使用して、Microsoft Graph への認証とアクセスを有効にするカスタムプロバイダーを作成します。
電子	電子アプリ内のコンポーネントへの Microsoft Graph アクセスを認証して提供します。
MSAL2	msal-browser を使用してユーザーにサインインし、Microsoft Graph で使用するトークンを取得します。
プロキシ	バックエンドを介して Microsoft Graph へのすべての呼び出しをルーティングすることで、バックエンド認証を使用できるようにします。
SharePoint	SharePoint Web パーツ内のコンポーネントへの Microsoft Graph アクセスを認証して提供します。
TeamsFx	Microsoft Teams アプリケーション内の TeamsFx プロバイダーを使用して、Microsoft Graph ツールキットコンポーネントに Microsoft Graph へのアクセスを提供します。