使用 Azure Active Directory B2C 在示例 Node.js Web 应用程序中配置身份验证

  • 项目

此示例文章使用一个示例 Node.js 应用程序来说明如何向 Node.js Web 应用程序添加 Azure Active Directory B2C (Azure AD B2C) 身份验证。 此示例应用程序允许用户使用 Azure AD B2C 用户流登录、注销、更新个人资料和重置密码。 此示例 Web 应用程序使用适用于 Node 的 Microsoft 身份验证库 (MSAL) 来处理身份验证和授权。

本文将执行以下任务：

  • 在 Azure 门户中注册 Web 应用程序。
  • 在 Azure 门户中为应用创建合并的“登录和注册”、“个人资料编辑”和“密码重置”用户流。
  • 更新示例 Node 应用程序，以使用你自己的 Azure AD B2C 应用程序和用户流。
  • 测试示例应用程序。

先决条件

步骤 1：配置用户流

当用户尝试登录你的应用时，该应用会通过用户流向授权终结点发起身份验证请求。 用户流定义并控制用户体验。 用户完成用户流后，Azure AD B2C 会生成一个令牌，然后将用户重定向回应用程序。

请创建用户流或自定义策略（如果你尚未这样做）。 重复这些步骤以按如下所述创建三个单独的用户流：

  • 组合的“登录和注册”用户流，例如 susi。 此用户流还支持“忘记密码”体验。
  • “个人资料编辑”用户流，例如 edit_profile。
  • “密码重置”用户流，例如 reset_password。

Azure AD B2C 将在用户流名称前面追加 B2C_1_。 例如，susi 重命名为 B2C_1_susi。

步骤 2：注册 Web 应用

若要让应用程序使用 Azure AD B2C 进行登录，请在 Azure AD B2C 目录中注册应用。 应用注册会在应用与 Azure AD B2C 之间建立信任关系。

在应用注册过程中，要指定重定向 URI。 重定向 URI 是用户通过 Azure AD B2C 完成身份验证之后 Azure AD B2C 将用户重定向到的终结点。 此应用注册过程会生成应用程序 ID（也称为“客户端 ID”），作为该应用的唯一标识。 注册应用后，Azure AD B2C 同时使用应用程序 ID 和重定向 URI 来创建身份验证请求。

步骤 2.1：注册应用

若要注册 Web 应用，请执行以下步骤：

  1. 登录 Azure 门户。

  2. 如果有权访问多个租户，请选择顶部菜单中的“设置”图标，从“目录 + 订阅”菜单中切换到你的 Azure AD B2C 租户。

  3. 在 Azure 门户中，搜索并选择“Azure AD B2C”。

  4. 选择“应用注册”，然后选择“新建注册” 。

  5. 在“名称”下，输入应用程序的名称（例如 webapp1）。

  6. 在“支持的帐户类型”下，选择“任何标识提供者或组织目录中的帐户(用于通过用户流对用户进行身份验证)” 。

  7. 在“重定向 URI”下，选择“Web”，然后在 URL 框中输入 http://localhost:3000/redirect 。

  8. 在“权限”下，选中“授予对 OpenID 和脱机访问权限的管理员同意”复选框。

  9. 选择“注册”。

  10. 选择“概述”。

  11. 记录“应用程序(客户端) ID”，以便在稍后配置 Web 应用程序时使用。

    Screenshot of the web app Overview page for recording your web app I D.

步骤 2.2：创建 Web 应用客户端密码

为注册的 Web 应用创建客户端密码。 Web 应用程序在请求令牌时使用客户端机密来证明其身份。

  1. 在“管理”下，选择“证书和机密”。
  2. 选择“新建客户端机密”。
  3. 在“说明”框中输入客户端机密的说明（例如 clientsecret1）。
  4. 在“过期时间”下，选择机密持续生效的时间，然后选择“添加”。
  5. 记下机密的“值”。 在稍后的步骤中将使用此值进行配置。

步骤 3：获取示例 Web 应用

下载 zip 文件，或从 GitHub 克隆示例 Web 应用。

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

将示例文件解压缩到文件夹。 你将获得一个具有以下目录结构的 Web 应用：

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

views 文件夹包含应用程序的用户界面的 Handlebars 文件。

