Java滑动验证码【前端部分】

Java滑动验证码【前端】

实现思路

1、请求后端获得背景图、滑块、x、y、误差范围bound
2、将滑块设置到对应的位置：top = y
3、添加鼠标滑动事件

实现代码

后端请求（Controller）
SliderVerifyController

/*** @author: Yang* @create: 2022-10-25* @Description: 滑动验证*/
@RestController
@RequestMapping("/sliderVerify")
public class SliderVerifyController {@Resourceprivate SliderVerifyService sliderVerifyService;@GetMappingpublic ResponseResult generateSliderVerify() {return sliderVerifyService.generateSliderVerify();}
}

SliderVerifyServiceImpl

/*** @author: Yang* @create: 2022-10-25* @Description:*/
@Service
public class SliderVerifyServiceImpl implements SliderVerifyService {@Value("${my.staticPath}")private String path;@Overridepublic ResponseResult generateSliderVerify() {int index = new Random().nextInt(5) + 1;ImageSlideVerify slideVerify = ImageSlideVerifyUtil.cutting(new File(System.getProperty("user.dir") + "/web_component/src/main/resources/static/sliderVerify/" + index + ".png"));return new ResponseResult<>(200, slideVerify);}
}

HTML代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滑动验证码</title>
</head>
<body><div id="box"><div id="content"><img id="bg" src="bg.png" /><img id="block" src="b.png"/></div><!-- 滑块 --><div id="slider"><div id="slider-block"></div></div></div>
</body>
<script>let blockImg = document.querySelector("#block");// 滑块let bgImg = document.querySelector("#bg");// 背景let sliderBlock = document.querySelector("#slider-block");// 滑动栏的滑块function sliderVerify(callback){// 获取验证码信息const xhr = new XMLHttpRequest();xhr.open("get", "http://localhost:8080/sliderVerify", true);xhr.send();xhr.onreadystatechange = function(){if(this.readyState == 4 && this.status == 200){let data = JSON.parse(this.response).data;blockImg.src = data.blockImg;bgImg.src = data.bgImg;blockImg.style.top = data.y + 80 + "px";callback && callback(data); // 回调函数}}}// 执行sliderVerify(function (data) {// 添加鼠标事件sliderBlock.addEventListener("mousedown", (e1) => {const x = e1.x;window.onmousemove = function(e) {let left = e.x - x;// 设置边界，因为我的图片大小都是固定425，所以我直接固定if(e1.target.offsetLeft >= 425){sliderBlock.style.left = 425 + "px";blockImg.style.left = 425 - 20 + "px";return;}// 移动sliderBlock.style.left = left + "px";blockImg.style.left = left - 20 + "px";}// 鼠标释放window.onmouseup = function(e){// 获取滑动到的位置let left = sliderBlock.style.left.split("px")[0];// 减去80内边距并转成数字left = Number(left) - 80;// 清空鼠标滑动事件window.onmousemove = null;// 回到初始位置sliderBlock.style.left = 0 + "px";blockImg.style.left = 0 - 20 + "px";// 判断是否在范围内if(left >= data.x - data.bound && left <= data.x + data.bound){alert("验证成功");} else {alert("验证错误")window.location.reload()}}})});
</script>
<style>#content{user-select: none;position: relative;padding: 80px;padding-bottom: 0;}#block{position: absolute;/* top: 169px; */left: -20px;}#slider{position: relative;display: flex;align-items: center;box-sizing: border-box;width: 505px;height: 50px;padding: 0 2px;border: 3px groove ;}#slider-block{position: relative;width: 70px;height: 40px;background-color: antiquewhite;}
</style>
</html>

实现结果

第一次做，还有点瑕疵

Java后端代码

Java滑动验证码【前端部分】相关推荐

滑动验证码--前端部分
1.原理后端预先保存n张图片用来做滑动验证码的素材,然后在图片上面随机取一块固定大小的小图片作为滑动的素材,然后记录小图片相对于大图的位置,也就是小图上边距和大图上边距之前的距离(x坐标),小图左边 ...
java 滑动验证码
前言在实际的登陆场景或者注册场景中我们总是可以见到各式各样的验证码,有四位的数字字母验证码,滑块验证码,算数验证码,短信验证码,还有类似于12306的逆天验证码.验证码的生成与校验可在前端也可以在后 ...
Java图片滑动验证码
目录一.配置文件二.图片三.代码实现前后端代码: java滚动验证码-前端和后端完整版_outdata的博客-CSDN博客_java图片滚动验证图形滑动验证码JAVA实现[前后端结合]_Le ...
java多层if else嵌套语句的优化思路，滑动验证码防刷功能开发
阿里巴巴java开发手册里面,在控制语句部分有一个推荐,如下: [推荐]表达异常的分支时,少用 if-else 方式,这种方式可以改写成: if (condition) { ...return obj ...
java实现滑动验证码
功能:java实现滑动验证码项目是采用springboot,maven 开发工具:采用idea 1.效果演示: 2.后端代码: 控制层: @Controller public class Slide ...
Java添加一个滑动验证码，有啥可难的，分分钟加一个
滑动验证一般和短信验证码是成对出现,为了避免短信被刷的情况,滑动验证码是一个必须添加的一个功能,下面给大家介绍通过java添加滑动验证的方法. 如何使在电脑端使用的滑动验证,需要引入一段js资源,这里 ...
一步步实现滑动验证码（拼图验证码），Java图片处理关键代码
最近滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低.当然到目前为止,没有绝对的安全验证,只是不断增加攻击者的绕过成本. ...
java验证码图片滑动验证码_图片滑动验证码的生成
使用Java生成图片滑动验证码 image.png 目前接到了一个新的小需求,要在登录时进行滑动图片验证. 搜了一下网上的demo,没有太多很完整的demo.就参考各种文档自己拼凑了一个出来.整理一下 ...
前端验证码隐藏怎么实现_Python爬虫教程：200行代码实现一个滑动验证码
Python爬虫教程:教你用200行代码实现一个滑动验证码做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大 ...

Java滑动验证码【前端部分】

Java滑动验证码【前端】

实现思路

实现代码

实现结果

Java滑动验证码【前端部分】相关推荐

最新文章

热门文章