JWT

被祝福的猫

已于 2022-09-20 10:53:30 修改

阅读量379

点赞数

文章标签：服务器 json 前端

于 2022-09-20 10:48:09 首次发布

本文链接：https://blog.csdn.net/a8868860/article/details/126948755

版权

用户登录

1 JWT使用

1.1 JWT介绍

什么是JWT

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

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

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

但是基于session的认证使应用本身很难得到扩展，随着不同客户端用户的增加，独立的服务器已无法承载更多的用户，而这时候基于session认证应用的问题就会暴露出来.
基于session认证所显露的问题

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

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

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

基于token的鉴权机制，不需要在服务端去保留用户的认证信息。这就意味着应用不需要去考虑用户在哪一台服务器登录了，这就为应用的扩展提供了便利。

流程上是这样的：

· 用户使用用户名密码来请求服务器

· 服务器进行验证用户的信息

· 服务器通过验证发送给用户一个token

· 客户端存储token，并在每次请求时附送上这个token值

· 服务端验证token值，并返回数据

这个token必须要在每次请求时传递给服务端，它应该保存在请求头里，另外，服务端要支持CORS(``跨来源资源共享``)策略。
JWT长什么样？

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

# JWT字符串
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

JWT的构成

第一部分我们称它为头部（header),第二部分我们称其为载荷（payload, 类似于飞机上承载的物品)，第三部分是签名（signature).
- header
  
  jwt的头部承载两部分信息：
```
·    声明类型，这里是jwt

·    声明加密的算法 通常直接使用 HMAC SHA256
```
  完整的头部就像下面这样的JSON：
```
{
  'typ': 'JWT',
  'alg': 'HS256'
}
```
  然后将头部进行base64编码，其中的”=“号占位符替换为”“，构成了第一部分. （注意header格式不同，可能编码结果不同）
```
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9
```
- playload
  
  载荷就是存放有效信息，这些有效信息包含三个部分
  
  · 标准中注册的声明
  
  · 公共的声明
  
  · 私有的声明
  
  标准中注册的声明(建议但不强制使用) ：
  
  · 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
```
- signature
  
  jwt的第三部分是一个签名信息，由三部分组成：
  
  · header (base64后的)
  
  · payload (base64后的)
  
  · secret
  
  这个部分需要base64编码后的header和base64编码后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后base64编码，就构成了jwt的第三部分。
  
  将这三部分用.连接成一个完整的字符串,构成了最终的jwt

# jwt
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

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

如何应用

一般是在请求头里加入Authorization，并加上JWT标注：
```
axios.get('api/user/1', {
	params:{
	limit: 10
	}
  	headers: {
    'Authorization': 'JWT ' + token
  }
})
```
服务端会验证token，如果验证通过就会返回相应的资源。

在这里插入图片描述

1.2 djangorestframework-jwt使用

djangorestframework-jwt官方文档：https://jpadilla.github.io/django-rest-framework-jwt/


在settings.py中进行配置

```python
REST_FRAMEWORK = {
    # 身份认证
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
    ),
}
import datetime

JWT_AUTH = {
    # jwt过期时间
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
}

设置路由

from rest_framework_jwt.views import obtain_jwt_token

urlpatterns = [
    path('login/', obtain_jwt_token), #视图函数
]

请求地址： http://127.0.0.1:8000/users/login/

请求方式： post

请求参数：表单

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

需返回数据： JSON

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

返回数据说明

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

djangorestframework-jwt默认只返回token

自定义返回数据

def jwt_response_payload_handler(token, user=None, request=None):
    """为返回的结果添加用户相关信息"""

    return {
        'token': token,
        'user_id': user.pk,
        'username': user.username,
    }

修改settings.py中的配置

# JWT配置
JWT_AUTH = {
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
    # 自定义返回数据
    'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.myutils.jwt_response_payload_handler',
}

1.3 增加管理员登录功能

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

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

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

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

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

重写authenticate方法的思路：

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

from django.contrib.auth.hashers import check_password
from users.models import User


class MyAuthenticationBackend(ModelBackend):
    def authenticate(self, request, username=None, password=None):
        # 根据前台提交的数据获取用户对象，
        user = User.objects.filter(username=username, is_staff=True).first()
        # 判断用户是否存在并且密码是否正确
        if user and check_password(password, user.password):
            # 判断通过，返回用户对象
            return user
        # 用户不存在或者密码不正确时
        else:
            return None

配置settings.py中的django认证

# 只能配置一个认证类，走找到的第一个，并且认证不通过返回400
# 认证通过返回json数据{token:xxx, xxx,xxx}
AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',   # djangp默认认证
    'users.utils.IsAdminBackend',  # 自定义认证
]

2 短信验证码

2.1 容联云介绍及文档

容联云地址：https://www.yuntongxun.com/

文档：https://doc.yuntongxun.com/p/5a531a353b8496dd00dcdfe2

