使用 Azure AD B2C 在示例 WPF 桌面应用中配置身份验证

项目
10/14/2024

本文使用一个示例 Windows Presentation Foundation (WPF) 桌面应用程序，说明如何向桌面应用添加 Azure Active Directory B2C (Azure AD B2C) 身份验证。

概述

OpenID Connect (OIDC) 是在 OAuth 2.0 上构建的身份验证协议。可以使用 OIDC 安全地将用户登录到应用程序。此桌面应用示例结合使用 Microsoft 身份验证库 (MSAL) 和 OIDC 授权代码用于代码交换的验证密钥 (PKCE) 流。 MSAL 是 Microsoft 提供的库，可简化向桌面应用添加身份验证和授权支持的过程。

登录流涉及以下步骤：

用户打开应用并选择“登录”。
应用打开桌面设备的系统浏览器，并发起到 Azure AD B2C 的身份验证请求。
用户注册或登录、重置密码，或使用社交帐户登录。
用户成功登录后，Azure AD B2C 向应用返回授权代码。
应用执行以下操作：
1. 将此授权代码交换到 ID 令牌、访问令牌和刷新令牌。
2. 它读取 ID 令牌声明。
3. 将令牌存储到内存中缓存供以后使用。

应用注册概述

若要让应用能够使用 Azure AD B2C 登录并调用 Web API，需要在 Azure AD B2C 目录中注册两个应用程序。

通过桌面应用程序注册，你的应用可使用 Azure AD B2C 进行登录。在应用注册过程中，请指定重定向 URI。重定向 URI 是用户通过 Azure AD B2C 完成身份验证之后 Azure AD B2C 将用户重定向到的终结点。此应用注册过程会生成应用程序 ID（也称为“客户端 ID”），可唯一标识你的桌面应用（例如，应用 ID：1）。
注册 Web API 后，你的应用就能够调用受保护的 Web API。注册将公开 Web API 权限（范围）。此应用注册过程会生成应用程序 ID，可唯一标识你的 Web API（例如，应用 ID：2）。向桌面应用（应用 ID：1）授予对 Web API 范围（应用 ID：2）的权限。

以下关系图描述了应用程序注册和体系结构：

Diagram of the desktop app with web API, registrations, and tokens.

调用 Web API

身份验证完成后，用户将与应用交互，应用会调用受保护的 Web API。 Web API 使用持有者令牌身份验证。持有者令牌是应用从 Azure AD B2C 获取的访问令牌。应用在 HTTPS 请求的授权标头中传递令牌。

Authorization: Bearer <access token>

如果访问令牌范围与 Web API 范围不一致，身份验证库将获取具有正确范围的新访问令牌。

注销流

注销流程涉及以下步骤：

用户从应用中注销。
应用清除其会话对象，并且身份验证库清除其令牌缓存。
应用将用户定向到 Azure AD B2C 注销终结点，以终止 Azure AD B2C 会话。
用户被重定向回应用。

先决条件

一台运行带 .NET 桌面开发的 Visual Studio 2019 的计算机。

步骤 1：配置用户流

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

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

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

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

步骤 2：注册应用程序

创建桌面应用和 Web API 应用程序注册，并指定 Web API 的范围。

步骤 2.1：注册 Web API 应用

请按照以下步骤创建 Web API 应用注册（应用 ID: 2）：

登录 Azure 门户。
确保正在使用的目录包含 Azure AD B2C 租户。在门户工具栏中选择“目录 + 订阅”图标。
在“门户设置 | 目录+订阅”页上的“目录名称”列表中找到你的 Azure AD B2C 目录，然后选择“切换”。
在 Azure 门户中，搜索并选择“Azure AD B2C”。
选择“应用注册”，然后选择“新建注册” 。
对于名称，请输入应用程序的名称（例如 my-api1）。保留“重定向 URI”和“支持的帐户类型”的默认值。
选择“注册”。
完成应用注册后，选择“概述”。
记录“应用程序(客户端) ID”值，以便在稍后配置 Web 应用程序时使用。

步骤 2.2：配置 Web API 应用的作用域

选择所创建的 my-api1 应用程序（应用 ID：2）以打开其“概述”页面。
在“管理”下，选择“公开 API” 。
选择“应用程序 ID URI”旁边的“设置”链接。将默认值 (GUID) 替换为一个唯一名称（例如“tasks-api”），然后选择“保存”。