步骤 4：安装依赖项

  1. 打开控制台窗口，切换到包含 Node.js 示例应用的目录。 例如：

    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp

  2. 运行以下命令以安装应用依赖项：

    npm install && npm update

步骤 5：配置示例 Web 应用

在代码编辑器（例如 Visual Studio Code）中打开 Web 应用。 在项目根文件夹下，打开 .env 文件。 此文件包含有关 Azure AD B2C 标识提供者的信息。 更新以下应用设置属性：

密钥 Value
APP_CLIENT_ID 在步骤 2.1 中注册的 Web 应用的“应用程序(客户端) ID”。
APP_CLIENT_SECRET 在步骤 2.2 中创建的 Web 应用的客户端机密值
SIGN_UP_SIGN_IN_POLICY_AUTHORITY “登录和注册”用户流机构，例如 https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<sign-in-sign-up-user-flow-name>。 请将 <your-tenant-name> 替换为你的租户的名称，将 <sign-in-sign-up-user-flow-name> 替换为你的“登录和注册”用户流的名称，例如 B2C_1_susi。 了解如何获取租户名称。
RESET_PASSWORD_POLICY_AUTHORITY “重置密码”用户流机构，例如 https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<reset-password-user-flow-name>。 请将 <your-tenant-name> 替换为你的租户的名称，将 <reset-password-user-flow-name> 替换为你的“重置密码”用户流的名称，例如 B2C_1_reset_password_node_app。
EDIT_PROFILE_POLICY_AUTHORITY “个人资料编辑”用户流机构，例如 https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<profile-edit-user-flow-name>。 请将 <your-tenant-name> 替换为你的租户的名称，将 <reset-password-user-flow-name> 替换为你的“重置密码”用户流的名称，例如 B2C_1_edit_profile_node_app。
AUTHORITY_DOMAIN Azure AD B2C 授权域，例如 https://<your-tenant-name>.b2clogin.cn。 将 <your-tenant-name> 替换为租户的名称。
APP_REDIRECT_URI 应用程序重定向 URI，Azure AD B2C 会在其中返回身份验证响应（令牌）。 它与你在 Azure 门户中注册应用时设置的“重定向 URI”匹配，必须可供公开访问。 将该值保留原样。
LOGOUT_ENDPOINT Azure AD B2C 注销终结点，例如 https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000。 请将 <your-tenant-name> 替换为你的租户的名称，将 <sign-in-sign-up-user-flow-name> 替换为你的“登录和注册”用户流的名称，例如 B2C_1_susi。

你的最终配置文件应类似于以下示例：

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.cn
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.cn/<your-tenant-name>.partner.onmschina.cn/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

运行示例 Web 应用

现在可以测试示例应用。 你需要启动 Node 服务器并通过 http://localhost:3000 上的浏览器访问它。

  1. 在终端中，运行以下代码以启动 Node.js Web 服务器：

    node index.js

  2. 在浏览器中转到 http://localhost:3000。 你应会看到显示了“登录”按钮的页面。

    Screenshot that shows a Node web app sign in page.

测试登录

  1. 在显示“登录”按钮的页面加载完毕后，选择“登录”。 系统会提示你进行登录。

  2. 输入登录凭据，例如电子邮件地址和密码。 如果没有帐户，请选择“立即注册”创建一个帐户。 成功登录或注册后，你应会看到显示了登录状态的以下页面。

    Screenshot shows web app sign-in status.

测试个人资料编辑

  1. 登录后，选择“编辑个人资料”。
  2. 根据需要输入新的更改，然后选择“继续”。 你应该会看到显示新更改（例如“名”）的登录状态页面。

测试密码重置

  1. 登录后，选择“重置密码”。
  2. 在出现的下一个对话框中，可以通过选择“取消”来取消操作。 或者，输入你的电子邮件地址，然后选择“发送验证码”。 你会收到发送到你的电子邮件帐户的验证码。 复制电子邮件中的验证码，将其输入到密码重置对话框中，然后选择“验证代码”。
  3. 选择“继续”。
  4. 输入新密码，确认后，选择“继续”。 你应该会看到显示登录状态的页面。

测试注销

登录后，选择“注销”。你应该会看到具有“登录”按钮的页面。

后续步骤