请选择 进入手机版 | 继续访问电脑版

Web前端登录拼图验证功能,看你是人还是机器

[复制链接]
奇奇女 发表于 2020-12-31 20:26:30 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

前言
相信各人经常在各种网站上登录、注册、下发短信、运动等会看到,系统会弹出来一个滑块验证,让你把一个滑块滑到指定空缺的位置(尚有其他种形式,好比按顺序点击文字或图案等等),系统会校验,校验正确则登录乐成,否则纵然账号暗码输入正确也无法登录。这样做主要是为了系统更安全,减少被呆板模拟登录行为粉碎网站。本日就来白嫖一下腾讯云提供的图片验证功能。
验证时序图


实现
前端代码
1、div代码
  1. 登录
复制代码
2、js代码
  1. [/code] [code]window.callback = function(res){        if(res.ret === 0){            var data = "username="+vm.username+"&password="+vm.password+"&ticket="+res.ticket+"&randstr="+res.randstr;            $.ajax({                type: "POST",                url: "sys/login",                data: data,                dataType: "json",                success: function (result) {                    if(result.code == 0){//登录乐成                        parent.location.href ='index.html';                    }else{                        vm.error = true;                        vm.errorMsg = result.msg;                    }                }            });        }    };
复制代码
后端代码
  1. @Value("${tencent.captcha.url}")private String url;@Value("${tencent.captcha.aid}")private String aid;@Value("${tencent.captcha.AppSecretKey}")private String appSecretKey;@ResponseBody@PostMapping(value = "/sys/login")public R login(String username, String password, String ticket, String randstr, HttpServletRequest request) {  try{    Subject subject = ShiroUtils.getSubject();    UsernamePasswordToken token = new UsernamePasswordToken(username, password);    subject.login(token);  }catch (UnknownAccountException e) {    return R.error(e.getMessage());  }catch (IncorrectCredentialsException e) {    return R.error("账号或暗码不正确");  }catch (LockedAccountException e) {    return R.error("账号已被锁定,请联系管理员");  }catch (AuthenticationException e) {    return R.error("账户验证失败");  }  HttpMethod method =HttpMethod.POST;  MultiValueMap params= new LinkedMultiValueMap();  params.add("aid", aid);  params.add("AppSecretKey", appSecretKey);  params.add("Ticket", ticket);  params.add("Randstr", randstr);  params.add("UserIP", IPUtils.getIpAddr(request));  String msg = httpClient.client(url,method,params);  JSONObject json = JSONObject.parseObject(msg);  String response = (String) json.get("response");  String evilLevel = (String) json.get("evil_level");  String errMsg = (String) json.get("err_msg");  if("1".equals(response)){    return R.ok();  }else {    return R.error("验证失败");  }}
复制代码
参数设置,aid和AppSecretKey在腾讯云后台获取
  1. tencent:  captcha:    url: https://ssl.captcha.qq.com/ticket/verify    aid: ***********    AppSecretKey: ***********
复制代码
效果




来源:https://blog.csdn.net/LiuAustin/article/details/111933067
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )