JWT

JWT

参考思路

为用户提供授权操作非公开资源，有很多种方式。比如使用 token、session、cookie，还有允许第三方登录授权的 OAuth 2.0.

一、使用 session 授权

session 原理：
利用 session 来验证用户，有两种机制实现。

1 基于服务端的 session，它可以把用户凭证session ID 存储在服务端（内存或者数据库redis等），服务端可以识别这个 session ID 验证用户身份然后才会授权
2 把 session ID 和其他数据加密后发给用户，由客户端cookie存储，并在以后每次请求中发给服务端来验证

二、使用 JWT 授权

JWT 的原理：

• JWT 的 token 由 头部(head)、数据(payload)、签名(signature) 3个部分组成
• 其中头部（header）和数据（payload）经过 base64 编码后经过秘钥 secret的签名，就生成了第三部分----签名(signature)
• 最后将 base64 编码的 header 和 payload 以及 signature 这3个部分用圆点 . 连接起来就生成了最终的 token
• signature = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
• token = base64UrlEncode(header) + "." + base64UrlEncode(payload) + signature
• 作为用户凭证的 token 生成之后，在服务端签发后发给用户的客户端保存，可以在 localStorage 保存，同样也可以保存在 cookie 。以后每次请求中携带token发送给后端用于验证用户。

前端存储和发送 token 的方式有以下两种：

1. 使用 Header.Authorization + localStorage 存储和发送 token

• 在 localStorage 中存储 token，通过请求头 Header 的 Authorization 字段将 token发送给后端。
  • 优点：这种方法可以避免 CSRF 攻击，因为没有使用 cookie 。
  • 缺点：但是容易被 XSS 攻击，因为 XSS 可以攻击 localStorage ，从中读取到 token，那么攻击者只要将 head 和 payload 的 base64 形式解码出来就可以看到head 和payload 的明文了。我们也可以加密 payload。

2. 使用 cookie 存储和发送 token：

• 在这种情况下，才能保证 token 安全。这样就避免了 CSRF 攻击。

使用 jsonwebtoken 来实现 JWT 用户授权：

• nodejs框架express的jsonwebtoken 主要 API：

1. jwt.sign(payload, secretOrPrivateKey, [options, callback]) 用于签发 token，如果有 callback 将异步的签名 token。
2. jwt.verify(token, secretOrPublicKey, [options, callback]) 用于验证 token
3. jwt.decode(token [, options]) 解码 token

三、使用 OAuth 2.0 授权：

OAuth 2.0

• 应用会提供第三方应用登录，微信、QQ账号、支付宝登录等等，这个过程比用户注册后才能登录要快捷多了。
• 这归功于 OAuth2.0 ，它允许客户端应用可以访问第三方的资源服务器（微信），用户作为资源拥有者，可以允许客户端能够通过第三方认证服务器的身份认证。
• OAuth 2.0 提供了4种角色，资源服务器、资源的拥有者、客户端应用 和 认证服务器，它们之间的交流实现了 OAuth 2.0 整个认证授权的过程。

总结

• session、JWT、OAuth2.0 这三种授权方式每一种里面都会有其他方式的影子，主要是体现在用户凭证的存储和发送上。

比如:

1. 基于服务端的 session，它可以把用户凭证session ID 存储在服务端（内存或者数据库redis等），但是也是可以发给前端通过cookie保存的。
2. JWT 可以把作为用户凭证的 token 在服务端签发后发给用户保存，可以在 localStorage 保存，同样也可以保存在 cookie 。
3. OAuth2.0是比较复杂的一种授权方式，但是它后面获得 token 后也可以像 JWT 一样处理 token 的保存和验证来授权用户。

localStorage和sessionStorage区别

• localStorage 和 sessionStorage一样都是用来存储客户端临时会话信息的对象

• 他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）

• localStorage 生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

• sessionStorage 生命周期为当前窗口或标签页的打开，关闭窗口的数据随之清空

sessionStorage

• sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

localStorage

• 不同浏览器无法共享localStorage、sessionStorage
• 相同浏览器的相同域名和端口下的不同页面，可以共享localStorage
• 相同浏览器的同源页面下，可以共享sessionStorage
• 同源的判断规则：
  • http://www.test.com
  • https://www.test.com （不同源，因为协议不同）
  • http://my.test.com （不同源，因为主机名不同）
  • http://www.test.com:8080（不同源，因为端口不同）

js 使用
1 setItem 存储 value

  sessionStorage.setItem("key", "value"); 	
  localStorage.setItem("site", "js8.in");

2 getItem 获取 value

  var value = sessionStorage.getItem("key");
  var site = localStorage.getItem("site");
  //滚动时保存滚动位置
  $(window).scroll(function(){
  if($(document).scrollTop()!=0){
      sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
      } 
  });
  //onload时，取出并滚动到上次保存位置
  window.onload = function()
  {
      var _offset = sessionStorage.getItem("offsetTop");
      $(document).scrollTop(offsetTop);
  };