前后端分离 | token令牌 | JWT | CORS跨域资源共享 | RESTful

最新推荐文章于 2023-08-09 23:08:19 发布

_leyilea

最新推荐文章于 2023-08-09 23:08:19 发布

阅读量1.6k

点赞数 4

分类专栏： # Django Web前端文章标签：前后端分离 token令牌 JWT CORS跨域资源共享 RESTful

本文链接：https://blog.csdn.net/qq_45305211/article/details/101262630

版权

Web前端同时被 2 个专栏收录

16 篇文章 2 订阅

订阅专栏

Django

8 篇文章 0 订阅

订阅专栏

1，前后端分离

1.1 什么是前后端分离

前端：即客户端，负责渲染用户显示界面【如web的js动态渲染页面, 安卓， IOS，pc客户端等】

后端：即服务器端，负责接收http请求，处理数据

API：Application Programming Interface 是一些预先定义的函数，或指软件系统不同组成部分衔接的约定

前后端分离完整请求过程

1，前端通过http请求后端API

2，后端以json形式返回前端数据

3，前端生成用户显示界面【如html , ios , android】

判断前后端分离得核心标准：谁生成显示页面

1，后端生成【前后端未分离】 ex: flask->render_template django -> HttpResponse(html)

2, 前端生成【前后端分离】

1.2 优点

1，各司其职

前端：视觉层面，兼容性，前端性能优化

后端：并发，可用性，性能

2，解耦，前端和后端均易于扩展

3，后端灵活搭配各类前端 - 如安卓等

4，提高用户体验

5，前端+后端可完全并行开发，加快开发效率

1.3 分离常见问题

问题	答案
如何解决http无状态？	采用token(详情见下方章节)
如果前端为JS，如何解决跨域问题？	采用CORS(详情见下方章节)
如何解决csrf问题	采用token
Single Page web Application 是否会影响Search Engine Optimization效果	会，前后端分离后，往往页面不存在静态文字【例如新闻的详细内容】
”老板，这个逻辑到底是让前端做还是后端做啊?“	底线原则: 数据校验需要前后端都做
”老板，前端工作压力太大了啊“	团队协作不能只是嘴上说说
动静分离和前后端分离是一个意思么？	动静分离指的是 css/js/img这类静态资源跟服务器拆开部署，典型方案-静态资源交由CDN厂商处理

1.4 实现方式

1，Django/Flask 后端只返回json

2, 前端 -> ex: js向服务器发出ajax请求，获取数据，拿到数据后动态生成html

3, 前端服务和后端服务分开部署

查看站点信息---->site:域名
如 : site:www.jd.com

2，token - 令牌

学前须知：

1，base64 '防君子不防小人’

方法	作用	参数	返回值
b64encode	将输入的参数转化为base64规则的串	预加密的明文，类型为bytes；例：b‘guoxiaonao’	base64对应编码的密文，类型为bytes；例:b’Z3VveGlhb25hbw==’
b64decode	将base64串解密回明文	base64密文,类型为bytes;例：b’Z3VveGlhb25hbw==’	参数对应的明文，类型为bytes；例：b’guoxiaonao’
urlsafe_b64encode	作用同b64encode,但是会将 ‘+‘替换成 ‘-’,将’/‘替换成’_’	同b64encode	同b64encode
urlsafe_b64decode	作用同b64decode	同b64decode	同b64decode

代码演示:

import base64
#base64加密
s = b'guoxiaonao'
b_s = base64.b64encode(s)
#b_s打印结果为 b'Z3VveGlhb25hbw=='

#base64解密
ss = base64.b64decode(b_s)
#ss打印结果为 b'guoxiaonao'

2，SHA-256 安全散列算法的一种（hash）

hash三大特点：

1）定长输出 2）不可逆 3） 雪崩

import hashlib
s = hashlib.sha256() #创建sha256对象
s.update(b'xxxx')  #添加欲hash的内容，类型为 bytes
s.digest()  #获取最终结果


>>> import hashlib
>>> m=hashlib.md5()
>>> m.update(b'123')
>>> m.hexdigest()

3，HMAC-SHA256 是一种通过特别计算方式之后产生的消息认证码，使用散列算法同时结合一个加密密钥。

