基于.NetCore开发博客项目 StarBlog - (27) 使用JWT保护接口

基于,netcore,开发,博客,项目,starblog,使用,jwt,保护,接口 · 浏览次数 : 1038

小编点评

**生成内容时需要带简单的排版** **1. 概述** * 概述项目的目的和功能 * 概述开发过程中的关键步骤 **2. 模型设计** * 模型的结构和逻辑 * 模型的属性和值 * 模型的接口 **3. markdown博客批量导入** * 如何导入博客的markdown文件 * 如何定义博客文章的格式 **4. Razor页面动态编译** * 如何使用Razor动态编译生成页面 * 如何将页面动态渲染到页面中 **5. 静图片优化** * 如何优化静态图片的尺寸 * 如何使用静态图片替代动态图片 **6. 动态数据展示** * 如何展示动态数据，如用户统计 * 如何使用动态数据更新页面 **7. 后面开发** * 如何实现统一接口的数据返回格式 * 如何使用JWT保护接口文档 * 如何集成Swagger接口文档

正文

前言

这是StarBlog系列在2023年的第二篇更新😂

这几个月都在忙，更新变得很不勤快，但是拖着不更新我的心里更慌，很久没写，要开头就变得很难😑

说回正题，之前的文章里，我们已经把博客关键的接口都开发完成了，但还少了一个最关键的「认证授权」，少了这东西，网站就跟筛子一样，谁都可以来添加和删除数据，乱套了~

关于「认证授权」的知识，会比较复杂，要学习这块的话，建议分几步：

基础概念
AspNetCore 的 Identity 框架
~~其他框架，如 IdentityServer~~

关于基础概念可以看看我之前写的这篇: Asp-Net-Core学习笔记：身份认证入门

PS：Identity 框架的还没写好😂

为了避免当复读机，本文就不涉及太多概念的东西了，建议先看完上面那篇再来开始使用JWT~

JWT

前面介绍文章的CRUD接口时，涉及到修改的接口，都加了 [Authorize] 特性，表示需要登录才能访问，本文就以最简单的方式来实现这个登录认证功能。

在 AspNetCore 中，使用 JWT 的工作流程大概如下：

JWT就是一个Base64编码的字符串，分为 head/payload/sign 三个部分（sign签名是使用特定秘钥生成的，别人无法伪造，所以就算修改了payload部分的信息，后端校验也不会通过）
用户登录时，后端可以在里面存一些类似用户ID、邮箱、手机号之类的数据，然后把这串东西返回给前端存储，注意不要把不能被客户端知道的信息放在里面~~（也可以对payload进行加密）~~
之后调用需要登录的接口时，都要带上这个JWT（一般是放在 HTTP Header 里面）
这串东西只有后端能解析，后端拿到之后就知道用户的身份了

JWT 还有其他一些特性，比如说是没有状态的，这就很符合我们用的 RESTFul 接口了，不像传统使用 session 和 cookies 那样，原版 JWT 只要签发之后，在有效期结束前就不能取消，用户也没法注销，为了避免泄露 JWT token 导致安全问题，一般过期时间都设置得比较短。（这个不能取消的问题，也是可以通过曲线救国解决的，不过不在本文的讨论范围哈）

初步接触 JWT

OK，说了那么多，还是开始来写代码吧

生成 JWT

要生成的话很简单，不需要什么额外的配置，几行代码就搞定了

public LoginToken GenerateLoginToken(User user) {
  var claims = new List<Claim> {
    new(JwtRegisteredClaimNames.Sub, user.Id), // User.Identity.Name
    new(JwtRegisteredClaimNames.GivenName, user.Name),
    new(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()), // JWT ID
  };
  var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("jwt key"));
  var signCredential = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
  var jwtToken = new JwtSecurityToken(
    issuer: "jwt issuer 签发者",
    audience: "jwt audience 接受者",
    claims: claims,
    expires: DateTime.Now.AddDays(7),
    signingCredentials: signCredential);

  return new LoginToken {
    Token = new JwtSecurityTokenHandler().WriteToken(jwtToken),
    Expiration = TimeZoneInfo.ConvertTimeFromUtc(jwtToken.ValidTo, TimeZoneInfo.Local)
  };
}

