微信号:FeZaoDuKe

介绍:关注前端,产品设计. 每天5点半推送1篇相关文章到公众号,我们不创造内容,我们只是优秀内容的搬运者. 坚持每天阅读,每天进步一点点

【第1328期】八幅漫画理解使用JSON Web Token设计单点登录系统

2018-07-11 05:25 子回

前言

这周在活动抽奖群里有人提到JWT,那今天来看看这是啥?今日早读文章由@子回授权分享。

在很多年前有分享过【第348期】JSON Web Token - 在Web应用间安全地传递信息,可以用来理解下JWT的生成过程和原理。

正文从这开始~

用户认证八步走

所谓用户认证(Authentication),就是让用户登录,并且在接下来的一段时间内让用户访问网站时可以使用其账户,而不需要再次登录的机制。

小知识:可别把用户认证和用户授权(Authorization)搞混了。用户授权指的是规定并允许用户使用自己的权限,例如发布帖子、管理站点等。

首先,服务器应用(下面简称“应用”)让用户通过Web表单将自己的用户名和密码发送到服务器的接口。这一过程一般是一个HTTP POST请求。建议的方式是通过SSL加密的传输(https协议),从而避免敏感信息被嗅探。

接下来,应用和数据库核对用户名和密码。

核对用户名和密码成功后,应用将用户的id(图中的user_id)作为JWT Payload的一个属性,将其与头部分别进行Base64编码拼接后签名,形成一个JWT。这里的JWT就是一个形同lll.zzz.xxx的字符串。

应用将JWT字符串作为该请求Cookie的一部分返回给用户。注意,在这里必须使用HttpOnly属性来防止Cookie被JavaScript读取,从而避免跨站脚本攻击(XSS攻击)。

在Cookie失效或者被删除前,用户每次访问应用,应用都会接受到含有jwt的Cookie。从而应用就可以将JWT从请求中提取出来。

应用通过一系列任务检查JWT的有效性。例如,检查签名是否正确;检查Token是否过期;检查Token的接收方是否是自己(可选)。

应用在确认JWT有效之后,JWT进行Base64解码(可能在上一步中已经完成),然后在Payload中读取用户的id值,也就是user_id属性。这里用户的id为1025。


应用从数据库取到id为1025的用户的信息,加载到内存中,进行ORM之类的一系列底层逻辑初始化。

应用根据用户请求进行响应。

和Session方式存储id的差异

Session方式存储用户id的最大弊病在于要占用大量服务器内存,对于较大型应用而言可能还要保存许多的状态。一般而言,大型应用还需要借助一些KV数据库和一系列缓存机制来实现Session的存储。

而JWT方式将用户状态分散到了客户端中,可以明显减轻服务端的内存压力。除了用户id之外,还可以存储其他的和用户相关的信息,例如该用户是否是管理员、用户所在的分桶(见[《你所应该知道的A/B测试基础》一文](/2015/08/27/introduction-to-ab-testing/)等。

虽说JWT方式让服务器有一些计算压力(例如加密、编码和解码),但是这些压力相比磁盘I/O而言或许是半斤八两。具体是否采用,需要在不同场景下用数据说话。

单点登录

Session方式来存储用户id,一开始用户的Session只会存储在一台服务器上。对于有多个子域名的站点,每个子域名至少会对应一台不同的服务器,例如:

  • www.taobao.com

  • nv.taobao.com

  • nz.taobao.com

  • login.taobao.com


所以如果要实现在login.taobao.com登录后,在其他的子域名下依然可以取到Session,这要求我们在多台服务器上同步Session。


使用JWT的方式则没有这个问题的存在,因为用户的状态已经被传送到了客户端。因此,我们只需要将含有JWT的Cookie的domain设置为顶级域名即可,例如

Set-Cookie: jwt=lll.zzz.xxx; HttpOnly; max-age=980000; domain=.taobao.com

注意domain必须设置为一个点加顶级域名,即.taobao.com。这样,taobao.com和*.taobao.com就都可以接受到这个Cookie,并获取JWT了。

关于本文
作者:@子回
原文:
http://blog.leapoahead.com/2015/09/07/user-authentication-with-jwt/

最后,为你推荐


【第1325期】以开发的视角做设计


【第1323期】揭开JS无埋点技术的神秘面纱


 
前端早读课 更多文章 【第1322期】Vue CLI 3 配置中 Modern mode 【第1323期】揭开JS无埋点技术的神秘面纱 【第1324期】如何像个程序员一样思考 【第1325期】以开发的视角做设计 【第1326期】WebView缓存原理分析和应用
猜您喜欢 微信 1 亿用户背后的架构揭秘 技术人攻略访谈四:算法工程师的爱与哀愁 给你的Node.js项目部署HTTPS 当红Python又一技能:创建三维立体画(文末公布获奖名单) 架构之路(三) 单元测试