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
- 下一篇： canvas笔记-文本（fillText