腾讯云图片(行为)验证码，腾讯天御验证码，前vue后python端配置。前后端分离drf下的

Simba_44

已于 2022-05-05 12:16:38 修改

阅读量2k

点赞数 2

分类专栏：第三方API 文章标签： python vue.js 腾讯云 django 前端

于 2022-03-23 03:14:21 首次发布

本文链接：https://blog.csdn.net/weixin_44594984/article/details/123675962

版权

第三方API 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

腾讯验证码功能开通

官网相关链接：腾讯T-Sec 天御验证码
 腾讯防水墙
点击进入腾讯T-Sec 天御验证码注册登录后，送一周20000条验证测试数据。

可以先体验一下
在线体验
在图形验证中创建一个验证
新建验证
新建web验证
新建流程

然后，开工。。。。

前端

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

接下来需要用到你创建验证的CaptchaAppId
需要的ID在这

你可能需要的云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.com/TCaptcha.js"></script>
</head>

添加js

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>

前端图1
前端图2

后端

粗略的解释一下，为什么要有后端校验，

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})

这是接收处理post
接下来是处理验证码的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.com/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)。感谢作者，引用前我已尽绵薄之力打赏赞助过文章，大家有需要也可以参考一下这个链接共同学习！

Simba_44

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
腾讯云图片(行为)验证码，腾讯天御验证码，前vue后python端配置。前后端分离drf下的

腾讯验证码功能开通官网相关链接：腾讯T-Sec 天御验证码腾讯防水墙点击进入腾讯T-Sec 天御验证码注册登录后，送一周20000条验证测试数据。可以先体验一下在图形验证中创建一个验证新建web验证然后，开工。。。。前端官方接入文档在这里：web前端接入接下来需要用到你创建验证的CaptchaAppId你可能需要的云API API Explorer简单来说就是等前端好了后，通过前端滑动验证码拿到相关数据填到API Explorer中验证是否有效到vue项目的stati
复制链接

扫一扫