共用方式為

使用 Azure Active Directory B2C 在您自己的 React 應用程式中啟用驗證

這很重要

自 2025 年 5 月 1 日起，Azure AD B2C 將不再可供新客戶購買。 在我們的常見問題中深入瞭解。

本文說明如何將 Azure Active Directory B2C （Azure AD B2C） 驗證新增至您自己的 React 單頁應用程式 （SPA）。 瞭解如何整合 React 應用程式與 MSAL for React 驗證連結庫。

使用本文搭配標題為 在範例 React 單頁應用程式中設定驗證的相關文章。 將範例 React 應用程式取代為您自己的 React 應用程式。 完成本文中的步驟之後，您的應用程式會透過 Azure AD B2C 接受登入。

先決條件

檢閱在 React 單頁應用程式範例中設定驗證 的必要條件和整合步驟一文。

步驟 1：建立 React 應用程式專案

您可以使用現有的 React 應用程式，或 建立新的 React 應用程式。 若要建立新的專案，請在命令殼層中執行下列命令：

npx create-react-app my-app
cd my-app

步驟 2：安裝相依性

若要在應用程式中安裝 MSAL Browser 和 MSAL React 連結庫，請在命令殼層中執行下列命令：

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

安裝 react-router-dom 5.*版。 react-router-dom 套件包含在 Web 應用程式中使用 React Router 的系結。 在命令殼層中執行下列命令：

npm i react-router-dom@5.3.3

安裝 適用於 React 的 Bootstrap （選擇性，適用於 UI）：

npm i bootstrap react-bootstrap

步驟 3：新增驗證元件

範例程式代碼是由下列元件所組成。 從範例 React 應用程式將這些元件新增至您自己的應用程式：

  • public/index.html- 組合程式 會使用此檔案作為範本，並將 React 元件 <div id="root"> 插入 元素。 如果您直接在瀏覽器中開啟它，您會看到空白頁面。

  • src/authConfig.js - 組態檔，其中包含 Azure AD B2C 識別提供者和 Web API 服務的相關信息。 React 應用程式會使用此資訊來建立與 Azure AD B2C 的信任關係、登入和註銷使用者、取得令牌，以及驗證令牌。

  • src/index.js - 應用程式的 JavaScript 進入點。 此 JavaScript 檔案：

    • App將 掛接為根元件至公用/index.html 頁面的 <div id="root"> 元素。
    • 使用 PublicClientApplication 檔案中定義的組態來起始 MSAL 連結庫。 MSAL React 應該在元件樹狀結構外部具現化，以防止重新呈現時重新進行驗證。
    • 在具現化 MSAL 連結庫之後，JavaScript 程式代碼會將 做為屬性傳遞 msalInstance 至您的應用程式元件。 例如： <App instance={msalInstance} /> 。

  • src/App.jsx - 定義應用程式和頁面元件：

    • 應用程式元件是您應用程式的最上層元件。 它會包裝元件之間的 MsalProvider 所有專案。 MsalProvider 下的所有元件都可以透過內容存取 PublicClientApplication 實例，以及 MSAL React 提供的所有攔截和元件。 應用程式元件會掛接 PageLayout 及其 Pages 子元素。

    • Pages 元件會註冊並取消註冊 MSAL 事件回呼。 事件是用來處理 MSAL 錯誤。 它也會定義應用程式的路由邏輯。

    這很重要

    如果應用程式元件檔名為 App.js，請將變更為 App.jsx。

  • src/pages/Hello.jsx - 示範如何使用 OAuth2 持有人令牌呼叫受保護的資源。

    • 它會使用會傳回 PublicClientApplication 實例的 useMsal 攔截。
    • 透過 PublicClientApplication 實例，它會取得存取令牌來呼叫 REST API。
    • 叫用 callApiWithToken 函式，從 REST API 擷取數據，並使用 DataDisplay 元件轉譯結果。

  • src/components/NavigationBar.jsx - 具有登入、註銷、編輯配置檔和呼叫 REST API 重設按鈕的應用程式頂端導覽列。

    • 它會使用 AuthenticatedTemplate 和 UnauthenticatedTemplate，只有在使用者已驗證或未驗證時，才會分別轉譯其子系。
    • 使用重新導向和彈出視窗事件處理登入並註銷。

  • 來源/components/PageLayout.jsx

    • 一般版面配置，可在用戶從頁面巡覽至頁面時提供一致的體驗。 配置包含常見的使用者介面元素，例如應用程式標頭、 NavigationBar 元件、頁尾及其子元件。
    • 它使用 AuthenticatedTemplate，只有在使用者經過驗證時，才會轉譯其子系。

  • src/components/DataDisplay.jsx - 轉譯從 REST API 呼叫傳回的數據。

  • src/styles/App.css 和 src/styles/index.css - 應用程式的 CSS 樣式檔案。

  • src/fetch.js - 擷取對 REST API 的 HTTP 要求。

步驟 4：設定您的 React 應用程式

新增驗證元件之後，請使用 Azure AD B2C 設定來設定 React 應用程式。 Azure AD B2C 識別提供者設定是在 authConfig.js 檔案中設定。

如需指引，請參閱 設定您的 React 應用程式。

步驟 5：執行 React 應用程式

  1. 從 Visual Studio Code 開啟新的終端機，然後執行下列命令：

    npm install && npm update
npm start

    主控台視窗會顯示載入應用程式的埠號碼：

    Listening on port 3000...

  2. 若要呼叫 REST API，請遵循如何執行 Web API 的指引

  3. 在您的瀏覽器中，移至 以 http://localhost:3000 檢視應用程式

後續步驟

  • Last updated on