最开始的 claims 就是前面说的后端往JWT里面存的数据

"The set of claims associated with a given entity can be thought of as a key. The particular claims define the shape of that key; much like a physical key is used to open a lock in a door. In this way, claims are used to gain access to resources." from MSDN

Claim 的构造方法可以接收 key 和 value 参数，都是字符串

对于 key ，.Net 提供了一些常量，在 JwtRegisteredClaimNames 和 ClaimTypes 类里边，这俩的区别就是后者是老的，一般在Windows体系下使用，比如说同样是 Name 这个 key

ClaimTypes.Name = "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name"
JwtRegisteredClaimNames.Name = "name"

我们是在 JWT 里面设置 Claim，用 JwtRegisteredClaimNames 就好了

参考：https://stackoverflow.com/questions/50012155/jwt-claim-names

从 JWT 中读取信息

也就是读取放在里面的各个 Claim

在正确配置 Authentication 服务和 JwtBearer 之后，已登录的客户端请求过来，后端可以在 Controller 里面拿到 JWT 数据

像这样

var name = HttpContext.User.FindFirst(JwtRegisteredClaimNames.Name)?.Value;

还可以用 System.Security.Claims.PrincipalExtensions 的扩展方法 FindFirstValue 直接拿到字符串值。

吐槽：如果对应的 Claim 不存在的话，这个扩展方法返回的值是 null，但不知道为啥，他源码用的是 string 作为返回值类型，而不是 string? ，真是令人遗憾

使用 JWT 保护接口

了解 JWT 的使用方式之后，终于可以把 JWT 应用到博客项目中了~

配置JWT参数

为了避免硬编码，我们把 JWT 需要的 Issuer, Audience, Key 三个参数写在配置里面

形式如下

"Auth": {
  "Jwt": {
    "Issuer": "starblog",
    "Audience": "starblog-admin-ui",
    "Key": "F2REaFzQ6xA9k77EUDLf9EnjK5H2wUot"
  }
}

接着需要定义一个类来方便映射配置。

在 StarBlog.Web/Models/Config 下添加 Auth.cs

public class Auth {
  public Jwt Jwt { get; set; }
}

public class Jwt {
  public string Issuer { get; set; }
  public string Audience { get; set; }
  public string Key { get; set; }
}

注册一下

builder.Services.Configure<Auth>(configuration.GetSection(nameof(Auth)));

配置 Authentication 服务

这部分代码比较多，写成扩展方法，避免 Program.cs 文件代码太多

添加 StarBlog.Web/Extensions/ConfigureAuth.cs 文件

public static class ConfigureAuth {
  public static void AddAuth(this IServiceCollection services, IConfiguration configuration) {
    services.AddScoped<AuthService>();
    services.AddAuthentication(options => {
      options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
      options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    })
      .AddJwtBearer(options => {
        var authSetting = configuration.GetSection(nameof(Auth)).Get<Auth>();
        options.TokenValidationParameters = new TokenValidationParameters {
          ValidateAudience = true,
          ValidateLifetime = true,
          ValidateIssuer = true,
          ValidateIssuerSigningKey = true,
          ValidIssuer = authSetting.Jwt.Issuer,
          ValidAudience = authSetting.Jwt.Audience,
          IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(authSetting.Jwt.Key)),
          ClockSkew = TimeSpan.Zero
        };
      });
  }
}

然后在 Program.cs 里，需要使用这个扩展方法来注册服务

builder.Services.AddAuth(builder.Configuration);

还得配置一下中间件，这个顺序很重要，需要使用身份认证保护的接口或资源，必须放到这俩 Auth... 中间件的后面。

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
// ...
app.MapControllerRoute(...);
app.Run();

封装登录逻辑

还是那句话，为了方便使用balabala……

新建 StarBlog.Web/Services/AuthService.cs 文件

public class AuthService {
  private readonly Auth _auth;
  private readonly IBaseRepository<User> _userRepo;

  public AuthService(IOptions<Auth> options, IBaseRepository<User> userRepo) {
    _auth = options.Value;
    _userRepo = userRepo;
  }

