使用 Azure Active Directory B2C 建置組塊，在 React 應用程式中啟用驗證

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

您可以使用現有的 React 應用程式，或建立新的 React 應用程式。若要建立新專案，請在命令殼層中執行下列命令：
npx create-react-app my-app
cd my-app
npm start
步驟 2：安裝相依性
若要在您的應用程式中安裝 MSAL 瀏覽器和 MSAL React 程式庫，請在您的命令殼層中執行下列命令：
npm i @azure/msal-browser  @azure/msal-react 
安裝 react-router-dom 5.*版。 react-router-dom 套件包含在 Web 應用程式中使用 React 路由器的繫結。 在命令殼層中執行下列命令：
npm i react-router-dom@5.3.3
安裝 Bootstrap for React (選用，適用於 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 當作根元件掛接至 public/index.html 頁面的 <div id="root"> 元素。
使用 authConfig.js 檔案中定義的設定來起始 MSAL PublicClientApplication 程式庫。  MSAL React 應該在元件樹狀結構外部具現化，以防止重新轉譯時將其重新具現化。
在具現化 MSAL 程式庫之後，JavaScript 程式碼會將 msalInstance 當作屬性傳遞至您的應用程式元件。 例如：<App instance={msalInstance} />。
src/App.jsx - 定義 App 和 Pages 元件：
App 元件是您應用程式的最上層元件。 其會包裝元件 MsalProvider 之間的一切。 MsalProvider 底下的所有元件都可以透過內容和 MSAL React 提供的所有勾點和元件，存取 PublicClientApplication 執行個體。 App 元件會掛接 PageLayout 及其 Pages 子元素。
Pages 元件會註冊並取消註冊 MSAL 事件回撥。 這些事件是用來處理 MSAL 錯誤。 其也會定義應用程式的路由邏輯。
如果 App 元件檔案名稱為 App.js，請將其變更為 App.jsx。
src/pages/Hello.jsx - 示範如何使用 OAuth2 持有人權杖呼叫受保護的資源。
其會使用 useMsal 勾點，傳回 PublicClientApplication 執行個體。
使用 PublicClientApplication 執行個體，其會取得存取權杖來呼叫 REST API。
叫用 callApiWithToken 函式，從 REST API 擷取資料，並使用 DataDisplay 元件呈現結果。
src/components/NavigationBar.jsx - 具有登入、登出、編輯設定檔和呼叫 REST API 重設按鈕的應用程式頂端導覽列。
其會使用 AuthenticatedTemplate 和 UnauthenticatedTemplate，只在使用者已驗證或未驗證時，才會分別呈現其子項目。
使用重新導向和快顯視窗事件處理登入並登出。
src/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 識別提供者設定是在 auth_config_b2c.json 檔案和 B2CConfiguration 類別中設定的。
如需指引，請參閱設定 React 應用程式。
步驟 5：執行 React 應用程式
從 Visual Studio 程式碼中，開啟新的終端機，然後執行下列命令：
npm install && npm update
npm start
主控台視窗會顯示裝載應用程式的連接埠號碼：
Listening on port 3000...
若要呼叫 REST API，請遵循如何執行 Web API 的指引
在您的瀏覽器中，移至 http://localhost:3000 來檢視應用程式
使用 Azure AD B2C 在您自己的 React 應用程式中設定驗證選項。
請參閱 MSAL for React 文件
在您自己的 Web API 中啟用驗證