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

此示例文章使用示例 Node.js 应用程序来演示如何将 Azure Active Directory B2C （Azure AD B2C） 身份验证添加到 Node.js Web 应用程序。 示例应用程序允许用户使用 Azure AD B2C 用户流登录、注销、更新配置文件和重置密码。 示例 Web 应用程序使用 node Microsoft 身份验证库 （MSAL） 来处理身份验证和授权。

在本文中，你将执行以下任务：

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

先决条件

• Node.js。
• Visual Studio Code 或其他代码编辑器。
• Azure AD B2C 租户。 如果尚未创建自己的租户，请按照《教程：创建 Azure Active Directory B2C 租户》中的步骤进行操作，并记录您的租户名称。

步骤 1：配置用户流

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

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

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

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 框中输入 。

8. 在 “权限”下，选中 “授予管理员同意 openid 和 offline_access 权限” 复选框。

9. 选择“注册”。

10. 选择“概述”。

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

    

步骤 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 标识提供者的信息。 更新以下应用设置属性：

最终配置文件应如以下示例所示：

#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。 应会看到包含 “登录 ”按钮的页面。

   

测试登录

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

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

   

测试个人资料编辑

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

测试密码重置

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

测试注销

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

后续步骤

• 了解如何 使用 Azure AD B2C 在自己的 Node Web 应用程序中启用身份验证。