Web 应用在请求 Web API 的访问令牌时，应将此 URI 添加为你为 API 定义的每个范围的前缀。
在“此 API 定义的范围”下选择“添加范围”。
若要创建一个用于定义对 API 的读取访问权限的范围，请执行以下操作：
1. 对于“范围名称”，输入“tasks.read” 。
2. 对于“管理员同意显示名称”，输入“对任务 API 的读取访问权限” 。
3. 对于“管理员同意说明”，输入“允许对任务 API 进行读取访问” 。
选择“添加作用域”。
选择“添加范围”，然后添加一个用于定义对 API 的写入访问权限的范围：
1. 对于“范围名称”，输入“tasks.write” 。
2. 对于“管理员同意显示名称”，“对任务 API 的写入访问权限” 。
3. 对于“管理员同意说明”，输入“允许对任务 API 进行写入访问” 。
选择“添加作用域”。

步骤 2.3：注册桌面应用

若要创建桌面应用注册，请执行下列操作：

登录到 Azure 门户。
选择“应用注册”，然后选择“新建注册” 。
在“名称”下，输入应用程序的名称（例如 desktop-app1）。
在“支持的帐户类型”下，选择“任何标识提供者或组织目录中的帐户(用于通过用户流对用户进行身份验证)” 。
在“重定向 URL”下，选择“公共客户端/本机(桌面)”，然后在 URL 框中输入 https://your-tenant-name.b2clogin.cn/oauth2/nativeclient。将 your-tenant-name 替换为你的租户名称。有关更多选项，请参阅配置重定向 URI。
选择“注册”。
完成应用注册后，选择“概述”。
记录“应用程序(客户端) ID”，以便在稍后配置桌面应用程序时使用。

步骤 2.4：为 Web API 授予桌面应用权限

若要向应用（应用 ID：1）授予权限，请执行以下步骤：

选择“应用注册”，然后选择你所创建的应用（应用 ID：1）。
在“管理”下选择“API 权限”。
在“已配置权限”下，选择“添加权限”。
选择“我的 API”选项卡。
选择应授予 Web 应用程序访问权限的 API（应用 ID：2）。例如，输入“my-api1”。
在“权限”下展开“任务”，然后选择之前定义的范围（例如，tasks.read 和 tasks.write )。
选择“添加权限”。
选择“向<租户名称>授予管理员许可”。
选择 “是” 。
选择“刷新”，然后验证两个范围的“状态”下是否均显示“已授予...” 。
从“配置权限”列表中，选择范围，然后复制范围全名。

步骤 3：配置示例 Web API

此示例获取一个访问令牌，该令牌具有桌面应用可对 Web API 使用的相关作用域。若要通过代码调用 Web API，请执行以下操作：

使用现有 Web API 或新建一个。有关详细信息，请参阅使用 Azure AD B2C 在自己的 Web API 中启用身份验证。
配置 Web API 后，复制 Web API 终结点的 URI。你在后续步骤中将使用该 Web API 终结点。

提示

如果没有 Web API，仍可运行此示例。在这种情况下，应用将返回访问令牌，但无法调用 Web API。

步骤 4：获取 WPF 桌面应用示例

下载 zip 文件，或从 GitHub 存储库克隆示例 Web 应用程序。

git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

在 Visual Studio 中打开 active-directory-b2c-wpf 解决方案（active-directory-b2c-wpf.sln 文件）。

步骤 5：配置示例桌面应用

在 active-directory-b2c-wpf 项目中，打开 App.xaml.cs 文件。 App.xaml.cs 类成员包含 Azure AD B2C 标识提供者的相关信息。桌面应用使用此信息与 Azure AD B2C 建立信任关系、允许用户登录和注销、获取令牌和验证令牌。

更新以下类成员：

密钥	值
`TenantName`	Azure AD B2C 租户名称的第一部分（例如 `contoso.b2clogin.cn`）。
`ClientId`	步骤 2.3 中的桌面应用程序 ID。
`PolicySignUpSignIn`	你在步骤 1 中创建的注册或登录用户流或自定义策略。
`PolicyEditProfile`	编辑你在步骤 1 中创建的个人资料用户流或自定义策略。
`ApiEndpoint`	（可选）你在步骤 3 中创建的 Web API 终结点（例如 `https://contoso.chinacloudsites.cn/hello`）。
`ApiScopes`	你在步骤 2.4 中创建的 Web API 作用域。

最终的 App.xaml.cs 文件应类似于下面的 C# 代码：

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.partner.onmschina.cn";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.cn";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.cn/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.chinacloudsites.cn/hello";

步骤 6：运行并测试桌面应用

还原 NuGet 包。
按 F5 生成并运行示例。
选择“登录”，然后使用你的 Azure AD B2C 本地帐户或社交帐户注册或登录。
成功注册或登录后，WPF 应用的下方窗格中会显示令牌详细信息。
选择“调用 API”，以调用 Web API。

后续步骤

了解如何使用 Azure AD B2C 在 WPF 桌面应用中配置验证选项。

通过