測試呼叫 Microsoft Graph 的 JavaScript 用戶端 Web 應用程式

  • 發行項

在本教學課程中，您將瞭解如何使用 Dev Proxy 來測試呼叫 Microsoft Graph 的 JavaScript 用戶端 Web 應用程式範例。

必要條件

本教學課程的這個部分假設您已在計算機上安裝和設定 Dev Proxy。 如果不是，請 立即執行此動作。

為了依循本教學課程進行操作，您需要：

提示

建議您使用已安裝內容套件的 Microsoft 365 開發人員租使用者。 註冊 Microsoft 365 開發人員計劃，以取得免費租使用者。

複製並設定範例應用程式

啟動開發 Proxy

開發 Proxy 隨附預設設定，可測試將要求傳送至 Microsoft Graph 和 SharePoint Online API 的應用程式。

  • 開啟命令提示字元，輸入 ， devproxy --config-file "~appFolder/presets/m365.json" 然後按 Enter 以啟動具有 Microsoft 365 設定的 Dev Proxy。

啟動範例應用程式

  • 開啟命令提示字元並變更至 samples 目錄。
  • 輸入並按 Enternpx lite-server 以啟動範例應用程式 Web 伺服器。

在 macOS 上的 Microsoft Edge 瀏覽器中執行的範例應用程式螢幕快照。應用程式會顯示一個大型 Microsoft 標誌，其下方有兩個按鈕。具有文字 『With SDK』 的主要按鈕，以及具有文字 『Without SDK』 的次要按鈕。

測試範例應用程式

  1. 在執行中的應用程式中，選取 Without SDK 按鈕。

警告

如果您在按鍵 Without SDK 之後收到空白頁面，請檢查您是否已 設定 Azure AD 應用程式註冊。 當包含Client ID應用程式註冊的 檔案遺失時.env，就會發生此問題。

  1. Login選取按鈕並完成登入流程。

Windows 11 上在 Microsoft Edge 瀏覽器中執行的範例應用程式螢幕快照。應用程式會顯示一個大型 Microsoft 標誌，其下方有兩個按鈕。具有文字 'Login' 的主要按鈕，以及具有文字 'Back' 的次要按鈕。

Dev Proxy 藉由攔截對 Microsoft Graph 的要求，將錯誤引入您的應用程式。 它會使用 50% 的機會來失敗的要求，並顯示隨機 支援的 HTTP 錯誤狀態代碼。

檢視 Proxy 輸出，並花點時間重新整理範例應用程式。 在此案例中，請參閱範例應用程式如何處理 (，在此案例中) Proxy 引進的失敗。

在 Microsoft Edge 中執行的範例應用程式的螢幕快照。應用程式不會顯示使用者虛擬人偶。Microsoft Edge 開發人員工具會開啟至側邊，並顯示主控台記錄檔中顯示的錯誤。

  1. 按 Ctrl + C 以停止開發 Proxy。

後續步驟

探索操作說明指南