ASP.NET Core 和 Blazor 代码冒险：配置 Azure AD 身份验证

• 下载源代码 - 998.8 KB

引言

如果你偶然发现这篇文章，那么我猜测你是 Blazor 的新手，并且想通过实际示例亲自动手。就像你一样，我对 Blazor 也非常陌生，这就是为什么我撰写本系列文章，作为其他可能希望尝试 Blazor 的 ASP.NET 开发人员的参考。

这是 ASP.NET Core 和 Blazor 代码冒险系列的第一篇文章。本系列文章的目标是从头开始构建一个数据驱动的 Blazor 应用程序，从设置开发工作区、身份验证、使用 CRUD 进行数据访问、使用 Rest API 到部署。为了涵盖典型安全 Web 应用程序中的大多数实际场景，我们将构建一个简单的待办事项 Web 应用程序，该应用程序允许用户提交请求，然后将请求通知管理员，以便他们可以对其进行处理。你可以将此应用程序视为一个内部工具，它将在你的组织内部用于处理用户遇到的问题。我们将尝试在应用程序中尽可能多地整合功能，但在本系列中，我们将从身份验证部分开始。

背景

去年年初，微软宣布了 ASP.NET 团队的一个名为 Blazor 的新实验项目。Blazor 是一个基于 C#、Razor 和 HTML 的实验性 Web UI SPA 框架，通过 WebAssembly 在浏览器中运行，无需 JavaScript。是的，你没听错——无需 JavaScript！话虽如此。大约在 2019 年 4 月，Blazor 正式 发布 预览版。这意味着 Blazor 不再是实验性的，可能会在 .NET Core 3.0 之后正式发布。

在这篇文章之前，当 Blazor 仍处于实验性发布阶段时，我一直在 探索 Blazor，我个人觉得这个框架非常有趣。我认为 Blazor 将会非常成功，因为我看到 WebAssembly 实际上正在超越 JavaScript。当然，JavaScript 及其框架不会消失，但是当你只需教新程序员 C#、Python 等，并让他们在性能更高的环境中使用更简单的工具时，你为什么要教他们 JavaScript 呢？

设置开发环境

让我们继续安装构建 Blazor 应用程序所需的工具和 SDK。如果你已经安装了下面列表中提到的工具，那么你可以跳过此步骤，但请确保将它们更新到最新版本。

必备组件

• Visual Studio 2019 预览版（16.2 预览版 2 或更高版本）以及 ASP.NET Core Web 开发工作负载
• .NET Core 3 预览版 (dotnet-sdk-3.0.100-preview6-012264-win-x64)
• 最新的 Blazor 扩展 (Microsoft.VisualStudio.BlazorExtension.16.0.19307.2)

已安装的框架和工具

安装 .NET Core 3.0 预览版和 Blazor 组件后，会自动安装以下框架和工具

• Microsoft Visual Studio Professional 2019 预览版 (版本 16.2.0 Preview 2.0)
• Microsoft .NET Core (版本 3.0.0-preview6-27804-01)
• ASP.NET Core Blazor 语言服务 (版本 16.0.19307.2)
• ASP.NET 和 Web 工具 2019 (版本 16.2.159.22830)
• ASP.NET Web 框架和工具 2019 (版本 16.2.159.22830)

成功安装上述先决条件后，让我们开始冒险吧！

设置 Azure Active Directory

我们在这里需要设置的第一件事是托管在 Azure 中的 Active Directory，以便我们稍后在应用程序中测试用户身份验证。如果你的公司或管理员已经设置了 Azure AD，那么你可以跳过本节，直接跳转到下一步。总而言之，为了启用 Azure AD 身份验证，你需要设置以下参数：

• 域名
• 租户 ID
• 客户端 ID

现在，如果你想自己探索 Azure AD，并了解如何在 Azure 中设置一个简单的 Active Directory，那么让我们继续吧。😊

通过此链接登录 Azure 门户：https://azure.microsoft.com/en-us/

登录后，点击网站右上角的“门户”链接，如下图所示

进入 Azure 门户后，点击如下图所示的“Azure Active Directory”链接

在下一个屏幕上，点击“创建目录”链接，如下图所示

现在，为你的目录输入一个唯一的“组织”和“域”名称。在此示例中，我使用了以下值

引用

请记下域名，因为我们将在应用程序中设置身份验证时使用它。

当您对提供的值满意后，只需点击“创建”按钮即可为您设置目录。通常，设置只需一分钟左右。有时，您可能需要稍等片刻，因为根据您的互联网速度，可能需要几分钟才能完成设置。

完成后，门户中应显示通知，如下图所示

创建新用户

接下来，我们将在刚刚创建的目录中创建几个测试用户。

现在点击“点击此处管理您的 Active Directory”链接，或者直接点击“Azure Active Directory”链接。它应该会带您进入我们刚刚创建的 Active Directory 域。

点击“用户”链接，如下图所示

让我们通过输入名称和他们的电子邮件地址或用户名来创建一些测试用户，如下图所示

您可以创建几个或更多用户，但为了本次练习，我只创建两个用户

• 用户
• Admin

