官网免费注册地址: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 进行人机验证。