它可以用来保证数据的完整性，同时可以用来作某个消息的身份验证

import hmac
#生成hmac对象
#第一个参数为加密的key，bytes类型(盐)，
#第二个参数为欲加密的串，bytes类型
#第三个参数为hmac的算法，指定为SHA256
h = hmac.new(key, str, digestmod='SHA256 ') 
h.digest() #获取最终结果
h.hexdigest()

4，RSA256 非对称加密

1，加密：公钥加密，私钥解密

2，签名：私钥签名，公钥验签

JWT - json-web-token

1，三大组成

1，header

格式为字典-元数据格式如下

{'alg':'HS256', 'typ':'JWT'}
#alg代表要使用的 算法
#typ表明该token的类别 - 此处必须为 大写的 JWT

该部分数据需要转成json串并用base64 加密

2，payload

格式为字典-此部分分为公有声明和私有声明

公共声明：JWT提供了内置关键字用于描述常见的问题

此部分均为可选项，用户根据自己需求按需添加key，常见公共声明如下：

{'exp':xxx, # Expiration Time 此token的过期时间的时间戳
 'iss':xxx，# (Issuer) Claim 指明此token的签发者
 'iat':xxx, # (Issued At) Claim 指明此创建时间的时间戳
 'aud':xxx, # (Audience) Claim	指明此token签发面向群体
}

私有声明：用户可根据自己业务需求，添加自定义的key，例如如下：
```
{'username': 'guoxiaonao'}
```

公共声明和私有声明均在同一个字典中；转成json串并用base64加密

3，signature 签名

签名规则如下：

根据header中的alg确定具体算法，以下用 HS256为例

HS256(自定义的key , base64后的header + b’.’ + base64后的payload)

解释：用自定义的key, 对base64后的header + b’.’ + base64后的payload进行hmac计算

2，jwt结果格式

base64(header) + b’.’ + base64(payload) + b’.’ + base64(sign)

最终结果token如下： b’eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6Imd1b3hpYW9uYW8iLCJpc3MiOiJnZ2cifQ.Zzg1u55DCBqPRGf9z3-NAn4kbA-MJN83SxyLFfc5mmM’

3，校验jwt规则

1，解析header, 确认alg

2，签名校验 - 根据传过来的header和payload按 alg指明的算法进行签名，将签名结果和传过来的sign进行对比，若对比一致，则校验通过

3，获取payload自定义内容

import copy, json, base64, hmac, time


class MyJWT():
	"""自制JWK"""
    def __init__(self):
        pass

    @staticmethod
    def b64encode(j_s):
        # 替换b64生成的占位'='
        return base64.urlsafe_b64encode(j_s).replace(b'=', b'')

    @staticmethod
    def b64decode(b64_s):
        rem = len(b64_s) % 4
        if rem:
            b64_s += b'=' * (4 - rem)
        return base64.urlsafe_b64decode(b64_s)

    @staticmethod
    def encode(payload, key, exp=300):
        # init header
        header = {'alg': 'HS256', 'typ': 'JWT'}
        # 将header 转成json串  sort_keys=True(有序)  去掉空格
        header_json = json.dumps(header, sort_keys=True, separators=(',', ':'))
        # b64 - json 串
        header_bs = MyJWT.b64encode(header_json.encode())

        # init payload  参数可能为{'username':'xioaming',}
        payload = copy.deepcopy(payload)  # 避免污染变量.使用深拷贝
        # 失效时间
        payload['exp'] = time.time() + exp
        # 转成json
        payload_json = json.dumps(payload, sort_keys=True, separators=(',', ':'))
        # b64 - json 串
        payload_bs = MyJWT.b64encode(payload_json.encode())

        if isinstance(key, str):
            key = key.encode()

        # signature 签名
        _str = header_bs + b'.' + payload_bs
        h = hmac.new(key, _str, digestmod='SHA256')
        h_bs = MyJWT.b64encode(h.digest())

        return _str + b'.' + h_bs

    @staticmethod
    def decode(key, token):
        # 1.对比两次HMAC结果
        # 2.payload部分有exp的话,要校验exp
        # 3.最终返回 payload
        header_bs, payload_bs, sign = token.split(b'.')

        if isinstance(key, str):
            key = key.encode()
        # 重新计算hmac的值
        h = hmac.new(key, header_bs + b'.' + payload_bs, digestmod='SHA256')
        # 比较两次sign
        if sign != MyJWT.b64encode(h.digest()):
            # hmac 异常
            raise
        # 获取payload内容
        payload_json = MyJWT.b64decode(payload_bs)
        payload = json.loads(payload_json)

        # exp 校验
        exp = payload['exp']
        now = time.time()
        if exp < now:
            # 此token 过期
            raise
        return payload


