文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

前端Token 组成及生成方法示例详解

2023-05-16 20:48

关注

正文

平常前端项目中,我们通常使用 token 来进行身份验证 —— 客户登录成功,接口就会返回一个 token,之后前端每次发送请求就在请求头中添加个值为 token 的 authorization 字段来表明身份。至于 token 是怎么生成的?那一长串的字母数字到底有什么含义?或许一些身为前端的小伙伴们长久以来并不甚了解。那么本文,就来对 token 的组成及生成方法做个基本的介绍吧。

生成 token

在使用 koa 搭建的后端项目中,可以安装 jsonwebtoken 这个库来生成 token:

npm i jsonwebtoken

之后引入 jwt,通过 jwt.sign() 即可得到 token,传入的第一个参数是 token 携带的信息,第二个参数是用于数字签名的密钥,第三个参数可以传入一些配置,比如过期时间 expiresIn,单位为秒:

// 代码片段一,省略部分代码
const jwt = require('jsonwebtoken')
loginRouter.get('/login', (ctx, next) => {
  const token = jwt.sign({ name: 'Jay' }, 'aaabbbccc', { expiresIn: 60 * 60 })
  ctx.body = {
    msg: '登录成功',
    token
  }
})

使用浏览器发送请求,可以看到生成的 token:

token 的组成

我们可以将生成的 token 复制粘贴到 jwt 官网的 debugger 工具里进行解码:

可以发现 token 使用 . 分割成了 3 部分:

1. Header

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 这部分,为 Base64 编码后的结果,其中有两个属性:

所以这部分结果,如果保持代码片段一不变,浏览器每次重新请求得到的结果也都不会变化。

2. Payload

token 携带的数据,除了我们在代码片段一中传入的 name 信息以及过期时间 exp ,还有默认携带的 iat(issued at),为 token 的签发时间。Payload 部分的数据同样是经过 Base64 编码的。

3. Signature

签名部分,通过 HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload),secret) 得到,即将 Header 和 Payload 的 Base64 编码结果与数字签名的密钥 secret 结合,通过 HS256 算法生成,这部份的结果,浏览器每次重新请求时都会重新生成。

验证 token

假定前端是通过 Bearer Token 类型向服务器传递的 token,实际上就是将 token 赋值给请求头的 authorization 属性。那么后端在验证时,可以通过 ctx.headers.authorization 拿到带有 Bearer 前缀(注意 Bearer 后有个空格)的 token 。之后再将获取的 token 以及代码片段一生成 token 时传入的密钥一起传给 jwt.verify(),如果验证成功,则 res 可以得到 Payload 数据;如果验证失败,则会报错,可用 try catch 捕获 :

// 代码片段二
userRouter.get('/center', (ctx, next) => {
  const authorization = ctx.headers.authorization
  const token = authorization.replace('Bearer ', '')
  try {
    const res = jwt.verify(token, 'aaabbbccc') 
    console.log('res', res) // res { name: 'Jay', iat: 1679814009, exp: 1679817609 }
    ctx.body = '验证成功'
  } catch (error) {
    ctx.body = '验证失败'
  }
})

采用非对称加密算法

在代码片段一中使用 jwt 生成 token 时,默认采用的加密算法是 HS256,安全性不高,所以一般公司里的项目采用的都是非对称加密算法,比如 RSA 算法,使用私钥来颁发 token,使用公钥来验证 token,关于加密算法这部分知识,若想了解更多,可移步 《前端加密》。

生成公私密钥

在 windows 系统下,公私密钥的生成可以去下载安装 OpenSSL, 然后通过系统自带的命令行工具使用 openssl 生成。也可以直接通过 git 的 bash 工具(集成了 OpenSSL)来生成 。首先生成私钥: 进入到要保存密钥的目录下,输入 openssl 按下回车:

接着就可以输入 genrsa -out private.key 1024 来生成 rsa 算法的私钥:

生成的私钥如下:

有了私钥,再使用 rsa -in private.key -pubout -out public.key 生成与之对应的公钥:

公钥如下:

修改之前的代码

有了一对公私密钥后,生成 token 时我们就可以将代码片段一稍加修改,将传入的密钥改为私钥,并在配置对象中指定要使用的算法为 RS256

const token = jwt.sign({ name: 'Jay' }, privateKey, {
  expiresIn: 60 * 60,
  algorithm: 'RS256'
})

验证 token 时,也需将代码片段二中用公钥替换原本的密钥,然后添加算法配置,只不过这里 algorithm 的值为数组,因为在验证时是可以通过多种算法依次尝试的:

const res = jwt.verify(token, publicKey, {
  algorithm: ['RS256']
})

privateKeypublicKey 可以通过 fs 模块获取:

const fs = require('fs')
const privateKey = fs.readFileSync('./src/keys/private.key')
const publicKey = fs.readFileSync('./src/keys/public.key')

以上就是前端Token 组成及生成方法示例详解的详细内容,更多关于前端Token组成生成方法的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