Wario's Blog

JavaScript | Node jwt鉴权

 2022/前端学习/JavaScript  2986

传统的基于Session认证

http协议本身无状态，所以无法判定是哪个用户发送的请求，所以为了解决这个问题只能在服务器上保存一份用户登录的信息，这份登录信息会在响应时传递给浏览器，告诉其保存为cookie，以便下次请求时发送给应用，这样应用就能识别请求来自哪个用户，这就是传统的基于Session认证。

这样会产生缺点：

  1. 保存在服务端，占用内存（存储空间）

    每个用户经过应用认证之后，应用都要在服务端做一次记录，以方便用户下次请求的鉴别，通常而言session都是保存在内存中，而随着认证用户的增多，服务端的开销会明显增大。

  2. 扩展性比较差

    用户认证之后，服务端做认证记录，如果认证的记录被保存在内存中的话，这意味着用户下次请求还必须要请求在这台服务器上,这样才能拿到授权的资源，这样在分布式的应用上，相应的限制了负载均衡器的能力。这也意味着限制了应用的扩展能力。

  3. 安全性比较差（CSRF）

    因为是基于cookie来进行用户识别的，cookie如果被截获，用户就会很容易受到跨站请求伪造的攻击。

基于Token的鉴权机制

基于token的鉴权机制类似于http协议也是无状态的，它不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了，这就为应用的扩展提供了便利。

具体流程如下：

  • 用户使用用户名密码来请求服务器
  • 服务器进行验证用户的信息
  • 服务器通过验证发送给用户一个token
  • 客户端存储token，并在每次请求时附送上这个token值
  • 服务端验证token值，并返回数据

这个token必须要在每次请求时传递给服务端，它应该保存在请求头里， 另外，服务端要支持CORS(跨来源资源共享)策略，一般在服务端这么做就可以了Access-Control-Allow-Origin: *。

所以这时候就有了对应的解决方案——jwt

jwt

JSON WEB TOKEN (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。

JWT的构成

JSON Web Token由三部分组成，它们之间用圆点(.)连接。这三部分分别是：

  • Header
  • Payload
  • Signature

因此，一个典型的JWT看起来是这个样子的：

xxxx.yyyy.zzzz

header典型的由两部分组成：token的类型（“JWT”）和算法名称（比如：HMAC SHA256或者RSA等等）。

例如：

1
2
3
4

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

然后，用Base64对这个JSON编码就得到JWT的第一部分

Payload

JWT的第二部分是payload，它包含声明（要求）。声明是关于实体(通常是用户)和其他数据的声明。

声明有三种类型: registered, public 和 private。

❕注意，不要在JWT的payload或header中放置敏感信息，除非它们是加密的。

  • Registered claims(标准中注册的声明) : 这里有一组预定义的声明，它们不是强制的，但是推荐。

    比如：iss (issuer), exp (expiration time), sub (subject), aud (audience)等。

    • iss: jwt签发者
    • sub: jwt所面向的用户
    • aud: 接收jwt的一方
    • exp: jwt的过期时间，这个过期时间必须要大于签发时间
    • nbf: 定义在什么时间之前，该jwt都是不可用的.
    • iat: jwt的签发时间
    • jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。

  • Public claims (公共的声明): 可以随意定义。

    公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息.但不建议添加敏感信息，因为该部分在客户端可解密.

  • Private claims(私有的声明): 用于在同意使用它们的各方之间共享信息，并且不是注册的或公开的声明。

    私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息

下面是一个例子：

1
2
3
4
5

{
    "sub": '1234567890',
    "name": 'john',
    "admin":true
}

对payload进行Base64编码就得到JWT的第二部分

Signature

JWT的第三部分是一个签证信息，这个签证信息由三部分组成：

  • header (base64后的)
  • payload (base64后的)
  • secret

为了得到签名部分，你必须有编码过的header、编码过的payload、一个秘钥，签名算法是header中指定的那个，然对它们签名即可。

这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后就构成JWT的第3部分。

例如：

1
2
3

var encodedString = base64UrlEncode(header) + '.' + base64UrlEncode(payload);
var signature = HMACSHA256(encodedString, 'secret');
// TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

签名是用于验证消息在传递过程中有没有被更改，并且，对于使用私钥签名的token，它还可以验证JWT的发送方是否为它所称的发送方。

❕注意：secret是保存在服务器端的，JWT的签发生成也是在服务器端的，secret就是用来进行JWT的签发和验证，所以，它就是你服务端的私钥，在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发JWT了。

JSON Web Tokens是如何工作的（Authorization）

在认证的时候，当用户用他们的凭证成功登录以后，一个JSON Web Token将会被返回。

此后，token就是用户凭证了，你必须非常小心以防止出现安全问题。

一般而言，你保存令牌的时候不应该超过你所需要它的时间。

无论何时用户想要访问受保护的路由或者资源的时候，用户代理（通常是浏览器）都应该带上JWT，典型的，通常放在Authorization header中，用Bearer schema。

header应该看起来是这样的：

Authorization: Bearer

服务器上的受保护的路由将会检查Authorization header中的JWT是否有效，如果有效，则用户可以访问受保护的资源。

如果JWT包含足够多的必需的数据，那么就可以减少对某些操作的数据库查询的需要，尽管可能并不总是如此。

如果token是在授权头（Authorization header）中发送的，那么跨源资源共享(CORS)将不会成为问题，因为它不使用cookie。

在Node.js中使用JWT

app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

//首先引入相关的依赖包
const jwt = require('jsonwebtoken');
const jwtSecret = 'Koa-Jwt-demo';
const koaJwt = require('koa-jwt');
// 登录校验
app.use(async (ctx, next) => {
    return next().catch(err => {
        if (err.status == 401) {
            ctx.status = 401;
            ctx.body = {
                code: 1,
                msg: '未登录'
            }
        } else {
            throw err;
        }
    })
})
// 哪些请求不需要校验，排除掉
app.use(koaJwt({ secret: jwtSecret }).unless({
    path:[/^\/login/, /^\/register/]
}));
// 支持登录
router.post('/login', koaBody(), async ctx => {
    console.log('login');
    let { username, password } = ctx.request.body;
    let loginUser = {
        username,
        password
    };
    if (username === 'admin' && password === '123456') {
        console.log(11111);
        let token = jwt.sign(loginUser, jwtSecret, {
            expiresIn: '1h'
        });
        ctx.set('Authorization', token);
        ctx.body = {
            code: 0,
            data: token,
            msg: '登录成功'
        }
    } else {
        ctx.body = {
            code: 1,
            msg: '登录失败'
        }
    }
})

❕注意：这里的toke是使用jwt包下的sign方法生成的

login.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

button.addEventListener('click', function () {
    $.ajax({
        url: 'http://localhost:8888/login',
        type: 'post',
        data: $('#login_form').serialize(),
        dataType: 'json',
        success(res, status, xhr) {
            if (res.code == 0) {
                // 存在跨域不能使用下面的这种方式获取token（响应头的方式）
                // let token = xhr.getResponseHeader('Authorization');
                // console.log('xhr', xhr);
                // console.log('token',token);
                // console.log('token', res.data);
                localStorage.setItem('token', res.data);
                // window.location = 'index.html';
            } else {
                alert(res.msg)
            }
        },
        error() {
            alert('出错了');
        }
    })
})

注意：let token = xhr.getResponseHeader('Authorization');存在跨域不能这里不能使用这种方式获取token

这里存在跨域就违反了w3c协议，如果是同源就可以获取到结果，具体可以参考一下的文章

相关文章：