圖形驗證碼是最經典,也是最常用的驗證方式。今天介紹一個非常不錯的類庫:JAVA圖形驗證碼,支持gif、中文、算術等類型,可用于Java Web、JavaSE等項目。
官網:
https://gitee.com/whvse/EasyCaptcha
效果圖:
0x01:項目引入easy-captcha
<dependencies>
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
</dependencies>
0x02:SpringBoot項目創建圖形驗證碼
前后端分離項目中建議不要存儲在session中;而使用分布式session,存儲在redis中,redis存儲需要一個key,key一同返回給前端用于驗證輸入。
@Controller
public class CaptchaController {
@Autowired
private RedisUtil redisUtil;
@ResponseBody @RequestMApping("/vcode/captcha")
public JsonResult captcha(HttpServletRequest request, HttpServletResponse response) throws Exception { SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
String verCode = specCaptcha.text().toLowerCase(); String key = UUID.randomUUID().toString(); // 存入redis并設置過期時間為30分鐘
redisUtil.setEx(key, verCode, 30, TimeUnit.MINUTES);
// 將key和base64返回給前端
return JsonResult.ok().put("key", key).put("image", specCaptcha.toBase64());
} @ResponseBody @PostMapping("/vcode/vaild")
public JsonResult login(String username,String password,String verCode,String verKey){ // 獲取redis中的驗證碼
String redisCode = redisUtil.get(verKey); // 判斷驗證碼
if (verCode==null || !redisCode.equals(verCode.trim().toLowerCase())) {
return JsonResult.error("驗證碼不正確");
} } }
0x03:前端使用ajax獲取驗證碼并驗證
<img id="verImg" width="130px" height="48px"/>
<script> var verKey; // 獲取驗證碼 $.get('/vcode/captcha', function(res) {
verKey = res.key; $('#verImg').attr('src', res.image);
},'json');
// 登錄 $.post('/vcode/login', {
verKey: verKey, verCode: '8u6h',
username: 'admin',
password: 'admin'
}, function(res) {
console.log(res);
}, 'json');
</script>