使用 Azure Active Directory B2C 在自己的 React 应用程序中启用身份验证

2025/05/18

重要

自 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 路由器的绑定。在命令行界面中运行以下命令：

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 下的所有组件都可以通过上下文以及 MSAL React 提供的所有挂钩和组件访问 PublicClientApplication 实例。应用组件装载 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，仅当用户进行身份验证或未经身份验证时才会呈现其子级。
- 使用重定向和弹出窗口事件处理登录和注销。
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 标识提供者设置在 authConfig.js 文件中配置。

有关指南，请参阅配置 React 应用。

步骤 5：运行 React 应用程序

在 Visual Studio Code 中，打开新终端并运行以下命令：
```
npm install && npm update
npm start
```
控制台窗口将显示托管该应用程序的端口号：
```
Listening on port 3000...
```
若要调用 REST API，请按照有关如何运行 Web API 的指导进行作
在浏览器中，转到 http://localhost:3000 查看应用程序

通过