账号注册成功以后，系统分配授权信息

在这里插入图片描述

添加测试号码

在这里插入图片描述

容联云发送短信文档

python SDK文档：https://doc.yuntongxun.com/p/5f029ae7a80948a1006e776e

安装SDK

pip install ronglian_sms_sdk

参数	类型	说明
tid	String	短信模板 ID 测试号为“1”
mobile	String	发送手机号，多个以英文逗号分隔，最多 200 个号码
datas	tuple	替换短信模板占位符的内容变量

发送短信调用示例：

from ronglian_sms_sdk import SmsSDK
 
accId = '8a216da8762cb4570176f6b1f0c54906'
accToken = '30e8687e49a24bd3b7e5e2e5f0048697'
appId = '8a216da8762cb4570176f6b1f1ff490c'
 
def send_message():
    sdk = SmsSDK(accId, accToken, appId)
    tid = '1'  # 容联云分配的一个测试短信验证码模版
    mobile = '15801288490'  # 接收短信的手机号
    datas = ('65543', '5')
    resp = sdk.sendMessage(tid, mobile, datas)
    print(resp)

2.2 生成短信验证码并存储

在这里插入图片描述

在users应用下新建utils.py, 内部定义发送短信的方法

from ronglian_sms_sdk import SmsSDK

import json
import random

accId = '8a216da8762cb4570176f6b1f0c54906'
accToken = '30e8687e49a24bd3b7e5e2e5f0048697'
appId = '8a216da8762cb4570176f6b1f1ff490c'


def send_message(sms_code, mobile, expire=5):
    sdk = SmsSDK(accId, accToken, appId)
    tid = '1'  # 容联云分配的一个测试短信验证码模版
    datas = ("%s"%sms_code, '%s'%expire)
    resp = sdk.sendMessage(tid, mobile, datas)
    print(resp)
    res_json = json.loads(resp)
    print(res_json.get('statusCode'))
    if res_json.get('statusCode') == '000000':
        return True
    else:
        return False

短信验证码接口

class SmsCodeAPIView(APIView):
    # 生成短信验证码
    def get(self, request):
        mobile = request.query_params.get('mobile')
        # 生成随机码
    	sms_code = random.randint(10000, 99999)
        result = send_message(sms_code, mobile)  #
        if not result:
            return Response({'msg': '发送失败', 'code': 400})
        else:
            # 发送短信成功，保存sms_code到redis当中
            redis_conn = redis.Redis(host="localhost", port=6379)
            key = "sms_%s"%mobile
            redis_conn.set(key, sms_code, ex=300)
            return Response({'msg': '发送成功', 'code': 200})

3 短信验证码校验

前端实现如下页面，获取短信验证码，并进行验证短信验证码。

作业：自行完成用户注册功能

在这里插入图片描述

3.1 前端访问验证码接口

前端访问后台接口

// 获取验证码
getSmsCode(){
        if (!this.userForm.mobile) {
            this.$message(
                {
                    type: "error",
                    message: "手机号不能为空"
                }
            )
            return
        }
        axios.get("/v1/users/sms_code/", {
            params:{
                mobile: this.userForm.mobile
            },
        })
        .then(res => {
            if (res.data.code == 200){
                this.$message({
                    type: "success",
                    message: res.data.msg
                })
            }else{
                this.$message({
                    type: "error",
                    message: res.data.msg
                })
            }
        })
        .catch(err => {
            console.log("验证码请求错误:", err)
        })
    },

3.2 验证码校验

前端代码：失焦事件

validateSMSCode(){
        if(!this.userForm.smsCode){
            this.$message({
                type: "error",
                message: "请求输入验证码"
            })
            return
        }

        axios.post("/v1/users/sms_code/", {
            mobile: this.userForm.mobile,
            smsCode: this.userForm.smsCode
        })
        .then(res => {
            if (res.data.code == 200){
                this.$message({
                    type: "success",
                    message: res.data.msg
                })
            }else{
                this.$message({
                    type: "error",
                    message: res.data.msg
                })
            }
        })
        .catch(err => {
            console.log("验证验证码请求错误:", err)
        })
    },

后端代码

class SmsCodeAPIView(APIView):
    ...
    # 验证短信验证码
    def post(self, request):
        mobile = request.data.get('mobile')
        sms_code = request.data.get('smsCode')

        # 通过mobile来获取redis当中的手机验证码，用来进行比对
        redis_conn = redis.Redis(host="localhost", port=6379, password="laufing")
        key = "sms_%s" % mobile
        redis_code = redis_conn.get(key)

        # 判断sms_code 和 redis_code 是否一致
        print("redis code:", redis_code, sms_code)
        if redis_code and sms_code == redis_code.decode():
            return Response({'msg': '验证成功', 'code': 200})
        else:
            return Response({'msg': '验证失败', 'code': 400})