什麼是 Microsoft Graph 工具組?

已完成

當您建置 Web 應用程式並想要將其連線到 Microsoft 365 時,您需要實作授權並呼叫 Microsoft Graph 以擷取 Microsoft 365 中儲存的資料。

為了簡化此程序,Microsoft Graph 工具組提供一組 Web 元件和驗證提供者,以便將 Web 應用程式連線到 Microsoft 365。

在本單元中,您將了解什麼是 Microsoft Graph 工具組,以及為什麼想要使用它。 您也會了解可使用工具組的各種應用程式。

Microsoft Graph 工具組概觀

Microsoft Graph 工具組是一組 Web 元件,您可以將其搭配任何 JavaScript 架構使用,以將應用程式連線到 Microsoft 365。 在應用程式中載入此工具組之後,您即可存取一組自訂 HTML 標籤。 這些標籤可讓您從 Microsoft 365 載入資料。

例如,若要顯示目前使用者即將帶來的會議清單,您會在應用程式中包含下列程式碼片段:

<mgt-agenda></mgt-agenda>

您的應用程式接著會呈現:

Microsoft Graph 工具組 [日程] 元件所呈現之即將到來會議清單的螢幕擷取畫面。

Microsoft Graph 工具組會以新的元件和功能進行定期更新。

您為何要使用 Microsoft Graph 工具組?

在先前的範例中,您是否注意到不需要發出單一 Web 要求? 這就是您應該考慮使用 Microsoft Graph 工具組的原因。

  • 著重於建置自己的 Web 應用程式:Microsoft Graph 工具組會抽離授權並連線至 Microsoft Graph。 您不必擔心授權、建立 Web 要求、處理回應,以及處理例外狀況。
  • 自訂呈現以符合您的 Web 應用程式:所有 Microsoft Graph 工具組元件都可供使用。 根據預設,其使用 Fluent UI (Microsoft 365 設計語言) 顯示資料。 每個元件也會公開範本,可讓您自訂所呈現的資料。

您何時要使用 Microsoft Graph 工具組?

當您為 Microsoft 365 建置 Web 應用程式和擴充功能時,可以使用 Microsoft Graph 工具組。

  • 在 Web 應用程式中使用 Microsoft Graph 工具組:Microsoft Graph 工具組最適合用於 Web 應用程式。 在最少設定的情況下,可讓人員使用其 Microsoft 365 帳戶登入您的應用程式。 您可使用不同的元件,直接從 Microsoft 365 載入資料,以提高應用程式的價值。
  • 使用 Microsoft Graph 工具組建立 Microsoft 365 擴充功能:您也可以在建立 Microsoft 365 擴充功能 (例如 Teams 索引標籤或 SharePoint 架構網頁元件) 時,使用 Microsoft Graph 工具組。 為了建立這些擴充功能,此工具組隨附提供者,以使用 Microsoft 365 公開的現有驗證資訊。
  • 在任何 JavaScript 架構中使用 Microsoft Graph 工具組:Microsoft Graph 工具組網頁元件可搭配任何 JavaScript 架構運作。 如果您使用 React 建置 Web 應用程式,則有針對 React 所製作的特定工具組套件。 此套件將工具組的元件包裝在 React 元件中,讓您更輕鬆地將複雜資料傳遞至元件,以及設定事件處理常式。

在 Web 應用程式中載入 Microsoft Graph 工具組

如果您在未使用搭配程式的情況下建置 Web 應用程式,可以直接從內容傳遞網路載入 Microsoft Graph 工具組。 若要從內容傳遞網路載入工具組,請將下列程式碼片段新增至您的 Web 應用程式:

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

如果您處理的專案使用套件管理員 (例如 npm),請安裝 @microsoft/mgt 套件,以將 Microsoft Graph 工具組新增至您的 Web 應用程式:

npm install @microsoft/mgt

如果您建置 React 應用程式,請改為安裝 @microsoft/mgt-react 套件:

npm install @microsoft/mgt-react