登录前的人机验证VAPTCHA

具体查看官方文档：https://www.vaptcha.com/document/install.html
验证流程
1、创建验证单元，获取VID和Key ，需要去官方系统创建VID和Key
2、将https://v.vaptcha.com/v3.js引入到你的页面。
3、将 VAPTCHA 初始化到你需要的位置
4、用户验证通过得到token，与表单数据一同提交到服务端。
5、服务端得到token后，向 VAPTCHA 服务器验证token的有效性，验证通过说明此次请求有效.

前端验证

1、引入前端 sdk:

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

2、引入验证框样式

<style>.vaptcha-init-main {display: table;width: 100%;height: 100%;background-color: #eeeeee;}
.vaptcha-init-loading {display: table-cell;vertical-align: middle;text-align: center;}
.vaptcha-init-loading > a {display: inline-block;width: 18px;height: 18px;border: none;}
.vaptcha-init-loading > a img {vertical-align: middle;}
.vaptcha-init-loading .vaptcha-text {font-family: sans-serif;font-size: 12px;color: #cccccc;vertical-align: middle;}

vaptcha({vid: "*****", // 验证单元idtype: "invisible", // 显示类型 隐藏式scene: 0, // 场景值offline_server: "localhost" //离线模式服务端地址，若尚未配置离线模式，请填写任意地址即可。}).then(function (vaptchaObj) {vaptchaVerifyObj = vaptchaObj; //将VAPTCHA验证实例保存到局部变量中vaptchaObj.listen("pass", function () {let token = vaptchaObj.getToken();let username= $('#username').val().trim();let password = $('#pwd').val().trim();login(userame,password,token);});
});

function login(username,password,token){var param ={"username":username,"password":password,"token":token}$.post("login/login",param,function(data){if(data.code == "success"){location.href = 'index.html';}else if(data.code == 'vaptcha'){//执行人机验证vaptchaVerifyObj.validate();}else{if(data.code == 'vaptchaFail'){layer.msg('人机验证失败，请重试', {icon: 5,offset: '40%'});}else{layer.msg('登录失败！', {icon: 5,offset: '40%'});}}//人机验证时当登录失败时重置if(data.code != 'success' || data.code!= 'vaptcha'){vaptchaVerifyObj.reset();}}
}

后端验证

@ResponseBody
@RequestMapping("/login")
public void login(HttpServletRequest request,HttpServletResponse response) throws Exception {HashMap<String,Object> result = new HashMap<String, Object>();String username = WebUtil.decode(request.getParameter("username"));String password = request.getParameter("password");String token = request.getParameter("token");if(StringUtils.isBlank(username) || StringUtils.isBlank(password)){result .put("code", "failed");return result;}//人机验证String ip = getIpAddress(request);HashMap<String,Object> vaptchaVerifyResult = vaptchaVerify(token,ip);if(!"success".equals(vaptchaVerifyResult.get("code"))){result .put("code", vaptchaVerifyResult.get("code"));return result ;}
}

获取客户端IP地址

public String getIpAddress(HttpServletRequest request) {  String ip = request.getHeader("x-forwarded-for");  if(ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  ip = request.getHeader("Proxy-Client-IP");  }  if(ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  ip = request.getHeader("WL-Proxy-Client-IP");  }  if(ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  ip = request.getRemoteAddr();  }  return ip;
}

人机验证

public HashMap<String,Object> vaptchaVerify(String token,String ip) {HashMap<String,Object> resultMap = new HashMap<String, Object>();//人机验证token为空if(StringUtils.isBlank(token)){resultMap.put("code", "vaptcha");return resultMap;}//对获取到的人机验证token进行正确性校验，防止机器人请求if(StringUtils.isNotBlank(token)){HashMap<String,String> map = new HashMap<String, String>();map.put("id", "*****");map.put("secretkey", "*****");map.put("scene", "0");map.put("token", token);map.put("ip", ip);try {String vaptchaInfo = getInfoPost(map,"http://0.vaptcha.com/verify");//请求api接口验证token是否正确//将请求结果字符串转jsonJSONObject vaptchaInfoJson = JSONObject.fromObject(vaptchaInfo);Integer success = (Integer)vaptchaInfoJson.get("success");//验证结果，1为通过，0为失败if(success != 1){resultMap.put("code", "vaptchaFail");return resultMap;}} catch (Exception e) {e.printStackTrace();resultMap.put("code", "vaptchaFail");return resultMap;}}resultMap.put("code", "success");return resultMap;}

调用接口获取数据

public String getInfoPost(HashMap<String, String> map, String URL) {// 创建Httpclient对象CloseableHttpClient httpclient = HttpClients.createDefault();CloseableHttpResponse response = null;String resultString = null;try {// 创建uriURIBuilder builder = new URIBuilder(URL);if (map != null) {for (String key : map.keySet()) {builder.addParameter(key, map.get(key).toString());}}URI uri = builder.build();// 创建http POST请求HttpPost httpPost = new HttpPost(uri);// 执行请求response = httpclient.execute(httpPost);// 判断返回状态是否为200if (response.getStatusLine().getStatusCode() == 200) {resultString = EntityUtils.toString(response.getEntity(),"UTF-8");}} catch (Exception e) {e.printStackTrace();} finally {try {if (response != null) {response.close();}httpclient.close();} catch (IOException e) {e.printStackTrace();}}return resultString;
}

本案例仅为初步使用vaptcha免费版，用于产品时，请根据官方手册配置离线模式，以及购买vaptcha高级版。

登录前的人机验证VAPTCHA相关推荐

前端-uniapp开发app登录逻辑（人机验证以及手机获取验证码）
1.逻辑梳理跳转登录页面后,显示需要手机登录.填写手机号->点击获取验证码->弹出人机验证页面->拼图成功->请求后端接口给手机发验证码->获取验证码文字变成60s计时 ...
Vaptcha验证码配置实现人机验证
个人资源与分享网站:http://xiaocaoshare.com/ 官网免费注册地址:https://www.vaptcha.com/ 登录后创建验证单元提交之后就可以获取vid和key 第一步, ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
解决英伟达登录的人机验证无法加载的问题，Validator failed to load,please check your browsersettings,such as ad blockers.
近来在给英伟达的TX2开发板刷新的JetPack,用的是官方的sdkmanager,第一步就需要我们先登录英伟达的账号,可是这个人机验证怎么样都加载不出来,梯子也搭了都不行,就像下面这个样子: 经过多 ...
使用 Amazon WAF 进行 Captcha 人机验证
一.背景 2021年的re:Invent大会发布了Amazon WAF 验证码功能即 Captcha.Captcha 是 Completely Automated Public Turing te ...
复制url直接能跳过验证_爬虫黑科技-绕开百度人机验证
是的你没有看错,我们要"搞"的对象就是百度指数这个网站,不知道你平时是否会应用到这里面的数据呢? 今天的主要目标就是使用无头浏览器登录百度指数网站,并且绕开它的人机验证,不知道你发 ...
智能验证码阿里云人机验证的使用（PHP）
尝试了一下午,弄成功了下阿里云的人机验证功能,感觉文档说得有点跳脱,做个记录. 现在的验证码越来越简单人性化,阿里云的人机验证结合了鼠标轨迹记录获取,点击触点分析等,使得原来需要劳心费神输文字点汉字的 ...
python爬虫百度安全验证_爬虫黑科技-绕开百度人机验证
是的你没有看错,我们要"搞"的对象就是百度指数这个网站,不知道你平时是否会应用到这里面的数据呢? 今天的主要目标就是使用无头浏览器登录百度指数网站,并且绕开它的人机验证,不知道你发 ...
python 无头模式绕过检测_python爬虫反反爬虫有绝技，轻松绕开百度人机验证！...
你可能已经了解到了无头浏览器的作用以及使用的方法,那么本篇文章就让我们一起用无头浏览器做点事情. 是的你没有看错,我们要"搞"的对象就是百度指数这个网站,不知道你平时是否会应用到这 ...

登录前的人机验证VAPTCHA

前端验证

后端验证

登录前的人机验证VAPTCHA相关推荐

最新文章

热门文章