if __name__ == '__main__':
    payload = {
        'username': 'xiaoming',
    }

    res = MyJWT.encode(payload, key='abc', exp=300)

    print(res)
    print(MyJWT.decode('abc', res))

    # 测试过时
    # time.sleep(2)
    # print(MyJWT.decode('abc',res))

4，pyjwt

1，安装 pip3 install pyjwt

方法	参数说明	返回值
encode(payload, key, algorithm)	payload: jwt三大组成中的payload,需要组成字典，按需添加公有声明和私有声明例如: {‘username’: ‘guoxiaonao’, ‘exp’: 1562475112} 参数类型： dict	token串返回类型：bytes
	key : 自定义的加密key 参数类型：str
	algorithm: 需要使用的加密算法[HS256, RSA256等] 参数类型：str
decode(token,key,algorithm,)	token: token串参数类型： bytes/str	payload明文返回类型：dict
	key : 自定义的加密key ,需要跟encode中的key保持一致参数类型：str
	algorithm: 同encode
	issuer: 发布者，若encode payload中添加 ‘iss’ 字段，则可针对该字段校验参数类型：str	若iss校验失败，则抛出jwt.InvalidIssuerError
	audience：签发的受众群体，若encode payload中添加’aud’字段，则可针对该字段校验参数类型：str	若aud校验失败，则抛出jwt.InvalidAudienceError

PS: 若encode得时候 payload中添加了exp字段; 则exp字段得值需为当前时间戳+此token得有效期时间，例如希望token 300秒后过期 {‘exp’: time.time() + 300}; 在执行decode时，若检查到exp字段，且token过期，则抛出jwt.ExpiredSignatureError

import hashlib
import json
import time

import jwt
from django.http import JsonResponse
from django.shortcuts import render

from user.models import UserProfile
from tools.logging import TOKEN_KEY
# Create your views here.

# 将token 独立出来

# 登录验证
def tokens(request):
    # 登录
    if request.method!='POST':
        result={'code':10200,'error':'Please send POST`s request'}
        return JsonResponse(result)

    json_str=request.body
    if not json_str:
        result = {'code':10201,'error':'Please give me data'}
        return JsonResponse(result)

    json_obj=json.loads(json_str)

    username=json_obj.get('username')
    password=json_obj.get('password')

    if not username:
        result={'code':10202,'error':'Please give me username'}
        return JsonResponse(result)

    if not password:
        result={'code':10203,'error':'Please give me password'}
        return JsonResponse(result)

    user=UserProfile.objects.filter(username=username)

    if not user:
        result={'code':10204,'error':'The username or password is wrong'}
        return JsonResponse(result)

    user=user[0]
    # 对比密码
    p_m=hashlib.md5()
    p_m.update(password.encode())
    if p_m.hexdigest() != user.password:
        result={'code':10205,'error':'The username or password is wrong'}
        return JsonResponse(result)

    # 生成token
    token=make_token(username)

    return JsonResponse({'code': 200, 'username':username,'data': {'token': token.decode()}})


def make_token(username,expire=24*60*60):
    # 生成token
    key=TOKEN_KEY
    now_t=time.time()
    payload={'username':username,'exp':now_t+expire}

    token=jwt.encode(payload,key,algorithm='HS256')

    return token

import jwt
from django.http import JsonResponse

from user.models import UserProfile

TOKEN_KEY = 'asd'

