JWT 跨域身份证验证解决方案

306 阅读4分钟

JSon Web Tokens

目前最流行的跨域身份证验证解决方案

一、解决问题 跨域认证的问题

session不支持分布式架构,无法支持横向扩展,只能通过数据库来共享,如果持久层失败会出现认证失败

优点

服务器不保存任何的会话,即服务器无状态,使其更容易扩展

二、JWT 的原理

JWT 的原理是,服务器认证以后,生成一个 JSON 对象,发回给用户,就像下面这样。

{
  "姓名": "李四",
  "角色": "管理员",
  "到期时间": "2019年8月13日0点0分"
}

用户与服务端通信的时候,都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用户篡改数据,服务器在生成这个对象的时候,会加上签名.

服务器就不保存任何 session 数据了,也就是说,服务器变成无状态了,从而比较容易实现扩展。

三、jwt的数据结构

JWT包含了使用.分隔的三部分

  • 1.Header头部
//是一个Json对象 
//alg属性表示签名的算法默认是 HMAC SHA256(写成 HS256)
//typ属性表示这个令牌(token)的类型(type),JWT 令牌统一写为JWT
{"alg":"HS256","typ":"JWT"}
  • 2.Payload负载、载荷

JWT规定了7个官方字段

iss (issuer):签发人
exp (expiration time):过期时间
sub (subject):主题
aud (audience):受众
nbf (Not Before):生效时间
iat (Issued At):签发时间
jti (JWT ID):编号
  • 3.Signature签名

对前两部分的签名,防止数据篡改.

首先,需要指定一个密钥(secret)。这个密钥只有服务器才知道,不能泄露给用户。然后,使用 Header 里面指定的签名算法(默认是 HMAC SHA256),按照下面的公式产生签名。

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

算出签名以后,把 Header、Payload、Signature 三个部分拼成一个字符串,每个部分之间用"点"(.)分隔,就可以返回给用户

3.4 Base64URL

JWT 作为一个令牌(token),有些场合可能会放到 URL(比如 api.example.com/?token=xxx)。Base64 有三个字符+、/和=,在 URL 里面有特殊含义,所以要被替换掉:=被省略、+替换成-,/替换成_ 。这就是 Base64URL 算法

四、JWT 的使用方式

客户端收到服务器返回的 JWT,可以储存在 Cookie 里面,也可以储存在 localStorage。

此后,客户端每次与服务器通信,都要带上这个 JWT。你可以把它放在 Cookie 里面自动发送,但是这样不能跨域,所以更好的做法是放在 HTTP 请求的头信息Authorization字段里面。

Authorization: Bearer <token>

另一种做法是,跨域的时候,JWT 就放在 POST 请求的数据体里面

五、JWT 的几个特点

(1)JWT 默认是不加密,但也是可以加密的。生成原始 Token 以后,可以用密钥再加密一次。

(2)JWT 不加密的情况下,不能将秘密数据写入 JWT。

(3)JWT 不仅可以用于认证,也可以用于交换信息。有效使用 JWT,可以降低服务器查询数据库的次数。

(4)JWT 的最大缺点是,由于服务器不保存 session 状态,因此无法在使用过程中废止某个 token,或者更改 token 的权限。也就是说,一旦 JWT 签发了,在到期之前就会始终有效,除非服务器部署额外的逻辑。

(5)JWT 本身包含了认证信息,一旦泄露,任何人都可以获得该令牌的所有权限。为了减少盗用,JWT 的有效期应该设置得比较短。对于一些比较重要的权限,使用时应该再次对用户进行认证。

(6)为了减少盗用,JWT 不应该使用 HTTP 协议明码传输,要使用 HTTPS 协议传输。

实际应用

const Koa = require('koa')
const Router = require('koa-router')
const session = require('koa-session')
const static = require('koa-static')
const bodyParser = require('koa-bodyparser') //处理post请求时,koa无法解析http请求体中的数据,这时我们需要引入另外一个模块叫做koa-bodyparser
const path = require('path');
const jwt = require('jwt-simple')
let app = new Koa();
let router = new Router()
let serect ='jw'
// jwt1是自己封装的方法
// const crypto = require('crypto')
// let jwt1 = {
//     sign(content){
//         let r =  crypto.createHmac('sha256',serect).update(content).digest('base64')
//         return this.base64urlEscape((r))
//     },
//     //转化
//     toBase64Url(content,serect){
//         return this.base64urlEscape( Buffer.from(JSON.stringify(content)).toString('base64'))
  
//     },
//     base64urlEscape(str){
//         return str.replace(/\+/g,'-').replace(/\//g,'_').replace(/=/g,'');
//     },
//     base64urlUnescape(str){
//         str +=new Array(5-str.length % 4).join('=')
//         return str.replace(/\-/g,'+').replace(/_/g,'/');
//     },
//     //加密
//     encode(payload,serect){
//         let header = {typ:'JWT', alg:'HS256'}
//         header = this.toBase64Url(header,serect)
//         let content = this.toBase64Url(payload,serect)
//         let sign = this.sign(header+'.'+content)
//         return header+'.'+content+'.'+sign
//     },
//     decode(token,serect){
//         let [header,content,sign] = token.split('.')
//         let newSign =this.sign([header,content].join('.'),serect)
//         if(sign === newSign){
//             return Buffer.from(this.base64urlUnescape(content),'base64').toString()
//         } else{
//            throw new Error('被篡改了')
//         }
//     }
// }
// jwt1.encode({username:'123'},serect)


router.post('/login',async(ctx)=>{
    let {username,password} = ctx.request.body
    ctx.body = jwt.encode({username:username},serect) //eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6IjEyMyJ9.1iPot4IPmnuWYa2pt1_HgQD00GJkJWrkxIHgsFzn33k
    
})

router.get('/validate',async(ctx)=>{
    let token = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6IjEyMyJ9.1iPot4IPmnuWYa2pt1_HgQD00GJkJWrkxIHgsFzn33k`;
    try {
        let r = jwt.decode(token,serect) //签名ok 说明有限权 一般放置用户的唯一标识
       ctx.body =r;
    } catch (error) {
        throw new Error('验证失败')
    }
})
app.use(bodyParser())
app.use(static(__dirname))
app.use(router.routes()) //可以让router替你接管url和处理函数之间的映射,而不需要你关心真实的访问路径如何
    .use(router.allowedMethods())
app.listen(3000);

前端发送请求

<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    axios.post('/login',{username:'123',password:456}).then(res=>{
        console.los(res.data)
    })
</script>