通过

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

  • 项目

本文介绍如何将 Azure Active Directory B2C (Azure AD B2C) 身份验证添加到你自己的 React 单页应用程序 (SPA)。 了解如何将 React 应用程序与 MSAL for React 身份验证库进行集成。

将此文章与标题为在示例 React 单页应用程序中配置身份验证的相关文章结合使用。 将示例 React 应用替换为你自己的 React 应用。 完成本文中的步骤后，应用程序将接受通过 Azure AD B2C 进行登录。

先决条件

查看在示例 React 单页应用程序中配置身份验证一文中的先决条件和集成步骤。

步骤 1：创建 React 应用项目

可以使用现有的 React 应用，或创建新的 React 应用。 若要创建新项目，请在命令 shell 中运行以下命令：

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

步骤 2：安装依赖项

若要在应用程序中安装 MSAL 浏览器和 MSAL React 库，请在命令 shell 中运行以下命令：

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

安装 react-router-dom 版本 5.*。 react-router-dom 包中包含用于在 Web 应用程序中使用 React Router 的绑定。 在命令 shell 中运行以下命令：

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 持有者令牌调用受保护的资源。

    • 它使用返回 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 应用程序

  1. 在 Visual Studio Code 中，打开一个新的终端并运行以下命令：

    npm install && npm update
npm start

    控制台窗口将显示托管该应用程序的端口号：

    Listening on port 3000...

  2. 若要调用 REST API，请遵循有关如何运行 Web API 的指导

  3. 在浏览器中转到 http://localhost:3000 以查看应用程序

后续步骤