# 登录验证
def logging_check(*methods):
    def _logging_check(func):
        def wrapper(request, *args, **kwargs):
            token = request.META.get('HTTP_AUTHORIZATION')
            if not methods:
                # 不检查
                return func(request, *args, **kwargs)
            else:
                # @logging_check('PUT','POST')
                if request.method not in methods:
                    return func(request, *args, **kwargs)
                # 检查token
                # 1. 检查有没有token
                if not token:
                    result = {'code': 10206, 'error': 'Please login'}
                    return JsonResponse(result)
                try:
                    res = jwt.decode(token, TOKEN_KEY)
                except Exception as e:
                    print(e)
                    result = {'code': 10207, 'error': 'Please login !'}
                    return JsonResponse(result)

                username = res['username']
                try:
                    user = UserProfile.objects.get(username=username)
                except Exception as e:
                    print('--get error--')
                    print(e)
                    result = {'code': 10208, 'error': 'Please login !!'}
                    return JsonResponse(result)

                # 将user 作为request的属性带回视图函数
                request.user = user

            return func(request, *args, **kwargs)

        return wrapper

    return _logging_check


def get_user_by_request(request):
    # 尝试性拿user
    token=request.META.get('HTTP_AUTHORIZATION')
    if not token:
        # 游客
        return None

    try:
        res=jwt.decode(token,TOKEN_KEY)
    except Exception as e:
        print(e)
        return None

    username=res['username']
    try:
        user=UserProfile.objects.get(username=username)
    except Exception as e:
        print(e)
        return None
    return user

3， CORS - Cross-origin resource sharing - 跨域资源共享

1，什么是CORS

允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

2，特点

1，浏览器自动完成（在请求头中加入特殊头或发送特殊请求）

2，服务器需要支持（响应头中需要有特殊头）

3，简单请求(Simple requests)和预检请求(Preflighted requests)

满足以下全部条件的请求为 简单请求

1，请求方法如下：

GET or HEAD or POST

2，请求头仅包含如下：

Accept-Language

Content-Language

Content-Type

3，Content-Type 仅支持如下三种：

application/x-www-form-urlencoded >> 普通表单

multipart/form-data >> 文件上传的表单

text/plain

不满足以上任意一点的请求都是预检请求

4，简单请求发送流程

1，请求

请求头中携带 Origin，该字段表明自己来自哪个域

2，响应

如果请求头中的Origin在服务器接受范围内，则返回如下头

响应头	作用	备注
Access-Control-Allow-Origin	服务器接受得域
Access-Control-Allow-Credentials	是否接受Cooike	可选
Access-Control-Expose-Headers	默认情况下，xhr只能拿到如下响应头：Cache-Control，Content-Language，Content-Type，Expires，Last-Modified；如果有需要获取其他头，`需在此指定`	可选

如果服务器不接受此域，则响应头中不包含 Access-Control-Allow-Origin

5，预检请求发送流程

1，OPTION 请求发起，携带如下请求头

请求头	作用	备注
Origin	表明此请求来自哪个域	必选
Access-Control-Request-Method	此次请求使用方法	必选
Access-Control-Request-Headers	此次请求使用的头	必选

2，OPTION 接受响应阶段，携带如下响应头

响应头	作用	备注
Access-Control-Allow-Origin	同简单请求 - 服务器接受得域	必选
Access-Control-Allow-Methods	告诉浏览器，服务器接受得跨域请求方法	必选
Access-Control-Allow-Headers	返回所有支持的头部，当request有 ‘Access-Control-Request-Headers’时，该响应头必然回复	必选
Access-Control-Allow-Credentials	同简单请求	可选
Access-Control-Max-Age	OPTION请求缓存时间，单位s	可选

3，主请求阶段

请求头	作用	备注
Origin	表明此请求来自哪个域

4，主请求响应阶段

响应头	作用	备注
Access-Control-Allow-Origin	当前服务器接受得域

6，Django支持

django-cors-headers官网 https://pypi.org/project/django-cors-headers/

直接pip 将把django升级到2.0以上，强烈建议用离线安装方式

$ tar -zxvf django-cors-headers-3.0.2.tar.gz		
$ cd django-cors-headers-3.0.2/						
$ sudo python3 setup.py install
$ pip3 freeze | grep 'cors'

配置流程

1，INSTALLED_APPS 中添加 corsheaders
2，MIDDLEWARE 中添加 corsheaders.middleware.CorsMiddleware
   位置尽量靠前，官方建议 ‘django.middleware.common.CommonMiddleware’ 上方
