使用JWT认证的Microsoft Blazor Web API

我想分享一份关于如何在 Dotnet Core 2 Web API 项目中实现 JWT 身份验证系统的详细指南。该项目基于 Microsoft 的新框架 Blazor，但本指南同样适用于常规的 ASP.NET Core 2 Web API 项目。

前置条件

在开始之前，请确保满足以下条件：

• 您使用的是 Visual Studio（任意版本）v15.7 或更高版本。如果您使用其他工具，请至少熟悉 .NET 命令行。
• 您了解如何使用 NuGet 包管理器。
• 您知道 JWT（JSON Web Token）的基本概念及其用途。

环境配置

安装 Blazor 模板

首先，请参考 Blazor 入门文档 获取 Blazor 模板和最新的 Dotnet Core 2 SDK。

创建一个带有 ExpressRoute（ASP.NET Core 托管）的项目，并为其命名。在撰写本指南时，您只能选择“无身份验证”的模板。本文使用的是 Blazor 0.5 版本。

配置 JWT 身份验证

安装 NuGet 包

在服务器项目中安装以下 NuGet 包：

Microsoft.AspNetCore.Authentication.JwtBearer

安装完成后，您的 Server.csproj 文件应类似如下：

配置 Startup.cs

1. 在 Startup.cs 文件中，添加 IConfiguration 服务，以便使用 appsettings.json 文件。
2. 在项目根目录创建一个 appsettings.json 文件，并添加以下内容：

{
  "Jwt": {
    "Key": "your_secret_key",
    "Issuer": "your_server_project",
    "Audience": "your_client_project",
    "Expires": 30
  },
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\MSSQLLocalDB;Database=JwtAuthenticationTutorial;Trusted_Connection=True;MultipleActiveResultSets=True"
  }
}

• Key 是用于签名令牌的私钥。
• Issuer 是令牌的签发者。
• Audience 是令牌的接收者。
• Expires 是令牌的有效期（单位：分钟）。

3. 在 Startup.cs 文件的 ConfigureServices 方法中，添加 JWT 身份验证配置：

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = Configuration["Jwt:Issuer"],
            ValidAudience = Configuration["Jwt:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Jwt:Key"]))
        };
    });

创建控制器并保护 API

添加 [Authorize] 属性

在 SampleDataController 中添加 [Authorize] 属性，以保护 API：

[Authorize]
public class SampleDataController : ControllerBase
{
    // Your API methods
}

启动应用程序后，使用 Postman 或浏览器访问 http://localhost:57778/api/SampleData/WeatherForecasts。此时，您将收到 401 Unauthorized 错误，表示 API 已被保护。

创建令牌生成服务

1. 创建一个名为 IJwtTokenService 的接口：

public interface IJwtTokenService
{
    string BuildToken(string email);
}

2. 在 Services 文件夹中创建 JwtTokenService.cs 类，并实现接口：

public class JwtTokenService : IJwtTokenService
{
    private readonly IConfiguration _configuration;

    public JwtTokenService(IConfiguration configuration)
    {
        _configuration = configuration;
    }    public string BuildToken(string email)
    {
        // Token generation logic
    }
}

3. 在 Startup.cs 中注册该服务：

services.AddScoped();

创建令牌控制器

创建一个名为 TokenController 的 API 控制器，用于生成令牌：

[ApiController]
[Route("api/[controller]")]
public class TokenController : ControllerBase
{
    private readonly IJwtTokenService _tokenService;

    public TokenController(IJwtTokenService tokenService)
    {
        _tokenService = tokenService;
    }    [HttpPost]
    public IActionResult GenerateToken([FromBody] TokenViewModel model)
    {
        var token = _tokenService.BuildToken(model.Email);
        return Ok(new { Token = token });
    }
}

客户端集成

创建登录页面

在 Pages 文件夹中创建一个 Login.razor 页面，并实现以下功能：

1. 创建表单，包含电子邮件和密码字段。
2. 使用双向绑定（@bind）绑定表单字段。
3. 在提交按钮上添加事件处理程序，发送表单数据到服务器。

    
    
    Login


@code {
    private LoginModel loginModel = new LoginModel();    private async Task HandleLogin()
    {
        // Call API to get token
    }
}

保存令牌

在成功登录后，将令牌保存到浏览器的本地存储中，以便在后续请求中使用。

数据库集成

配置 Entity Framework Core

1. 创建一个 ApplicationDbContext 类，继承自 IdentityDbContext：

public class ApplicationDbContext : IdentityDbContext
{
    public ApplicationDbContext(DbContextOptions options)
        : base(options)
    {
    }
}

2. 在 Startup.cs 中配置数据库连接：

services.AddDbContext(options =>
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

3. 添加迁移并更新数据库：

dotnet ef migrations add InitialCreate
dotnet ef database update

总结

通过本教程，您已经成功实现了基于 JWT 的身份验证系统，并将其集成到 Blazor 应用中。JWT 是一种强大的身份验证方式，适用于各种场景。希望本指南对您有所帮助！

原文链接: https://quadrate-tech.web.app/blog/blazor-web-api-with-jwt-auth/