Java笔记-EasyCaptcha在前后端分离项目的使用
官方地址：
https://github.com/whvcse/EasyCaptcha
在此膜拜下。
官方上已经有了非常详细的说明，下面我做个笔记，方便以后进行查阅，毕竟少花几分钟上手，可以多看几分钟的新东西。
添加Maven
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>获取验证码的后端代码：
@GetMapping("/TestCaptcha")
public Object getTestCaptcha(){
SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
String verCode = specCaptcha.text().toLowerCase();
String key = UUID.randomUUID().toString();
redisTemplate.opsForValue().set(key, verCode, 60 * 1, TimeUnit.SECONDS);
Map<String, String> ret = new HashMap<>();
ret.put("key", key);
ret.put("image", specCaptcha.toBase64());
return ResultVo.success("success", ret);
}逻辑：
①SpecCaptcha类生成验证码；
②将生产的key和verCode使用redisTemplate放到redis中；
前端代码：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<img id="verImg" width="130px" height="48px"/>
<script>
var verKey;
// 获取验证码
$.get('http://127.0.0.1:19000/TestCaptcha', function(res) {
verKey = res.key;
$('#verImg').attr('src', res.data.image);
},'json');
console.log(verKey)
</script>
</body>
</html>对应的请求：
将这个值设置给html的image就可以正常显示了。
这个key，就是redis里面的key。登录的时候要把这个带上。
登录验证相关的代码：
@PostMapping("/login")
public Object login(@RequestBody String request){
Map<String, Object> userMap = JSONObject.parseObject(request);
if(!userMap.containsKey("verKey") || !userMap.containsKey("verCode")){
return ResultVo.error("格式有误");
}
//先查验证码
String rightValue = redisTemplate.opsForValue().get(userMap.get("verKey")).toString();
if(rightValue == null || !rightValue.equals(userMap.get("verCode").toString().toLowerCase())){
return ResultVo.error("验证码无效");
}
......
......
}版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq78442761/article/details/120964847
内容来源于网络，如有侵权，请联系作者删除！