3，CORS_ORIGIN_ALLOW_ALL  布尔值  如果为True 白名单不启用
4，CORS_ORIGIN_WHITELIST =[		# 白名单
	"https://example.com"
]
5, CORS_ALLOW_METHODS = (		#支持的请求方法
		'DELETE',
		'GET',
		'OPTIONS',
		'PATCH',
		'POST',
		'PUT',
		)
6, CORS_ALLOW_HEADERS = (		# 支持的头
		'accept-encoding',
		'authorization',		# 校验信息-token放在此处
		'content-type',
		'dnt',
		'origin',
		'user-agent',
		'x-csrftoken',			# x- 不属于官方头
		'x-requested-with',
	)
7, CORS_PREFLIGHT_MAX_AGE  默认 86400s(一天)
8, CORS_EXPOSE_HEADERS  []
9, CORS_ALLOW_CREDENTIALS  布尔值， 默认False  # 是否使用跨域cookie

4，RESTful -Representational State Transfer

什么是RESTful

一种指导思想

1，资源（Resources）

网络上的一个实体，或者说是网络上的一个具体信息，并且每个资源都有一个独一无二得URI与之对应；获取资源-直接访问URI即可

2，表现层（Representation）

如何去表现资源 - 即资源得表现形式；如HTML , xml , JPG , json等

3，状态转化（State Transfer）

访问一个URI即发生了一次客户端和服务端得交互；此次交互将会涉及到数据和状态得变化

客户端需要通过某些方式触发具体得变化 - HTTP method 如 GET， POST，PUT，PATCH，DELETE 等

RESTful的特征

1，每一个URI代表一种资源

2，客户端和服务器端之前传递着资源的某种表现

3，客户端通过HTTP的几个动作对资源进行操作 - 发生‘状态转化’

如何设计符合RESTful 特征的API

1，协议 - http/https

2，域名：

域名中体现出api字样，如

https://api.example.com

https://example.org/api/

3, 版本:

https://api.example.com/v1/

4，路径 -

路径中避免使用动词，资源用名词表示，案例如下

https://api.example.com/v1/users
https://api.example.com/v1/animals

5，HTTP动词语义

GET（SELECT）：从服务器取出资源（一项或多项）。
POST（CREATE）：在服务器新建一个资源。
PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。

DELETE（DELETE）：从服务器删除资源。

具体案例如下：

GET /zoos：列出所有动物园
POST /zoos：新建一个动物园
GET /zoos/ID：获取某个指定动物园的信息
PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）
DELETE /zoos/ID：删除某个动物园
GET /zoos/ID/animals：列出某个指定动物园的所有动物
DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物

6，巧用查询字符串

?limit=10：指定返回记录的数量
?offset=10：指定返回记录的开始位置。
?page=2&per_page=100：指定第几页，以及每页的记录数。
?sortby=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。
?type_id=1：指定筛选条件

7，状态码

1，用HTTP响应码表达此次请求结果，例如

200 OK - [GET]：服务器成功返回用户请求的数据
201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。
202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
204 NO CONTENT - [DELETE]：用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）。
403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]：服务器发生错误

2, 自定义内部code 进行响应(json码)

如返回结构如下 {‘code’:200, ‘data’: {}, ‘error’: xxx}

8，返回结果

根据HTTP 动作的不同，返回结果的结构也有所不同

GET /users：返回资源对象的列表（数组）
GET /users/guoxiaonao：返回单个资源对象
POST /users：返回新生成的资源对象
PUT /users/guoxiaonao：返回完整的资源对象
PATCH /users/guoxiaonao：返回完整的资源对象
DELETE /users/guoxiaonao：返回一个空文档

_leyilea

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前后端分离 | token令牌 | JWT | CORS跨域资源共享 | RESTful

文章目录1，前后端分离1.1 什么是前后端分离1.2 优点1.3 分离常见问题1.4 实现方式2，token - 令牌学前须知：JWT - json-web-token1，三大组成2，jwt结果格式3，校验jwt规则4，pyjwt3， CORS - Cross-origin resource sharing - 跨域资源共享1，什么是CORS2，特点3，简单请求(Simple requests...
复制链接

扫一扫