JWT前端加密过程

时间:2024-05-19 13:15:38

JWT是什么,概念什么的就不说了(百度一下你就知道),就从组成和加密过程说起

1.JWT的组成

组成一:

header:{
  "alg": "HS256",
  "typ": "JWT"
}

组成二:

payload:

{

  "iss": "ninghao.net",

  "exp": "1438955445",

  "name": "wanghao",

  "admin": true

}

组成三:

sign=base64( HMAC-SHA256(  base64(header)+"."+base64(payload) , secret ) );

2.加密过程及细节

首先需要对header和payload分别进行base64加密,首先base64有原生的,但是此处的base64需要再包装一层。

因为jwt可以放到url作为参数传参,所以对于+,/,=做了处理,+改为-,/改为_,=替换掉空字符串

然后将两个加密后的用 . 连接接着用secret进行HMAC-SHA256加密成hash,再用base64进行编码一次(此处的base64和上面的不同需要CryptoJS.enc.Base64.stringify加密因为此处需要编码的类型是hash(含字节数组)类型)

最后将三个编码的部分用.连接成三个部分。

3.小程序的加密有点难搞,因为目前不能完全兼容npm模式,笔者一开始准备采用一套npm流程,然后require一下接着用开放封装好的加密。然而最后buffer不能构建,buffer为node库自带的lib

接着自己去网上找了下几个JS ,crypto-js.js(包含各种加密算法HMAC-SHA256) ,BASE64.JS,enc-base64.js

加密截图如下

JWT前端加密过程

 

最后细心的小伙伴会发现,HMAC-SHA256和对于hash编码的base64一样都导入enc-base64.js。

那是因为再enc-base64.js里面引入了一句 import CryptoJS from './crypto.js'。

如果网上没找到相应的JS可以评论下留言!!!