网易易盾云图片(行为)验证码，网易验证码，前端vue后端python drf。前后分离

网易易盾开通

官网相关链接：
网易易盾
在线体验：在线体验验证码

联系客服开通体验账户后，点击进入管理中心

添加产品，添加时：测试先随意起个名字，选择web。
准备开工

前端 Vue

官方接入文档在这里：
前端接入文档

先在vue项目的public下的index.html中引入script。官方文档中还有宕机模式的，可以看官方文档

    <script src="http://cstaticdun.126.net/load.min.js"></script>

先把template的代码贴出来

• 这里并没有按官文接入文档的来，选择在button的地方，使用了@click事件。方便点击跳出验证，通过再进行后续操作

<template>
    <div class="a">
        <h2>登录组件</h2>

        <div class="form-container aa">
            <p>
                <input type="text" name="username" id="username" placeholder="用户名">
            </p>
            <p>
                <input type="password" name="password" id="password" placeholder="密码">
            </p>
            <div class="c" id="captcha"></div> <!-- 验证码容器元素 -->
            <button style="width: 30px;height: 20px" @click="handleLogin">登录</button>
        </div>
    </div>

</template>

接下来会用到captchaId，它在刚刚创建的业务中

现在把script的代码贴出来

• 注释看截图，代码上就不贴注释了

<script>
	import axios from "axios";
	export default {
		methods: {
			handleLogin() {
				var date = new Date().getTime();
				console.log(date)
				initNECaptcha({
					captchaId: '你的captchaId',
					element: '#captcha',
					width: '260px 400px',
					onVerify: function (err, data) {
						if (data) {
							axios.post('http://127.0.0.1:8000/api/', {
								date:date,
								captchaId: '你的captchaId',
								validate: data.validate,
							}).then((res) => {
								if (res.data.dic.static === 1){
									console.log('通过了验证')
                                } else {
									console.log('没有通过校验')
                                }
							}).catch((errors) => {
								console.log('发送数据错误')
							})
						} else {
							console.log("没有验证通过")
						}
					}
				}, function onload(instance) {

				}, function onerror(error) {
					// 初始化失败后触发该函数，err对象描述当前错误信息
					console.log(error)
				})
			}
		}
	}
</script>

后端 python django drf

官方相关文档：（主要看以下三个，三个接口都需要）

• 公共参数，文档上说每次请求都要带上这些参数
• 签名算法生成
• 二次校验接口

接下来需要先申请安全凭证：获取到一会校验时需要的SecretId 和 SecretKey

开始后端的干活，为了效率，全写在了views里了。。。
这些是需要导入的包

import json

from rest_framework.views import APIView
from rest_framework.response import Response
from urllib.parse import urlencode
from urllib.request import urlopen

import hashlib, uuid

一共三个方法

第一个接收post请求，因为不涉及数据库，所以只继承了APIView。调用verification_code方法，方法返回dic，dic的结果是二次校验是否成功，成为static为1，不成功static为0

class RegisterView(APIView):
    def post(self, request, *args, **kwargs):
        dic = verification_code(request)
        return Response({"data": request.data, 'dic': dic})

接下来是verification_code

def verification_code(request):
    # 要求传的防重放，你也可以别的方式生成
    nonce = uuid.uuid4().hex + uuid.uuid1().hex
    # params的数据要按ASCII码表排序，具体排序规则看签名生成文档，上方有链接
    # user要有，可以为空
    params = {
        "captchaId": request.data['captchaId'],
        "nonce": nonce,
        "secretId": '你的安全凭证secretId',
        "timestamp": request.data['date'],
        "user": '',
        "validate": request.data["validate"],
        'version': 'v2',
    }
    # 生成签名，gen_signature在下面贴出来，这个在官方文档中也有
    # secretKey在安全凭证中
    has = gen_signature('你的secretKey', params)
    # 把签名加到数据中一起传给网易易盾
    params['signature'] = has
    url = "https://c.dun.163.com/api/v2/verify"
    params = urlencode(params).encode()
    f = urlopen(url, params)
    content = f.read()
    res = json.loads(content)
	#res拿到易盾返回的数据，以下是响应体示例
    # 响应体示例
    # {
    #     "result": true,
    #     "error": 0,
    #     "msg": "ok",
    #     "phone": "",
    #     "extraData": "",
    #     "captchaType": 2,
    #     "token": "xxx",
    #     "sdkReduce": false
    # }
    dic = {
        'static': 0
    }
    print(res)
    if res:
    	# result为True说明二次校验通过，给前端返回static为1
        if res['result']:
            dic['static'] = 1
            return dic
        else:
        	# 如果有问题，打印错误，错误码查看官方文档
            print("%s:%s" % (res.get('error'), res.get('msg')))
            return dic
    else:
        print("响应数据有问题")
        return dic
```

接下来是官方的签名算法：
- 和官方文档上是完全一样的，直接用就行
```python
# 生成签名信息
# Args:
#    secret_key 产品私钥
#    param_dict 接口请求参数，不包括signature参数


def gen_signature(secret_key, param_dict):
    param_str = ''.join([
        str(name) + str(param_dict[name] or '')
        for name
        in sorted(param_dict.keys())
    ])
    param_str += secret_key

    return hashlib.md5(param_str.encode("utf-8")).hexdigest()
```

搞定收工。。。