温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Java如何实现滑动验证码

发布时间:2022-03-01 09:09:14 来源:亿速云 阅读:470 作者:小新 栏目:开发技术

小编给大家分享一下Java如何实现滑动验证码,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

    功能:java实现滑动验证码

    项目是采用springboot,maven

    开发工具:采用idea

    1.效果演示

    Java如何实现滑动验证码

    Java如何实现滑动验证码

    Java如何实现滑动验证码

    2.后端代码

    控制层

    @Controller
    public class SliderCodeController {
     
        @Autowired
        ResourceLoader resourceLoader;
     
        @Autowired
        private FileUtil fileUtil;
     
        // 设置横轴位置缓存
        public static Cache< String, Integer > cacheg = CacheBuilder.newBuilder().expireAfterWrite(60, TimeUnit.SECONDS)
                .maximumSize(666666).build();
     
        @GetMapping
        @RequestMapping("index")
        public String test(HttpServletRequest request, Model model) throws IOException {
            return "index";
        }
     
     
        @GetMapping
        @RequestMapping("getImg")
        public @ResponseBody
        Map< String, Object > getPic(HttpServletRequest request) throws IOException {
            try {
                File targetFile = fileUtil.getFile("target");
                File tempImgFile = fileUtil.getFile("temp");
                Map < String, Object > resultMap = VerifyImageUtil.pictureTemplatesCut(tempImgFile, targetFile);
                // 生成流水号,这里就使用时间戳代替
                String lno = Calendar.getInstance().getTimeInMillis() + "";
                cacheg.put(lno, Integer.valueOf(resultMap.get("xWidth") + ""));
                resultMap.put("capcode", lno);
                // 移除横坐标送前端
                resultMap.remove("xWidth");
                return resultMap;
            }
            catch (Exception e) {
                e.printStackTrace();
                return null;
            }
     
        }
     
     
        @GetMapping
        @RequestMapping("checkImgCode")
        public @ResponseBody Map < String, Object > checkcapcode(@RequestParam("xpos") int xpos,
                                                                 @RequestParam("capcode") String capcode, HttpServletRequest request) throws IOException {
            Map < String, Object > result = new HashMap< String, Object >();
            Integer x = cacheg.getIfPresent(capcode);
            if (x == null) {
                // 超时
                result.put("code", 3);
            }
            else if (xpos - x > 5 || xpos - x < -5) {
                // 验证失败
                result.put("code", 2);
            }
            else {
                // 验证成功
                result.put("code", 1);
            }
            return result;
        }
    }

    工具类

    @Component
    public class FileUtil {
     
        @Value("${file.path}")
        private String filePath;
     
        @Value("${file.target.path}")
        private String targetFilePath;
     
        @Value("${file.target.num}")
        private Integer targetfileNum;
     
        @Value("${file.temp.path}")
        private String tempFilePath;
     
        @Value("${file.temp.num}")
        private Integer tempfileNum;
     
        public File getFile(String type){
            int num = 0;
            String imgType = ".jpg";
            String oldFilePath = "";
            if(type.equals("target")){
                num = new Random().nextInt(targetfileNum)  + 1;
                oldFilePath = targetFilePath;
            } else  if(type.equals("temp")){
                num = new Random().nextInt(tempfileNum)  + 1;
                imgType = "-w.png";
                oldFilePath = tempFilePath;
            }
            String path = filePath;
            String fileImg =   num + imgType;
            String filePath = path + fileImg;
            File pathFile = new File(path);
            if(!pathFile.exists()){
                pathFile.mkdirs();
            }
            File file = new File(filePath);
            if(!file.exists()){
                try {
                    file.createNewFile();
                    ClassPathResource classPathResource = new ClassPathResource(oldFilePath + fileImg);
                    InputStream inputStream = classPathResource.getInputStream();
                    if(inputStream.available() != 0){
                        FileUtils.copyInputStreamToFile(inputStream, file);
                    }
                    inputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            return file;
        }
     
    }

    3.前端页面

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>滑动验证码</title>
    <link rel="stylesheet" href="/css/slide.css" rel="external nofollow" >
    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/jquery.lgyslide.js"></script>
    </head>
    <body>
    	<div id="imgscode"></div>
    	<script>
    		$(function() {
    			setTimeout(function() {
    				createcode();
    			}, 1000)
    		}());
    		//显示验证码
    		function createcode() {
    			$
    					.ajax({
    						type : 'POST',
    						url : '/getImg',
    						dataType : 'json',
    						success : function(data) {
    							if (data != null) {
    								$("#imgscode")
    										.imgcode(
    												{
    													frontimg : 'data:image/png;base64,'
    															+ data.slidingImage,
    													backimg : 'data:image/png;base64,'
    															+ data.backImage,
    													yHeight : data.yHeight,
    													refreshcallback : function() {
    														//刷新验证码
    														createcode();
    													},
    													callback : function(msg) {
    														console.log(msg);
    														var $this = this;
    														$
    																.ajax({
    																	type : 'POST',
    																	url : '/checkImgCode',
    																	data : {
    																		xpos : msg.xpos,
    																		capcode : data.capcode
    																	},
    																	dataType : 'json',
    																	success : function(
    																			data) {
    																		console
    																				.log(data)
    																		if (data.code == 1) {
    																			$this
    																					.getsuccess();
    																		} else {
    																			if (data.code == 4) {
    																				createcode();
    																			} else if (data.code == 3) {
    																				$this
    																						.getfail("验证码过期,请刷新");
    																			} else {
    																				$this
    																						.getfail("验证不通过");
    																			}
    																		}
     
    																	}
    																})
    													}
    												});
    							}
    						}
    					})
    		}
    	</script>
    </body>
    </html>

    看完了这篇文章,相信你对“Java如何实现滑动验证码”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI