共用方式為

快速入門：使用驗證碼流程登入並取得 React SPA 的存取權杖

  • 發行項

歡迎！ 這可能不是您預期的頁面。 當我們處理修正程式時，此連結應會將您導向至正確的文章：

快速入門：使用 React 和代碼交換證明密鑰 (PKCE) 的授權碼流程，在單頁應用程式 (SPA) 中登入使用者

當我們努力解決問題時，也對您的不便深感抱歉，並感謝您的耐心等候。

在本快速入門中，您會下載並執行程式碼範例，該範例會示範 JavaScript React 單頁應用程式 (SPA) 如何使用授權碼流程登入使用者並呼叫 Microsoft Graph。 此程式碼範例會示範如何取得存取權杖來呼叫 Microsoft Graph API 或任何 Web API。

如需圖例，請參閱此範例的運作方式。

必要條件

步驟 1：在 Azure 入口網站中設定您的應用程式

此程式碼範例需要 的http://localhost:3000/。

幫我做這些改變

已設定 您的應用程式會使用這些屬性進行設定。

步驟 2：下載專案

使用 Node.js 以網頁伺服器執行專案

下載程式碼範例

注意

Enter_the_Supported_Account_Info_Here

步驟 3：您的應用程式已設定並準備好執行

我們已使用您的應用程式屬性值來設定您的專案。

步驟 4：執行專案

使用 Node.js 以網頁伺服器執行專案：

  1. 若要啟動伺服器，請從專案目錄執行下列命令：

    npm install
npm start

  2. 瀏覽至 http://localhost:3000/。

  3. 選取 [登入] 啟動登入程序，然後呼叫 Microsoft Graph API。

    第一次登入時，系統會提示您同意允許應用程式存取您的設定檔，並將您登入。 在您成功登入之後，請按一下 [要求設定檔資訊]，在頁面上顯示您的設定檔資訊。

其他相關資訊

此範例的運作方式

顯示單頁應用程式授權碼流程的圖表。

msal.js

MSAL.js 程式庫會登入使用者並要求權杖，該權杖是用來存取受 Microsoft 身分識別平台保護的 API。

如果您已安裝 Node.js，則可以利用 Node.js 套件管理員 (npm) 下載最新版本：

npm install @azure/msal-browser @azure/msal-react

下一步

如需使用 React 建置驗證碼流程應用程式的詳細逐步指南，請參閱下列教學課程：

教程：React 單頁應用程式（SPA）登入使用者