学习ASP.NET Core Blazor编程系列二十七——JWT登录（1）

╰+攻爆jí腚メ 2024-03-16 14:14 14阅读 0赞

## 十、JWT介绍 ##

JWT只是缩写，全称则是JSON Web Tokens，是目前流行的跨域认证解决方案，是基于开放标准RFC7519，提供一种身份认证与信息交换的解决方案，是一种基于JSON的用于在网络上声明某种主张的令牌（token）。

由于http的连接是状态的特性，server端和client是不会记住每个请求是谁发过来的，也不会知道当前发送请求的用户是否已经对过身份认证，如果用户的每一个请求，都要与数据库通讯进行身份认证，会增加server和数据库的成本。因此，之前的Web应用一般都会用session或 cookie的方式解決。

通俗地说，JWT的本质就是一个字符串，它是将用户信息保存到一个Json字符串中，然后进行编码后得到一个JWT token，并且这个JWT token带有签名信息，接收后可以校验是否被篡改，所以可以用于在各方之间安全地将信息作为Json对象传输。JWT的认证流程如下：

![27b20cd6990f499aafeffbd243dd5f1a.png][]

1.  用户第一次登录时，后端核对用户名和密码，进行身份认证。

2. 身份认证通过后，生成jwt token，并将user的信息，包括账号、登录时间等一些不敏感，不重要的信息记录在jwt 中的Payload，将其与JWT Header分别进行Base64编码拼接后签名，形成一个JWT Token，形成的JWT Token就是一个如同lll.zzz.xxx的字符串。

1.  后端将jwt token字符串作为登录成功的结果返回给client端，client端将返回结果记录在storage中。
2.  用户再次发起请求时，每次请求都要在请求头中携带这个jwt token，server端在收到这个token之后，进行验证，验证通过，从jwt中读取用户信息，并执行后续操作；验证不能过，返回错误信息。
3.  退出登录时删除保存的JWT Token即可。

### JWT 结构 ###

一个token分为3部分：头部(header)、载荷(payload)、签名(signature)

1.头部(header)，JWT头是一个描述JWT元数据的JSON对象，alg属性表示签名使用的算法，默认为HMAC SHA256（写为HS256）；typ属性表示令牌的类型，JWT令牌统一写为JWT。最后，使用Base64 URL算法将上述JSON对象转换为字符串保存

2.载荷(payload)，有效载荷部分，是JWT的主体内容部分，是承载消息具体内容的地方，也是一个JSON对象，包含需要传递的数据，需要使用Base64编码。 JWT指定七个默认字段供选择

![f3ac9cc13a3c3a3bbf4438a9b2e456cb.png][]

iss(issuer): jwt签发者  
sub(subject): jwt所面向的用户  
aud(audience): 接收jwt的一方, 受众  
exp(expiration time): jwt的过期时间，这个过期时间必须要大于签发时间  
nbf(Not Before): 生效时间，定义在什么时间之前.  
iat(Issued At): jwt的签发时间  
jti(JWT ID): jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。

这些预定义的字段并不要求强制使用。除以上默认字段外，我们还可以自定义私有字段，一般会把包含用户信息的数据放到payload中，如下例：

![ece45a887d4c537d45737c5dd3bf964f.png][]

3.签名(signature)，签名哈希部分是对上面两部分数据签名，需要使用base64编码后的header和payload数据，通过指定的算法生成哈希，以确保数据不会被篡改。首先，需要指定一个密钥（secret）。该密码仅仅为保存在服务器中，并且不能向用户公开。然后，使用header中指定的签名算法（默认情况下为HMAC SHA256）根据以下公式生成签名

在计算出签名哈希后，JWT头，有效载荷和签名哈希的三个部分组合成一个字符串，每个部分用.分隔，就构成整个JWT对象

header和payload可以直接利用base64解码出原文，从header中获取哈希签名的算法，从payload中获取有效数据

signature由于使用了不可逆的加密算法，无法解码出原文，它的作用是校验token有没有被篡改。服务端获取header中的加密算法之后，利用该算法加上secretKey对header、payload进行加密，比对加密后的数据和客户端发送过来的是否一致。

注意：secretKey只能保存在服务端，而且对于不同的加密算法其含义有所不同，一般对于MD5类型的摘要加密算法，secretKey实际上代表的是盐值

关于jwt更多信息，可参考[jwt.io][]的说明。

## 十一、创建JWT服务 ##

1.  在Visual Studio 2022的解决方案资源管理器中，使用鼠标右键点击“依赖项”，从弹出菜单中选择“管理NuGet程度包”菜单项，或是“工具—》NuGet包管理器器—>管理解决方案的NuGet程序包”菜单。如下图。

![5e1b8aea794fffad2cbfa997984742a0.png][]

2. 在搜索输入框中输入“JWT”，然后安装JWT程序包，如下图。

![dd2c9a708b8d48dee5bf96c9366967a8.png][]

3.在Visual Studio 2022中的NuGet 包管理器控制台窗口中安装JWTBearer，由于我这个项目是基于NET6框架的，所以安装NET6下的最新版本 6.0.11。在PMC中，如下图。输入以下命令：

Install-Package Microsoft.AspNetCore.Authentication.JwtBearer -Version 6.0.11

4. 在Visual Studio 2022中打开appsettings.json文件，在此配置文件中添加JWT的配置，参考代码如下，注意SecretKey不能设置成太短的纯数字，不然要报错。

![125f737103c3e294f886d561ac3062aa.gif][]

{
      "Logging": {
        "LogLevel": {
          "Default": "Information",
          "Microsoft.AspNetCore": "Warning"
        }
      },
    
      "ConnectionStrings": {
        "BookContext": "Server=.;Database=LeaseBooks;Trusted_Connection=True;MultipleActiveResultSets=true"
      },
    
      "AllowedHosts": "*",
      "Authentication": {
        "SecretKey": "Blazor!SecKey@webdemo@vvip.GHTUPAVX",
    
        "Issuer": "JWT.Reg22user@Isskl35",
    
        "Expires": 10,
        "Audience": "login.Blazor.audit"
      }
    }

![94eb81c5ed48ec1d9860ecdd5a376fb4.gif][]

SecretKey，密匙

Issuer，注册人

Audience,访问人

Expires,到期时间

[27b20cd6990f499aafeffbd243dd5f1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3c609a54ab974b67ab2f0706a76e4d56.png
[f3ac9cc13a3c3a3bbf4438a9b2e456cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/430aff911e314f0299fe99a484f709c1.png
[ece45a887d4c537d45737c5dd3bf964f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9842c769b3444b4a8c56707a647be878.png
[jwt.io]: https://jwt.io/introduction/
[5e1b8aea794fffad2cbfa997984742a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b456cc5bc4a04ba4baffa6c3e16ccc50.png
[dd2c9a708b8d48dee5bf96c9366967a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0cd00e421a0542b5a8dec24f85497f8d.png
[125f737103c3e294f886d561ac3062aa.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/070d86c50fd947a98cbfa388068585d9.png
[94eb81c5ed48ec1d9860ecdd5a376fb4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7b6ead68ae1b43cab37dc39372869edc.png