  public LoginToken GenerateLoginToken(User user) {
    var claims = new List<Claim> {
      new(JwtRegisteredClaimNames.Sub, user.Id), // User.Identity.Name
      new(JwtRegisteredClaimNames.GivenName, user.Name),
      new(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()), // JWT ID
    };
    var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_auth.Jwt.Key));
    var signCredential = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
    var jwtToken = new JwtSecurityToken(
      issuer: _auth.Jwt.Issuer,
      audience: _auth.Jwt.Audience,
      claims: claims,
      expires: DateTime.Now.AddDays(7),
      signingCredentials: signCredential);

    return new LoginToken {
      Token = new JwtSecurityTokenHandler().WriteToken(jwtToken),
      Expiration = TimeZoneInfo.ConvertTimeFromUtc(jwtToken.ValidTo, TimeZoneInfo.Local)
    };
  }
}

因为篇幅关系，只把关键的生成 JWT 代码贴出来，还有一些获取用户信息啥的代码，还不是最终版本，接下来随时会修改，而且也比较简单，就没有放出来~

再来写个登录接口

添加 StarBlog.Web/Apis/AuthController.cs 文件

[ApiController]
[Route("Api/[controller]")]
[ApiExplorerSettings(GroupName = ApiGroups.Auth)]
public class AuthController : ControllerBase {
  private readonly AuthService _authService;

  public AuthController(AuthService authService) {
    _authService = authService;
  }

  /// <summary>
  /// 登录
  /// </summary>
  [HttpPost]
  [ProducesResponseType(typeof(ApiResponse<LoginToken>), StatusCodes.Status200OK)]
  public async Task<ApiResponse> Login(LoginUser loginUser) {
    var user = await _authService.GetUserByName(loginUser.Username);
    if (user == null) return ApiResponse.Unauthorized("用户名不存在");
    if (loginUser.Password != user.Password) return ApiResponse.Unauthorized("用户名或密码错误");
    return ApiResponse.Ok(_authService.GenerateLoginToken(user));
  }
}

之后我们请求这个接口，如果用户名和密码正确的话，就可以拿到 JWT token 和过期时间

{
  "statusCode": 200,
  "successful": true,
  "message": "Ok",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR123I6IkpXVCJ9.eyJ1c2VybmFtZSI6ImRlYWxpIiwibmFC1kYJ9.DaJEmBAVdXks8MOedVee4xxrB-RvUSg2wIJGc30HGkk",
    "expiration": "2023-05-04T22:29:04+08:00"
  },
  "errorData": null
}

接下来，请求添加了 [Authorize] 的接口时，需要在 HTTP header 里面加上：

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR123I6IkpXVCJ9.eyJ1c2VybmFtZSI6ImRlYWxpIiwibmFC1kYJ9.DaJEmBAVdXks8MOedVee4xxrB-RvUSg2wIJGc30HGkk

配置swagger支持

加了 [Authorize] 之后，在swagger里就没法调试接口了，得用 postman 之类的工具，添加 HTTP header

不过swagger这么好用的工具肯定不会那么蠢，它是可以配置支持 JWT 的

添加 nuget 包 Swashbuckle.AspNetCore.Filters

然后编辑 StarBlog.Web/Extensions/ConfigureSwagger.cs 来配置一下（上一篇关于swagger的还没忘记吧？）

在 AddSwaggerGen 里面，添加配置代码

var security = new OpenApiSecurityScheme {
  Description = "JWT模式授权，请输入 \"Bearer {Token}\" 进行身份验证",
  Name = "Authorization",
  In = ParameterLocation.Header,
  Type = SecuritySchemeType.ApiKey
};
options.AddSecurityDefinition("oauth2", security);
options.AddSecurityRequirement(new OpenApiSecurityRequirement {{security, new List<string>()}});
options.OperationFilter<AddResponseHeadersFilter>();
options.OperationFilter<AppendAuthorizeToSummaryOperationFilter>();
options.OperationFilter<SecurityRequirementsOperationFilter>();

搞定。这样swagger页面右上角就多了个锁头图标，点击就可以输入 JWT token

不过有一点不方便的是，每个接口分组都要输入一次，切换了就得重新输入了…

但至少不用postman了~