Java滑动验证码

时间:2022-05-23 灰太狼_cxh 人气:0

功能：java实现滑动验证码

项目是采用springboot，maven

开发工具：采用idea

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>

加载全部内容