Vue中使用腾讯滑块验证码

前言

为了防止黑客恶意注册，之前使用了图片验证码做了预防，后面了解到可以使用图片识别技术，因此需要接入滑动验证，选择的是腾讯的滑块验证。

原理图

简单的画了一张草图，就是借助了第三方实现了验证的准确性。

申请

登录腾讯云后台，进入控制台，

新建验证

主要是使用到下面这两个参数

前端

引入js

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

放一个激活元素button

<button id="TencentCaptcha"
        data-appid="申请的APPID"
        data-cbfn="callback"
>验证</button>

滑动滑块后的回调方法

window.callback = function(res){
    
    
    console.log(res)
    // res（用户主动关闭验证码）= {ret: 2, ticket: null}
    // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
    if(res.ret === 0){
    
    
        alert(res.ticket)   // 票据
    }
}

本来想的是在回调函数中成功以后，把按钮的字变为验证成功，但是
因为框架使用的是vant，里面使用Jq设置样式不成功。因此做了如下改动：
触发容器改成如下:

忽略上面除引入js那一步的操作，使用定制接入, js如下

var captcha1=   new TencentCaptcha(
                        document.getElementById('TencentCaptcha'),
                        'appid',
                        function(res) {
    
    
                          //这里的res就是你滑动成功后，腾讯服务器返回给你的消息，包含了需要到服务器端验证的字符串。
                                    randstr:res.randstr,
                                    ticket:res.ticket
                             if(res.ret==0){
    
    

                                axios.post('', {
    
    
                                 
                                }).then(function (response) {
    
    
                                    const obj = response.data;
                                });
                            }
                        },
                        {
    
     bizState: '自定义透传参数' }
                    );
                    captcha1.show(); // 显示验证码

服务端验证

           $ticket = input('ticket');
                $post_data = [
                    'aid' => '申请截图中第一个参数',
                    'AppSecretKey' => '申请截图中的第二个参数',
                    'Ticket' => $ticket, //客户端传过来
                    'Randstr' => input('randstr'),//客户端传过来的
                    'UserIP' => $this->ip(),
                ];
                $parms = http_build_query($post_data);
                $url = 'https://ssl.captcha.qq.com/ticket/verify?' . $parms;
                $res = curl_get($url);
                $result = json_decode($res, true);

后台统计

我们可以看到请求的次数，当一个ip恶意去访问这个地址的时候，在几次成功以后，会出现验证不成功，会记录在这里。