Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的示例代碼

更新時(shí)間：2022年02月28日 15:52:46 作者：灰太狼_cxh

這篇文章主要為大家介紹了如何用Java語言實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的生成，項(xiàng)目采用了springboot，maven等技術(shù)，感興趣的小伙伴可以跟隨小編學(xué)習(xí)一下

1.效果演示

2.后端代碼

控制層

@Controller
public class SliderCodeController {
 
    @Autowired
    ResourceLoader resourceLoader;
 
    @Autowired
    private FileUtil fileUtil;
 
    // 設(shè)置橫軸位置緩存
    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);
            // 生成流水號，這里就使用時(shí)間戳代替
            String lno = Calendar.getInstance().getTimeInMillis() + "";
            cacheg.put(lno, Integer.valueOf(resultMap.get("xWidth") + ""));
            resultMap.put("capcode", lno);
            // 移除橫坐標(biāo)送前端
            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) {
            // 超時(shí)
            result.put("code", 3);
        }
        else if (xpos - x > 5 || xpos - x < -5) {
            // 驗(yàn)證失敗
            result.put("code", 2);
        }
        else {
            // 驗(yàn)證成功
            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>滑動(dòng)驗(yàn)證碼</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)
		}());
		//顯示驗(yàn)證碼
		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() {
														//刷新驗(yàn)證碼
														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("驗(yàn)證碼過期,請刷新");
																			} else {
																				$this
																						.getfail("驗(yàn)證不通過");
																			}
																		}
 
																	}
																})
													}
												});
							}
						}
					})
		}
	</script>
</body>
</html>

到此這篇關(guān)于Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的示例代碼的文章就介紹到這了,更多相關(guān)Java滑動(dòng)驗(yàn)證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: