Vaptcha验证码配置实现人机验证

官网免费注册地址：https://www.vaptcha.com/

登录后创建验证单元

提交之后就可以获取vid和key

第一步，引入 vaptcha 提供的 js 脚本文件。

<script src="https://cdn.vaptcha.com/v2.js"></script>

第二步，在需要显示验证码的地方，加入下面的代码：

<div data-vid="你的vid" style="width: 300px;height: 36px;">
    <div class="vaptcha-init-main">
        <div class="vaptcha-init-loading">
            <a href="/" target="_blank">
                <img src="https://cdn.vaptcha.com/vaptcha-loading.gif" />
            </a>
            <span class="vaptcha-text">Vaptcha启动中...</span>
        </div>
    </div>
</div>

vaptcha 会生成 vaptcha_token 参数，在你提交表单的时候，提交给你的后台。类似如下：

window.vaptcha({
  type: 'invisible'
  //其他配置参数忽略
}).then(function(vaptchaObj){
  obj = vaptchaObj;//将VAPTCHA验证实例保存到局部变量中
  // 验证码加载完成后将事件绑定到按钮
  // 调用validate()方法的伪代码，将该方法的调用绑定在'click'事件上，实际开发中需要更改为合适的调用方式
  vaptchaObj.listen('success', function() {
     data = {
      //表单数据
      token: vaptchaObj.getToken()
    }
    $.post('/login')
  })
  $('#login-button').on('click',function(){
    //执行验证前需要先判断验证实例是否加载完成
    vaptchaObj.validate();
  })
  $('#reset').on('click',function(){
    //执行验证前需要先判断验证实例是否加载完成
    vaptchaObj.reset();
  })
})

token 提交到后台后，你可以使用 RestTemplate 将 token 等参数提交到 http://api.vaptcha.com/v2/validate 进行人机验证。