配置了这两个用户后，我们就可以在本系列的后续部分中测试应用程序与普通用户和管理员角色。您可以通过导航到“所有用户”链接查看所有已创建的用户列表，如下图所示：

使用 Azure AD 进行服务器端 Blazor 身份验证

在此练习中，我们将探索 Azure AD 身份验证。让我们看看如何使用 Blazor 实现这一点。

2019 年年中，微软发布了 ASP.NET Core 3.0 Preview 6，其中备受关注的 Blazor 项目获得了内置支持，可以处理身份验证和授权，以及其他更新。 微软 表示：“服务器端 Blazor 模板现在支持使用 ASP.NET Core Identity、Azure AD 和 Azure AD B2C 启用所有标准身份验证配置的选项。我们尚未更新 Blazor WebAssembly 模板以支持这些选项，但我们计划在 .NET Core 3.0 发布后这样做。” 有关此版本的更多详细信息，请参阅：.NET Core 3.0 预览版中的 ASP.NET Core 和 Blazor 更新。

这简单地意味着对于我们 .NET 开发人员来说，身份验证和授权现在可以轻松地集成到我们的 Blazor 应用程序中，并支持任何你想要的配置类型。因此，事不宜迟，让我们在 Blazor 中尝试 Azure AD 身份验证。

启动 Visual Studio 2019 预览版，然后创建一个新项目，如下图所示

选择 ASP.NET Core Web 应用程序工作负载，如下图所示，然后单击下一步

为您的项目设置一个您想要的名称，然后单击“创建”。它现在应该会带您到以下屏幕

从列表中选择 Blazor (服务器端) 模板，如下图所示，然后单击“身份验证”下的“更改”链接

在下一个屏幕上，选择“工作或学校帐户”，然后提供您在 Azure 门户中配置的域名

完成身份验证设置后，单击“创建”按钮，让 Visual Studio 为您搭建必要的文件。成功后，您应该会看到类似以下内容

您将看到“Microsoft.AspNetCore.Authentication.AzureAD.UI”NuGet 包作为项目依赖项添加。此包提供了组件，可轻松地在我们的 ASP.NET Core 应用中集成 Azure Active Directory 身份验证。

LoginDisplay.razor 页面也为我们创建，并包含以下 Blazor 标记

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <a href="AzureAD/Account/SignOut">Log out</a>
    </Authorized>
    <NotAuthorized>
        <a href="AzureAD/Account/SignIn">Log in</a>
    </NotAuthorized>
</AuthorizeView>

上述标记使用 Blazor AuthorizeView 组件，该组件根据用户是否经过身份验证并有权查看页面来显示 UI。该组件公开了一个类型为 AuthenticationState 的上下文变量 (@context.User.Identity.Name)，您可以使用它来访问有关已登录用户的信息。

现在，在 appsettings.json 文件中，您还会找到以下生成的配置

"AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "theproudmonkey.onmicrosoft.com",
    "TenantId": "123XXXXX-12XX-12XX-12XX-123456XXXXXX",
    "ClientId": "123XXXXX-12XX-12XX-12XX-123456XXXXXX"
},

上述 JSON 配置定义了我们的 Azure AD 配置。请注意，您必须将 TenantId 和 ClientId 的值更改为您实际拥有的值。此配置将在运行时调用的 Startup.cs 文件中的 ConfigureServices() 方法中被调用

public void ConfigureServices(IServiceCollection services){
        services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
                .AddAzureADBearer(options => Configuration.Bind("AzureAd", options));
        services.AddControllers();
}

上面的代码使用 AzureADDefaults.BearerAuthenticationScheme（Azure AD Bearer 的默认方案）添加身份验证服务中间件。然后调用 AddAzureADBearer() 方法并绑定 appsettings.json 文件中的“AzureAd”配置。

在后台，Visual Studio 会自动在 Azure AD 应用程序注册中注册我们的 ASP.NET Core 应用程序。您可以通过导航回 Azure 门户 > Azure Active Directory > 应用程序注册 来验证这一点

首次运行

要使用 Azure Active Directory 登录用户，应用程序应使用 SSL (https) 运行。默认情况下，项目已配置为 SSL，因此我们无需配置它。

现在为了确保我们的应用程序正在使用 Azure AD 身份验证，让我们对其进行测试。构建应用程序，然后按 CTRL + F5 键运行应用程序。

输入您的 Microsoft AD 帐户，然后点击“下一步”。它将带您进入下一个屏幕以输入相应的密码

如果登录成功，它应该会带你到 Blazor 应用程序的默认页面，如下图所示

点击“注销”链接将生成以下输出

就是这样！只需点击几下，我们现在就有一个运行着 Azure AD 身份验证的 Blazor 应用程序了。Visual Studio 在后台将所有部分连接起来，从而无需我们进行大量编码即可实现身份验证。太棒了！

敬请期待下一篇文章！

摘要

在本系列中，我们学习了如何通过创建新的租户和用户来设置 Azure Active Directory。我们还学习了如何创建一个简单的 Blazor 应用程序，并使用 Azure AD 凭据对用户进行身份验证。

历史

• 2019 年 8 月 5 日：初始版本