Java笔记-EasyCaptcha在前后端分离项目的使用
生活随笔
收集整理的这篇文章主要介绍了
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("验证码无效");}............ }
总结
以上是生活随笔为你收集整理的Java笔记-EasyCaptcha在前后端分离项目的使用的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： Android安全笔记-Tasks与Re
- 下一篇： Java工作笔记-JPA中Reposit