使用VAPTCHA2.0手势验证码加固登录页面

使用VAPTCHA 2.0手势验证码加固登录页面 – 基础

1. 开发前准备

a) 注册VAPTCHA账号官网：https://www.vaptcha.com/
b) 根据需求，增加验证单元（KEY千万不要泄露，“场景”根据需求自定义）

2. 部署代码（本次以点击式为例）

a) 准备登录界面Login.html，在登录表单（id=”login-form” method=”post”）下，在原有的账号input（name=”Account”）和密码input（name=”Password”）后面放置VAPTCHA的加载框和加载动画。

<html>
 <head></head>
 <body>
  <div id="vaptchaContainer" style="width: 220px;height: 40px;margin: 10px;"> 
   <div class="vaptcha-init-main"> 
    <div class="vaptcha-init-loading"> 
     <a href="/" target="_blank"> <img src="https://r.vaptcha.com/public/img/vaptcha-loading.gif" /> </a> 
     <span class="vaptcha-text">Vaptcha启动中...</span> 
    </div> 
   </div> 
  </div>
 </body>
</html>

官方是这么说的：

<!-- 点击式按钮建议高度介于36px与46px  -->
<!-- 嵌入式仅需设置宽度，高度根据宽度自适应，最小宽度为200px -->
<div id="vaptchaContainer" style="width: 300px;height: 36px;">
<!--vaptcha-container是用来引入VAPTCHA的容器，下面代码为预加载动画，仅供参考-->
    <div class="vaptcha-init-main">
        <div class="vaptcha-init-loading">
            <a href="/" target="_blank">
                <img src="https://r.vaptcha.com/
public/img/vaptcha-loading.gif" />
            </a>
            <span class="vaptcha-text">Vaptcha启动中...</span>
        </div>
    </div>
</div>
<script src="https://v.vaptcha.com/v3.js"></script>
<script>
vaptcha({
    //配置参数
    vid: '****', // 验证单元id
    type: 'click', // 展现类型 点击式
    container: '#vaptchaContainer', // 按钮容器，可为Element 或者 selector
    ... //其他配置参数省略
}).then(function (vaptchaObj) {
    vaptchaObj.render()// 调用验证实例 vaptchaObj 的 render 方法加载验证按钮
    ... //其他事件处理
})
</script>

所以我们放到页面中以后，就是这样的：

b) 上图中，可能已经注意到了容器下面有两个script标签，现在，我们需要引用vaptcha的js和配置初始化代码。
引用VACTPHA新版v3.js

<script src="https://v.vaptcha.com/v3.js"></script>

参考官方手册：

配置初始化代码：

var obj;
vaptcha({
    vid: '5dc3efcb15347d90a5084298',
    // 验证单元id
    type: 'click',
    // 显示类型 点击式
    scene: 1,
    // 场景值 默认0
    container: '#vaptchaContainer',
    // 容器，可为Element 或者 selector
    offline_server: 'https://www.codecommunity.cn/',
    //离线模式服务端地址
    lang: 'zh-CN',
    https: true,
    color: 'rgb(' + normal_bgcolor + ')'
}).then(function(vaptchaObj) {
    obj = vaptchaObj; //将VAPTCHA验证实例保存到局部变量中
    vaptchaObj.render(); // 调用验证实例 vpObj 的 render 方法加载验证按钮
    //获取token的方式一：
    vaptchaObj.renderTokenInput('.login-form'); //以form的方式提交数据时，使用此函数向表单添加token值
    //关闭验证弹窗时触发
    vaptchaObj.listen('close',
    function() {
        //验证弹窗关闭触发
    })
})

官方手册有详细解释：

i. 需要注意的一点，在v2版本中验证场景一般要首位补0，比如01、02，但在v3版本中不需要进行补零，例如1、2。
ii. 离线模式服务器地址本次教程不做讲解，但该参数官方不允许为空，直接填写自己的域名地址即可。

c) 配置完成后，写登录按钮的事件，注意的一点，上面代码可以看到我用的是验证单元验证通过后向表单添加token值，实际上，验证单元完成后，表单会增加一个看不到的input（name=” vaptcha_token” value=”验证后的token”），我们不希望用户不输入表单内容就直接提交，验证input是否为空的方法很多，这里用数组进行操作。

function sub() {
    //因为下面的数组操作时也会验证这个input，所以我们抢先一步对此进行验证，如果觉得麻烦，可以直接在下面循环处进行验证
    if (obj.getToken() == null || obj.getToken() === "") {
        $('.Main_Login_Text').html("请先完成验证");
        return false;
    }
    //获取表单所有的可输入组件
    let form = $('#login-form').serializeArray();
    let flag = -1; //也可以写 =1，后面的else删掉。
    $.each(form,
    function(i, item) {
        if (item['value'] === '') { //循环验证是否为空
            $('.Main_Login_Text').html("账号或密码不能为空");
            flag = -1;
            return false;
        } else {
            flag = 1;
        }
    });
    if (flag === 1) {
        $('#login-form').submit(); //表单没有空，提交给服务器验证
    }
}

