admin管理员组文章数量:1567526
腾讯验证码功能开通
官网相关链接:腾讯T-Sec 天御 验证码
腾讯防水墙
点击进入腾讯T-Sec 天御 验证码注册登录后,送一周20000条验证测试数据。
可以先体验一下
在图形验证中创建一个验证
新建web验证
然后,开工。。。。
前端
官方接入文档在这里:web前端接入
接下来需要用到你创建验证的CaptchaAppId
你可能需要的云API API Explorer
简单来说就是等前端好了后,通过前端滑动验证码拿到相关数据填到API Explorer中验证是否有效
到vue项目的static中的index.html中添加js
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web 前端接入示例</title>
<!-- 验证码程序依赖(必须)。请勿修改以下程序依赖,如使用本地缓存,或通过其他手段规避加载,会影响程序的正常使用。 -->
<script src="https://ssl.captcha.qq/TCaptcha.js"></script>
</head>
vue的代码块,下面有漂亮的截图。代码块比截图多了句console.log(data),用在没有后端的时候简单查一下数据,验证一下。
<template>
<div>
<h2>腾讯</h2>
<div class="a">
<p><input type="text" v-model.trim="username" placeholder="用户名"></p>
<p><input type="password" v-model="password" placeholder="密码"></p>
<p>
<!-- 点击按钮弹出图形验证 -->
<button @click="varify"> 验证</button>
</p>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data(){
return{
username:'',
password:'',
}
},
methods: {
varify() {
let appid = '你的CaptchaAppId';
// 创建TencenCaptcha实例
let captcha = new TencentCaptcha(appid, (res) => {
// res(用户主动关闭验证码)= {ret: 2, ticket: null}
// res(用户滑动验证成功)= {ret: 0, ticket: "String", randstr: "String"}
if (res.ret === 0) {
// 滑动验证成功后,给后端发送数据,CaptchaAppld可以不传
// name和password 根据需求和逻辑传
// Ticket是必须的票据,大概长这样WrBrJkE7Ohu_vMdXKUBx3O7Pn9kHbG6Nv7WfUr6P
// Randstr是必须的前端回调函数返回的随机字符串,大概长这样“@tpR”
var data = {
Ticket: res.ticket,
CaptchaAppld: res.appid,
Randstr: res.randstr,
name: this.username,
password: this.password,
};
// 传后台前可以加句console.log(data)看一下数据,验证一下
console.log(data)
// 把数据传给后端,如果没写后端,可以先用腾讯的云API验证
axios.post('http://127.0.0.1:8000/api/',data).then((res) => {
// 后端返回的数据通过了=1 , else是不通过, catch是数据发送有问题
if (res.data.dic.static === 1){
alert('通过了验证')
console.log(res)
}else {
alert('没有成功划开?')
}
}).catch((errors) =>{
console.log('发送错误')
})
} else {
}
});
// 显示验证码
captcha.show();
}
}
}
</script>
后端
粗略的解释一下,为什么要有后端校验,
a.上面的这些操作,仅仅只是前端跟腾讯云防水墙之间的联系,前端发送请求,还记得我们引入的那个js吗,通过他进行发送,只有成功的滑动进卡槽,才会触发回调函数,他返回一个res,
b. 我们前面说了,目前为止,我们仅仅只是前端跟防水墙进行交流,成功返回一个res,不成功,什么都不返回,那么问题来了,我们的后端不知道,此次校验到底成功没有,如果当前用户没有成功滑动,那么后端无需给予数据。
官方接入文档在这里:python后端防水墙文档
sdk中心
drf接收前端传来的post数据,这里没有用到数据库,所以只是继承了APIView
dic是主要返回给前端的图片验证码结果
from django.shortcuts import render
# Create your views here.
from rest_framework.views import APIView
from rest_framework.response import Response
class RegisterView(APIView):
def post(self, request, *args, **kwargs):
dic = TCaptchaView(request)
print(dic)
return Response({"data": request.data, "dic": dic})
接下来是处理验证码的TCaptchaView方法和txrequest方法
以下是TCaptchaView方法:
from api.utils.verification_code import txrequest
def TCaptchaView(request):
if request.method == 'GET':
return render(request, 'captcha_text.html')
dic = {
'static': 0
}
# 调用txrequest,单独创建了一个utils文件夹,里面写了verification_code.py
ret = txrequest(request)
if ret:
# 如果校验成功,返回一个static=1
dic['static'] = 1
return dic
return dic
以下是txrequest方法:【上面的TCaptchaView调用了此方法】
下面有代码
创建了utils文件夹,创建了verification_code.py 写这个txrequest
import json
from urllib.parse import urlencode
from urllib.request import urlopen
def txrequest(request):
# 前端传过来的数据和腾讯控制台的密匙
params = {
"aid": '你的CaptchaAppId',
# AppSecretKey就在CaptchaAppId下面
"AppSecretKey": '你的AppSecretKey',
"Ticket": request.data["Ticket"],
"Randstr": request.data["Randstr"],
"UserIP": request.META.get('REMOTE_ADDR') # ip地址在META里面
}
# 以下到返回res的部分是到腾讯验证防水墙,前端传来的验证票据对不对
url = "https://ssl.captcha.qq/ticket/verify"
params = urlencode(params).encode()
f = urlopen(url, params)
content = f.read()
res = json.loads(content)
# 如果对就返回true
# {'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
到这里,还没有完
在前后端交互数据的时候,因为是分离开发的,你有可能会遇到跨域的问题。
解决办法此处选择用中间件解决
项目下创建一个middlewares.py
前端发送axios的时候,遇到哪个跨域报错,就添加哪个
from django.utils.deprecation import MiddlewareMixin
class Mycors(MiddlewareMixin):
def process_response(self, request, response):
# 解决简单请求的跨域问题
response['Access-Control-Allow-Origin'] = "*"
# 解决复杂请求的跨域问题
if request.method == "OPTIONS":
response["Access-Control-Allow-Methods"] = "PUT,DELETE"
response["Access-Control-Allow-Headers"] = "content-type"
return response
到settings.py中配置一下中间件
验证码完成
可以去添加其他逻辑喽。。。。
以上内容,有部分引用腾讯防水墙的使用(python_web)。感谢作者,引用前我已尽绵薄之力打赏赞助过文章,大家有需要也可以参考一下这个链接共同学习!
版权声明:本文标题:腾讯云图片(行为)验证码,腾讯天御验证码,前vue后python端配置。前后端分离drf下的 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725785732a1042655.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论