0.前提准备
a. 腾讯云账号(微扫码就可以登录)
b. 快速进入防水墙文档，点击下方链接
防水墙(验证码)文档
https://cloud.tencent.com/document/product/1110/36841
c.后端：自备django(版本最好在2x)
e, 第一次使用防水墙，会有一个免费的套餐，可以用七天，获取CaptchaAppId的时候，会有一个弹窗，点击领取即可。
前端：axios(直接入门)
axios.post('地址', {key: '携带的数据一', key2: '携带的数据二'})
.then((res) => {
}) // 成功以后会自动触发该函数
.cache((errors) => {
})// 失败会自动触发该函数1.后端准备
a. 生成一个app(settings里面注册一下)
b. 在urls.py文件中生成一个路由
path('tcaptcha_v1/', views.TCaptchaView, name='tcaptcha_v1'),c.创建一个html：captcha_text.html
d. 在view.py视图里面写一个视图
def TCaptchaView(request):
'''
tencent防水墙测试
:param request:
:return:
'''
return render(request, 'captcha_text.html')2.前端准备
a.<!--1.生成一个普通的按钮，添加一些属性 CaptchaAppId后面有获取的步骤 -->
<!--1.生成一个普通的按钮，添加一些属性 -->
<!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
<!--id : (不可变) 元素的 ID, 值必须是 'TencentCaptcha'-->
<!--data-appid : (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取,
验证码控制台页面内【图形验证】>【验证列表】进行查看 。
如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
<!--data-cbfn : (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
<!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
<button onclick="captcha_show()"
id="TencentCaptcha"
data-appid="你的验证码CaptchaAppId"
data-cbfn="callbackName"
data-biz-state="data-biz-state"
type="button">登录
</button>b.<!-- 2.配置js文件 -->
<!-- 如果script是在head中引入 onerror的函数需等domready再绑定元素事件 在body中加载无需等待 -->
<!-- 2.配置js文件/也可以下载到本地引用 -->
<script src="https://ssl.captcha.qq.com/TCaptcha.js" onerror="TCaptchaLoadError()"></script>c.获取CaptchaAppId(如果你有了，可跳过)
e.// 3.配置发送信息(CaptchaAppId)给button按钮添加一个onclick事件
<script>
// 3.配置发送信息(CaptchaAppId)给button按钮添加一个onclick事件
function captcha_show() {
var captcha1 = new TencentCaptcha('2057744795', function (res) {
console.log(res)
})
captcha1.show();
}
</script>图示：
f.欧了，接下来点击访问页面，点击按钮就能看到防水墙了
三，后端校验的原因
我粗略的解释一下，为什么要有后端校验，
a.上面的这些操作，仅仅只是前端跟腾讯云防水墙之间的联系，前端发送请求，还记得我们引入的那个js吗，通过他进行发送，只有成功的滑动进卡槽，才会触发回调函数，他返回一个res，
返回的res
b. 我们前面说了，目前为止，我们仅仅只是前端跟防水墙进行交流，成功返回一个res，不成功，什么都不返回，那么问题来了，我们的后端不知道，此次校验到底成功没有，如果当前用户没有成功滑动，那么后端无需给予数据。
四：后端校验
a. 后端文档(python)
后端校验文档https://007.qq.com/python-access.html?ADTAG=acces.start
b. 校验的时候，前端向后端发送请求，把数据携带过去，在由后端向防水墙发送请求，进行校验
| 字段名 | 描述 |
|---|---|
| aid (必填) | 我们可以手动配置，无需前端发送 |
| AppSecretKey (必填) | 我们可以手动配置，无需前端发送 |
| Ticket (必填) | 验证码客户端验证回调的票据(动态生成，必须前端携带过来) |
| Randstr (必填) | 验证码客户端验证回调的随机串(动态生成，必须前端携带过来) |
| UserIP (必填) | 提交验证的用户的IP地址(我们可以手动配置，无需前端发送) |
c. 后端校验代码，文档是用python2.7写的，我改了一份python3的
1. 前端修改(我们前端请求发送到后端，用axios。ajax发送会报错，原因是我们一开始，引入防水墙的那个js文件，不可以与ajax混用使用)
2.前端html：我添加了一个input，其实没有什么用，后端我写完了以后，才发现忘记校验用户名了，其他的没有动
3. js部分，添加了axios，用post方法，发送到后端的函数(我封装好了，如果你想在后端不分离的项目中使用，直接在对应的地方写逻辑就行)
4. 前端完整代码如下，现在的captcha_text.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.生成一个普通的按钮，添加一些属性 -->
<!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
<!--id : (不可变) 元素的 ID, 值必须是 'TencentCaptcha'-->
<!--data-appid : (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取,
验证码控制台页面内【图形验证】>【验证列表】进行查看 。
如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
<!--data-cbfn : (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
<!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
用户名：<input type="text">
<button onclick="captcha_show()"
id="TencentCaptcha"
data-appid="你的验证码CaptchaAppId"
data-cbfn="callbackName"
data-biz-state="data-biz-state"
type="button">登录
</button>
<!-- 如果script是在head中引入 onerror的函数需等domready再绑定元素事件 在body中加载无需等待 -->
<!-- 2.配置js文件 -->
<script src="https://ssl.captcha.qq.com/TCaptcha.js" onerror="TCaptchaLoadError()"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 3.配置发送信息(CaptchaAppId)给button按钮添加一个onclick事件
function captcha_show() {
var captcha1 = new TencentCaptcha('你的验证码CaptchaAppId', (res) => {
// 如果成功划开,会返回一个ret: 0
if (res.ret === 0) {
// 点击button按钮发送ajax到后台(携带票据/post请求)
verify_captcha(res.ticket, res.randstr);
}
})
// 防水墙出现的代码
captcha1.show();
}
function verify_captcha(ticket, randstr) {
axios.post('{% url 'tcaptcha_v1' %}',
{
ticket: ticket, // 票据
randstr: randstr, // 随机字符串
}
)
.then((res) => { // 成功以后会自动触发该函数
console.log(res.data.static)
if (res.data.static === 1) {
// 该用户成功通过滑块验证
alert('该用户成功通过滑块验证')
} else {
// 没有成功划开
alert('xxx来了')
}
})
.cache((errors) => { // 失败会自动触发该函数
console.log('发送错误')
})
}
</script>
</body>
</html>5.后端，在视图里面加入了一点小逻辑，以及增加了，一个utils.py文件
view.py 完整代码
from django.shortcuts import render
from app01.utils import txrequest
from django.http import JsonResponse
import json
# Create your views here.
def TCaptchaView(request):
'''
tencent防水墙测试
:param request:
:return:
'''
if request.method == 'GET':
return render(request, 'captcha_text.html')
dic = {
'static': 0
}
ret = json.loads(request.body)
# print(ret.get)
# 前端发送过来数据(post)
Ticket, Randstr = ret.get('ticket'), ret.get('randstr')
ret = txrequest(Ticket, Randstr, request)
if ret:
# 如果校验成功，返回一个static=1
dic['static'] = 1
return JsonResponse(dic)
return JsonResponse(dic)
6.在apps里面创建一个utils.py
需要找到你自己的CaptchaAppId，AppSecretKey，AppSecretKey就在CaptchaAppId的下面
import json
from urllib.parse import urlencode
from urllib.request import urlopen
def txrequest(Ticket, Randstr, request):
params = {
"aid": '你的验证码CaptchaAppId',
"AppSecretKey": '你的AppSecretKey',
"Ticket": Ticket,
"Randstr": Randstr,
"UserIP": request.META.get('REMOTE_ADDR') # ip地址在META里面
}
url = "https://ssl.captcha.qq.com/ticket/verify"
params = urlencode(params).encode()
f = urlopen(url, params)
content = f.read()
res = json.loads(content)
# {'response': '1', 'evil_level': '0', 'err_msg': 'OK'}
if res:
error_code = res.get('response')
if error_code == '1':
return True
else:
print("%s:%s" % (res.get('response'), res.get('err_msg')))
return False
else:
print("验证票据的响应数据有问题")
return False
7.欧了
3496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