d) 截止到现在，登录Login.html内容全部完成了。

3. 开始部署服务器二次验证代码（本次demo用的是php7.0版本）：

a) 官方文档中提示用post向服务器发送验证token请求，url地址：http://0.vaptcha.com/verify
b) 这里附上php发送post请求的代码（采用file_get_contents方式）：

private function send_post($url, $post_data)
    {
    $postdata = http_build_query($post_data);
    $options = array(
                'http' => array(
                    'method' => 'POST',
                    'header' => 'Content-type:application/x-www-form-urlencoded',
                    'content' => $postdata,
                    'timeout' => 10 * 60 // 超时时间（单位:s）
    )
            );
    $context = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    return $result;
}

c) 在服务端一定要再次验证各项数据，包括是否是空，或者是否包含特殊字符，尤其要注意过滤一下单引号、双引号和”—“符号（可以简单使用addslashes函数进行初步过滤），防止不法分子进行sql注入。

if ($Account != "" && $Password != "" && $Token != "") {
    //传参前已对变量进行了过滤验证，这里简单验证一下即可
    if ($Token != "") {
        $vaptcha_url = "http://0.vaptcha.com/verify";
        $post_data = array(
                            'id' => '换成自己的验证单元vid',
                            'secretkey' => '换成自己的验证单元key',
                            'scene' => '1',
                            'token' => $Token,
                            'ip' => $_SERVER['REMOTE_ADDR'],
                        );
        $result = json_decode($this::send_post($vaptcha_url, $post_data), true);
        if ($result['success'] == 1 && $result['score'] >= 1) {
            //验证通过，执行的代码
        } else {
            //验证失败，执行的代码
        }
    }
}

4. 当你已经进行到了这一步，那么恭喜，你的登录界面已经可以上传测试了。

5. 这里附上官方手册地址和代码demo：

a) 官方手册地址：https://www.vaptcha.com/document/install.html

b) 代码demo：

<form action="Login.html" id="login-form" method="post">
    <input class="Main_Login_Input" name="Account" placeholder="账号/邮箱/手机号" required=required type="text" value="">
    <input class="Main_Login_Input" name="Password" placeholder="登录密码" required=required type="password" value="">
    <div id="vaptchaContainer" style="width: 220px;height: 40px;margin: 10px;">
    <div class="vaptcha-init-main">
        <div class="vaptcha-init-loading">
            <a href="/" target="_blank">
            <img src="https://r.vaptcha.com/public/img/vaptcha-loading.gif"/>
            </a>
            <span class="vaptcha-text">Vaptcha启动中...</span>
        </div>
    </div>
</div>
<script src="https://v.vaptcha.com/v3.js"></script>
<script>
var obj;
vaptcha({
    vid: '5dc3efcb15347d90a5084298', // 验证单元id
    type: 'click', // 显示类型 点击式
    scene: 1, // 场景值 默认0
    container: '#vaptchaContainer', // 容器，可为Element 或者 selector
    offline_server: 'https://www.codecommunity.cn/', //离线模式服务端地址
    lang: 'zh-CN',
    https: true,
    color: 'rgb(' + normal_bgcolor + ')'
}).then(function (vaptchaObj) {
    obj = vaptchaObj;//将VAPTCHA验证实例保存到局部变量中
    vaptchaObj.render();// 调用验证实例 vpObj 的 render 方法加载验证按钮
    //获取token的方式一：
    vaptchaObj.renderTokenInput('.login-form');//以form的方式提交数据时，使用此函数向表单添加token值
    //关闭验证弹窗时触发
    vaptchaObj.listen('close', function () {
    //验证弹窗关闭触发
    })
})
</script>
<span class="Main_Login_Input_Span">
    <a class="Main_Login_Input_Span_Reg_A" href="#">忘记密码？</a>
</span>
<button class="Main_Login_Input_Button" onclick="sub()" type="button" value="login" name="type">登录</button>
<span class="Main_Login_Input_Span_Reg">
    <a class="Main_Login_Input_Span_Reg_A" href="Register.html">注册账号</a>
</span>
</form>

if ($Account != "" && $Password != "" && $Token != "") {
    if ($Token != "") {
        $vaptcha_url = "http://0.vaptcha.com/verify";
        $post_data = array(
                            'id' => '换成自己的验证单元vid',
                            'secretkey' => '换成自己的验证单元key',
                            'scene' => '1',
                            'token' => $Token,
                            'ip' => $_SERVER['REMOTE_ADDR'],
                        );
        $result = json_decode($this::send_post($vaptcha_url, $post_data), true);
        if ($result['success'] == 1 && $result['score'] >= 1) {
            //验证通过
        } else {
            //验证失败
        }
    }
}

6. 最后附上一句：本例程仅为初步使用vaptcha免费版，用于产品时，请根据官方手册配置离线模式，以及购买vaptcha高级版。

7. 感谢！

Codecommunity.cn
Shawna
2020年3月16日