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

个人资源与分享网站：http://xiaocaoshare.com/

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

Vaptcha验证码配置实现人机验证相关推荐

智能验证码阿里云人机验证的使用（PHP）
尝试了一下午,弄成功了下阿里云的人机验证功能,感觉文档说得有点跳脱,做个记录. 现在的验证码越来越简单人性化,阿里云的人机验证结合了鼠标轨迹记录获取,点击触点分析等,使得原来需要劳心费神输文字点汉字的 ...
使用 Amazon WAF 进行 Captcha 人机验证
一.背景 2021年的re:Invent大会发布了Amazon WAF 验证码功能即 Captcha.Captcha 是 Completely Automated Public Turing te ...
登录前的人机验证VAPTCHA
具体查看官方文档:https://www.vaptcha.com/document/install.html 验证流程 1.创建验证单元,获取VID和Key ,需要去官方系统创建VID和Key 2.将 ...
前端-uniapp开发app登录逻辑（人机验证以及手机获取验证码）
1.逻辑梳理跳转登录页面后,显示需要手机登录.填写手机号->点击获取验证码->弹出人机验证页面->拼图成功->请求后端接口给手机发验证码->获取验证码文字变成60s计时 ...
Google 人机验证(reCaptcha)无法显示解决方案
Google 人机验证无法显示解决方案第一步安装插件 Chrome/Edge 电脑版 Firefox 电脑版第二步配置插件原理参考文章前言:为了防止机器人攻击,国外很多网站都使用了 Go ...
GOOGLE 人机验证(RECAPTCHA)无法显示解决方案(可解决大多数 CSP 问题)
前言: 为了防止机器人攻击,国外很多网站都使用了 Google reCaptcha 验证码.reCaptcha 对于国外用户非常的友好,但是-对于国内用户就不怎么友好了.究其原因,则是国内网络全线屏蔽 ...
GOOGLE 人机验证(RECAPTCHA)无法显示解决方案(转)
前言: 为了防止机器人攻击,国外很多网站都使用了 Google reCaptcha 验证码.reCaptcha 对于国外用户非常的友好,但是-对于国内用户就不怎么友好了.究其原因,则是国内网络全线屏蔽 ...
阿里云人机验证(无痕)完整流程以及注意事项
阿里云人机验证(无痕)完整流程及注意事项 1.文档链接:阿里云人机验证文档 2.无痕验证流程图: 3.开发注意事项前端注意事项: 1.前端代码在购买服务后可以直接获取,或者参考官方文档内代码 2.前 ...
浅谈如何使用Google reCAPTCHA进行人机验证
reCAPTCHA是Google公司推出的一项验证服务,使用十分方便快捷,在国外许多网站上均有使用.它与许多其他的人机验证方式不同,它极少需要用户进行各种识图验证. 它的使用方式如下如所示,只需勾选复 ...

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

Vaptcha验证码配置实现人机验证相关推荐

最新文章

热门文章