详解JSON Web Token 入门教程


Posted in Javascript onJuly 30, 2018

JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。

详解JSON Web Token 入门教程

一、跨域认证的问题

互联网服务离不开用户认证。一般流程是下面这样。

1、用户向服务器发送用户名和密码。

2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、登录时间等等。

3、服务器向用户返回一个 session_id,写入用户的 Cookie。

4、用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器。

5、服务器收到 session_id,找到前期保存的数据,由此得知用户的身份。

这种模式的问题在于,扩展性(scaling)不好。单机当然没有问题,如果是服务器集群,或者是跨域的服务导向架构,就要求 session 数据共享,每台服务器都能够读取 session。

举例来说,A 网站和 B 网站是同一家公司的关联服务。现在要求,用户只要在其中一个网站登录,再访问另一个网站就会自动登录,请问怎么实现?

一种解决方案是 session 数据持久化,写入数据库或别的持久层。各种服务收到请求后,都向持久层请求数据。这种方案的优点是架构清晰,缺点是工程量比较大。另外,持久层万一挂了,就会单点失败。

另一种方案是服务器索性不保存 session 数据了,所有数据都保存在客户端,每次请求都发回服务器。JWT 就是这种方案的一个代表。

二、JWT 的原理

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

{
 "姓名": "张三",
 "角色": "管理员",
 "到期时间": "2018年7月1日0点0分"
}

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

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

三、JWT 的数据结构

实际的 JWT 大概就像下面这样。

详解JSON Web Token 入门教程

它是一个很长的字符串,中间用点(.)分隔成三个部分。注意,JWT 内部是没有换行的,这里只是为了便于展示,将它写成了几行。

JWT 的三个部分依次如下。

  • Header(头部)
  • Payload(负载)
  • Signature(签名)

写成一行,就是下面的样子。

Header.Payload.Signature

详解JSON Web Token 入门教程

下面依次介绍这三个部分。

3.1 Header

Header 部分是一个 JSON 对象,描述 JWT 的元数据,通常是下面的样子。

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

上面代码中,alg属性表示签名的算法(algorithm),默认是 HMAC SHA256(写成 HS256);typ属性表示这个令牌(token)的类型(type),JWT 令牌统一写为JWT。

最后,将上面的 JSON 对象使用 Base64URL 算法(详见后文)转成字符串。

3.2 Payload

Payload 部分也是一个 JSON 对象,用来存放实际需要传递的数据。JWT 规定了7个官方字段,供选用。

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

除了官方字段,你还可以在这个部分定义私有字段,下面就是一个例子。

{
 "sub": "1234567890",
 "name": "John Doe",
 "admin": true
}

注意,JWT 默认是不加密的,任何人都可以读到,所以不要把秘密信息放在这个部分。

这个 JSON 对象也要使用 Base64URL 算法转成字符串。

3.3 Signature

Signature 部分是对前两部分的签名,防止数据篡改。

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

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

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

3.4 Base64URL

前面提到,Header 和 Payload 串型化的算法是 Base64URL。这个算法跟 Base64 算法基本类似,但有一些小的不同。

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 协议传输。

六、参考链接

Introduction to JSON Web Tokens, by Auth0
Sessionless Authentication using JWTs (with Node + Express + Passport JS), by Bryan Manuele
Learn how to use JSON Web Tokens, by dwyl

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
JS中Promise函数then的奥秘探究
Jul 30 #Javascript
浅析java线程中断的办法
Jul 29 #Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 #Javascript
如何在js代码中消灭for循环实例详解
Jul 29 #Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 #Javascript
vue权限路由实现的方法示例总结
Jul 29 #Javascript
JS高级技巧(简洁版)
Jul 29 #Javascript
You might like
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
python求素数示例分享
2014/02/16 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python 处理图片像素点的实例
2019/01/08 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
在Python中表示一个对象的方法
2019/06/25 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
python 从list中随机取值的方法
2020/11/16 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
功夫熊猫观后感
2015/06/10 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Python保存并浏览用户的历史记录
2022/04/29 Python