使用 Blazor 服务器端入门身份验证和授权
4.59/5 (6投票s)
本文将详细介绍如何在 Blazor ServerSide 应用程序中使用身份验证和授权。
引言
等待结束了，是的，现在我们可以将 ASP.NET Core 身份验证和授权功能添加到 Blazor 应用程序中了。
本文将详细介绍如何在 Blazor ServerSide 应用程序中使用身份验证和授权。是的，现在您可以直接为 Blazor Server Side 应用程序使用身份验证和授权。 .NET Core 3.0 的新预览版本和最新的 Visual Studio 2019 允许我们使用 ASP.NET Identity 来处理 Blazor 应用程序。
在这里，我们将看到如何
- 在 SQL Server 中创建数据库并将其用于 ASP.NET 表创建
- 根据身份验证和授权显示菜单
对于未经验证和未授权的成员，显示不同的菜单
ASP.NET Identity 允许我们将登录功能添加到我们的系统中。在这里，在本演示中，我们将使用 SQL Server 来存储用户详细信息和配置文件数据。我们将使用 ASP.NET Identity 进行新用户注册、登录和维护用户配置文件数据。如果谈论登录，重要的问题是登录用户是否已通过身份验证以及是否有权查看页面。
身份验证和授权
身份验证
检查有效用户。这里的问题是如何检查用户是否有效。当用户第一次访问网站时，他/她将为该网站注册。他们所有的信息，如用户名、密码、电子邮件等，都将存储在网站数据库中。当用户输入他/她的用户 ID 和密码时，信息将与数据库进行比较。如果用户输入的用户名和密码与数据库中的相同，那么他/她就是一个有效用户，将被重定向到网站的主页。如果用户输入的用户名或密码与数据库不匹配，登录页面将显示一条消息，类似“请输入有效的用户名或密码”。检查用户是否有效以访问网站的整个过程称为身份验证。
Authorization
一旦用户通过身份验证，就需要根据他的/她的角色将他们重定向到适当的页面。例如，当管理员登录时，她/他需要被重定向到管理员页面。如果簿记员登录，那么他/她需要被重定向到他的账户页面。
背景
请确保您已在计算机上安装了所有先决条件。如果没有，请一个接一个地下载并安装它们。
必备组件
Using the Code
步骤 1：创建数据库
首先，我们将创建一个数据库，并在 appsettings.json 文件中为 DefaultConnection 设置连接字符串，指向我们新创建的数据库。我们将使用此数据库来创建 ASP.NET Core Identity 表。
创建数据库：运行以下脚本来创建我们的数据库
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'BlazorDB' )
DROP DATABASE BlazorDB
GO
CREATE DATABASE BlazorDB
GO
USE BlazorDB
GO
运行 DB 脚本后，我们可以看到数据库已创建，但表尚未创建。
步骤 2 - 创建 Blazor Server Side
安装上述所有先决条件和 ASP.NET Core Blazor 扩展后，在桌面上单击 **开始 >> 程序 >> Visual Studio 2019 >> Visual Studio 2019**。单击 **新建 >> 项目**。
单击 ASP.NET Core Web 应用程序，然后单击“下一步”。
输入您的项目名称，然后单击“创建”按钮。
现在，我们可以看到已列出 ASP.NET Core 3.0。我们选择 Blazor (Server Side)，然后单击 **更改身份验证** 为我们的项目设置身份验证。
在这里，我们选择 Individual User Account 将所有用户详细信息存储到 SQL Server。
创建 ASP.NET Core Blazor 应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。在这里，我们可以看到包含所有 razor 页面的 pages 文件夹，以及与我们的 ASP.NET MVC 共享文件夹类似的 Shared 文件夹，其中将包含导航菜单页面、用于内容显示的 MainLayout 页面以及用于新用户注册和登录的 LoginDisplay 页面。appsetting.json 页面用于设置我们的数据库连接字符串。
更新 appsettings.json
在 appsettings.json 文件中，我们可以找到 DefaultConnection Connection string。在这里，在连接字符串中，更改您的 SQL Server 名称、UID 和 PWD 以在一个数据库中创建和存储所有用户详细信息。
步骤 3：注册并创建您的第一个用户
现在，我们的 Blazor Web 应用程序已准备就绪，用户可以在我们的网站上注册，并且用户可以在注册后登录我们的系统。构建并运行您的应用程序以注册您的第一个用户。
单击“注册”链接以注册我们的第一个用户。
Migration
当我们单击 **注册** 按钮时，我们可以看到下面的页面。不要对此页面感到恐慌，因为我们第一次运行它时，需要进行迁移，只需单击“应用迁移”按钮。
我们可以看到迁移已应用的确认，然后单击“尝试刷新页面”消息。
刷新页面，我们可以看到新注册的用户已成功登录我们的网站。
我们还可以通过单击网站顶部的用户名来更新用户详细信息。
刷新数据库
当我们刷新数据库时，我们可以看到所有 Identity 表都已创建。
步骤 4：通过身份验证显示菜单
现在，让我们看看如何为未经验证的用户和已验证的用户显示菜单。为此，首先我们添加一个 razor 页面，并将其命名为 Userpage，如下所示。
右键单击 Pages 文件夹，然后单击“添加新页面”。
将其命名为 Usepage，然后单击“添加”。
在页面中，我们只添加一个 H1 标签和一些文本，表示您未登录。
通过身份验证隐藏和显示菜单
现在，我们将通过用户身份验证和授权来显示和隐藏菜单。为此，我们首先打开菜单页面。您可以在 Shared 文件夹下找到 NavMenu.razor。
现在，我们可以看到默认情况下已添加 3 个菜单：Home、Counter 和 Fetch data。我们将仅为已通过身份验证和授权的用户显示 Counter 和 Fetch data 菜单。
对于未授权的用户，我们将显示我们新创建的 Userpage。为此，我们将使用以下代码
<AuthorizeView>
<Authorized>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</Authorized>
<NotAuthorized>
<li class="nav-item px-3">
<NavLink class="nav-link" href="NonUser">
<span class="oi oi-list-rich" aria-hidden="true"></span>
Non Authorized Menu
</NavLink>
</li>
</NotAuthorized>
</AuthorizeView>
在这里，我们可以看到我们使用了 <Authorizeview> 标签，该标签用于检查用户是否已授权。在 < Authorizeview> 标签内，我们使用了 <Authorized> 标签来检查用户是否已授权并显示消息，同样，使用 <NotAuthorized> 标签来显示未授权用户的消息。在这里，我们根据 Authorized 和 NotAuthorized 显示和隐藏菜单。
关注点
首先，在您的 SQL Server 中创建一个 BlazorDB 示例数据库。在 appsettings.json 文件中，将 DefaultConnection 连接字符串更改为您的 SQL Server 连接。在这里，我们使用了我们需要的数据库来存储所有 ASP.NET identity 信息，通过这种方式，我们还可以创建其他需要的表并在数据库中建立关系，以便在需要的表中存储用户 ID。
历史
- 2019/06/19：BlazorAuth.zip