Java实现滑动验证码的示例代码

2024-04-02 19:04:59 751人浏览独家记忆

Python 官方文档：入门教程 => 点击学习

摘要

目录1.效果演示2.后端代码控制层工具类3.前端页面功能：java实现滑动验证码项目是采用SpringBoot，Maven 开发工具：采用idea 1.效果演示 2.后端代码

1.效果演示

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实现滑动验证码的示例代码的文章就介绍到这了,更多相关Java滑动验证码内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Java实现滑动验证码的示例代码

本文链接: https://www.lsjlt.com/news/140795.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341