JWT原理构成与使用（带案例简单易懂）

JWT原理构成与使用

项目架构

开发模式：前后端分离

前端框架：VUE

后端框架：Django REST framework

功能部分：管理员登录，数据统计，用户管理，商品管理，订单管理，权限管理

主要技术 ： JWT用户认证 ，CORS跨域

跨域CORS

我们的前端和后端分别是两个不同的端口

位置	域名
前端服务	www.xxx.cn:8080
后端服务	www.xxx.cn:8000

现在，前端与后端分处不同的域名，这就涉及到跨域访问数据的问题，因为浏览器的同源策略，默认是不支持两个不同域间相互访问数据，而我们需要在两个域名间相互传递数据，这时我们就要为后端添加跨域访问的支持。

我们使用CORS来解决后端对跨域访问的支持。

安装

pip install django-cors-headers

添加应用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

中间层设置

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

添加白名单

# CORS
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://localhost:8080',
    'http://www.meiduo.site:8080',
    'http://www.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

• 凡是出现在白名单中的域名，都可以访问后端接口
• CORS_ALLOW_CREDENTIALS 指明在跨域访问中，后端是否支持对cookie的操作。

JWT的原理和构成

在用户注册或登录后，我们想记录用户的登录状态，或者为用户创建身份认证的凭证。我们不再使用Session认证机制，而使用Json Web Token认证机制。

JWT介绍

Json web token（JWT），是为了在网络应用环境之间传递声明而执行的一种基于JSON的开放标准（RFC7519），该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者之间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其他业务逻辑所必须声明信息，该token也可以直接被用于认证，也可被加密。

起源

说起JWT，我们应该来谈一谈基于token的认证和传统的session认证的区别。

传统的session认证

我们知道，http协议本身是一种无状态的协议，而这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证，那么下一次请求时，用户还要再一次进行用户认证才行，因为根据http协议，我们并不能知道是哪个用户发出的请求，所以为了让我们的应用能识别是哪个用户发出的请求，我们只能在服务器存储一份用户登录的信息，这份登录信息会在响应时传递给浏览器，告诉其保存为cookie,以便下次请求时发送给我们的应用，这样我们的应用就能识别请求来自哪个用户了,这就是传统的基于session认证。

基于session认证所显露的问题

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

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

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

基于token的鉴权机制

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

流程：

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

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

JWT的样子

JWT是由三段信息构成的，将这三段信息文本用.链接一起就构成了Jwt字符串。就像这样:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

JWT的构成

第一部分我们称为头部（header），第二部分我们称为载荷（payload），第三部分是签证（signature）

header

jwt的头部有两部分信息构成：

• 声明类型，这里是jwt
• 声明加密算法，通常直接使用HMAC SHA256

完整的头部应该是下面这种的JSON：

{
    'typ':'JWT'，
    'alg':'HS256'
    
}

然后将头部信息进行base64加密，构成了第一部分

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9

payload

载荷就是用来存放有效信息的地方。包含三个部分：

• 标准中注册的声明
• 公共的声明
• 私有的声明

标准中注册的声明(建议但不强制使用) ：

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

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

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

定义一个payload:

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

然后将其进行base64加密，得到JWT的第二部分。

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9

signture

JWT的第三部分是一个签证信息，包含三个部分：

• header（base64加密后的）
• payload（base64加密后的）
• secret

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

// javascript
var encodedString = base64UrlEncode(header) + '.' + base64UrlEncode(payload);

var signature = HMACSHA256(encodedString, 'secret'); // TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

将这三部分用.连接成一个完整的字符串,构成了最终的jwt:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

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

如何应用：

一般是在请求头里加上Authorzation，并且加上Bearer标注：

fetch('api/user/1', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

服务端会验证token，如果验证通过就会返回相应的资源。整个流程就是这样的:

总结

优点

• 因为json的通用性，所以JWT是可以进行跨语言支持的，像JAVA,JavaScript,NodeJS,PHP等很多语言都可以使用。
• 因为有了payload部分，所以JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息。
• 便于传输，jwt的构成非常简单，字节占用很小，所以它是非常便于传输的。
• 它不需要在服务端保存会话信息, 所以它易于应用的扩展

安全相关

• 不应该在jwt的payload部分存放敏感信息，因为该部分是客户端可解密的部分。
• 保护好secret私钥，该私钥非常重要。
• 如果可以，请使用https协议

Django REST framework JWT

我们在验证完用户的身份后（校验用户名和密码），需要向用户签发JWT，在需要用到用户身份信息的时候，还需要校验用户的JWT。

关于签发和校验JWT，我们可以使用Django REST framework JWT扩展来完成。

安装配置

安装

pip install djangorestframework-jwt

配置

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.BasicAuthentication',
    ),
}
import datetime
JWT_AUTH = {
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
}

• JWT_EXPIRATION_DELTA 指明token的有效期

举例：账号登陆

1. 业务说明

验证用户名和密码，验证成功后，为用户签发JWT，前端将签发的JWT保存下来。

2. 后端接口设计

请求方式： POSTmeiduo_admin/authorizations/

请求参数： JSON 或 表单

参数名	类型	是否必须	说明
username	str	是	用户名
password	str	是	密码

返回数据： JSON

{
    "username": "python",
    "user_id": 1,
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo5LCJ1c2VybmFtZSI6InB5dGhvbjgiLCJleHAiOjE1MjgxODI2MzQsImVtYWlsIjoiIn0.ejjVvEWxrBvbp18QIjQbL1TFE0c0ejQgizui_AROlAU"
}

返回值	类型	是否必须	说明
username	str	是	用户名
id	int	是	用户id
token	str	是	身份认证凭据

3. 后端实现

Django REST framework JWT提供了登录签发JWT的视图，可以直接使用

from django.conf.urls import url
from rest_framework_jwt.views import obtain_jwt_token

urlpatterns = [
    url(r'^authorizations/$', obtain_jwt_token),
]

但是默认的返回值仅有token，我们还需在返回值中增加username和user_id。

通过修改该视图的返回值可以完成我们的需求。

def jwt_response_payload_handler(token, user=None, request=None):
    """
    自定义jwt认证成功返回数据
    """
    return {
        'token': token,
        'id': user.id,
        'username': user.username
    }

修改配置文件

# JWT配置
JWT_AUTH = {
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
    'JWT_RESPONSE_PAYLOAD_HANDLER': 'utils.jwt_response.jwt_response_payload_handler',
}

增加支持管理员用户登录账号

JWT扩展的登录视图，在收到用户名与密码时，也是调用Django的认证系统中提供的**authenticate()**来检查用户名与密码是否正确。

我们可以通过修改Django认证系统的认证后端（主要是authenticate方法）来支持登录账号既可以是用户名也可以是手机号。

修改原有的登录验证方法,添加request参数

from django.contrib.auth import authenticate
user = authenticate(request,username=username,password=password)

修改Django认证系统的认证后端需要继承django.contrib.auth.backends.ModelBackend，并重写authenticate方法。

authenticate(self, request, username=None, password=None, **kwargs)方法的参数说明：

• request 本次认证的请求对象
• username 本次认证提供的用户账号
• password 本次认证提供的密码

我们想要让管理员用户才能登录我们的admin后台,这时我们就要修改django原有的用户验证方法。

重写authenticate方法的思路：

1. 根据username参数查找用户User对象，在查询条件中在加上is_staff=True的条件
2. 若查找到User对象，调用User对象的check_password方法检查密码是否正确

在utils/authenticate.py中编写：

from django.contrib.auth.backends import ModelBackend 
import re
from user.models import User

class UserModelBakcend(ModelBackend):
    
    def authenticate(self,request,username=None,password=None,**kwargs):
        # 判断用户发出的请求是后端还是前端
        if request is None:
            # 说明是后端请求
            try:
            	user = User.objects.get(username=username,is_staff=True)
            except:
                try:
                    user = User.objects.get(mobile=username,is_staff=True)
                except:
                	return None
            # 校验用户名和密码
            if user.check_password(password):
                return user
            return None
        else:
            # 说明是前端请求
            try:
                user = User.objects.get(username=username)
            except:
                try:
                	user = User.objects.get(mobile=username)
                except:
					return None
            # 校验用户名和密码
            if user.checkt_password(password):
                return user
            return None
        

在配置文件中告知Django使用我们自定义的认证后端

#认证后端
AUTHENTICATION_BACKENDS = ['utils.UsernameMobileModelBackend'] # 文件路径

此时需要前端保存token

我们可以将JWT保存在cookie中，也可以保存在浏览器的本地存储里，我们保存在浏览器本地存储中

浏览器的本地存储提供了sessionStorage 和 localStorage 两种：

• sessionStorage浏览器关闭即失效
• localStorage长期有效

使用方法

sessionStorage.变量名 = 变量值   // 保存数据
sessionStorage.变量名  // 读取数据
sessionStorage.clear()  // 清除所有sessionStorage保存的数据

localStorage.变量名 = 变量值   // 保存数据
localStorage.变量名  // 读取数据
localStorage.clear()  // 清除所有localStorage保存的数据
var vm = new Vue({
    ...
    methods: {
        ...
        on_submit: function(){
            axios.post(...)
                .then(response => {
                    // 记录用户的登录状态
                    sessionStorage.clear();
                    localStorage.clear();
                    localStorage.token = response.data.token;
                    localStorage.username = response.data.username;
                    localStorage.user_id = response.data.id;
                    location.href = '/index.html';
                })
                .catch(...)
        }
    }
})