easy-captcha字符验证码

resources/static/ 目录下资源文件:alllayui systemeasy-captcha验证码
效果:
image.png

maven方式引入

  1. <dependencies>
  2. <dependency>
  3. <groupId>com.github.whvcse</groupId>
  4. <artifactId>easy-captcha</artifactId>
  5. <version>1.6.2</version>
  6. </dependency>
  7. </dependencies>

基本用法

不要忘了把/captcha路径排除登录拦截,比如shiro的拦截。

  1. //在SpringMVC中使用
  2. @Controller
  3. public class CaptchaController {
  4. @RequestMapping("/captcha")
  5. public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
  6. CaptchaUtil.out(request, response);
  7. // 设置位数
  8. CaptchaUtil.out(5, request, response);
  9. // 设置宽、高、位数
  10. CaptchaUtil.out(130, 48, 5, request, response);
  11. // 使用gif验证码
  12. GifCaptcha gifCaptcha = new GifCaptcha(130,48,4);
  13. CaptchaUtil.out(gifCaptcha, request, response);
  14. }
  15. }
  16. //前端html代码:
  17. <img src="/captcha" width="130px" height="48px" />

CaptchaUtil

image.png

  1. public void get_captcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
  2. ServletOutputStream outputStream = response.getOutputStream();
  3. // png类型
  4. SpecCaptcha captcha = new SpecCaptcha(130, 48);
  5. captcha.text(); // 获取验证码的字符
  6. captcha.textChar(); // 获取验证码的字符数组
  7. // gif类型
  8. GifCaptcha captcha = new GifCaptcha(130, 48);
  9. // 中文类型
  10. ChineseCaptcha captcha = new ChineseCaptcha(130, 48);
  11. // 中文gif类型
  12. ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48);
  13. // 算术类型
  14. ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
  15. captcha.setLen(3); // 几位数运算,默认是两位
  16. captcha.getArithmeticString(); // 获取运算的公式:3+2=?
  17. captcha.text(); // 获取运算的结果:5
  18. captcha.out(outputStream); // 输出验证码
  19. }

不使用工具类

CaptchaUtil封装了输出验证码、存session、判断验证码等功能,也可以不使用此工具类:

  1. @Controller
  2. public class CaptchaController {
  3. @RequestMapping("/captcha")
  4. public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
  5. // 设置请求头为输出图片类型
  6. response.setContentType("image/gif");
  7. response.setHeader("Pragma", "No-cache");
  8. response.setHeader("Cache-Control", "no-cache");
  9. response.setDateHeader("Expires", 0);
  10. // 三个参数分别为宽、高、位数
  11. SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
  12. // 设置字体
  13. specCaptcha.setFont(new Font("Verdana", Font.PLAIN, 32)); // 有默认字体,可以不用设置
  14. // 设置类型,纯数字、纯字母、字母数字混合
  15. specCaptcha.setCharType(Captcha.TYPE_ONLY_NUMBER);
  16. // 验证码存入session
  17. request.getSession().setAttribute("captcha", specCaptcha.text().toLowerCase());
  18. // 输出图片流
  19. specCaptcha.out(response.getOutputStream());
  20. }
  21. @PostMapping("/login")
  22. public JsonResult login(String username,String password,String verCode){
  23. // 获取session中的验证码
  24. String sessionCode = request.getSession().getAttribute("captcha");
  25. // 判断验证码
  26. if (verCode==null || !sessionCode.equals(verCode.trim().toLowerCase())) {
  27. return JsonResult.error("验证码不正确");
  28. }
  29. }
  30. }

验证码字符类型

类型 描述
TYPE_DEFAULT 数字和字母混合
TYPE_ONLY_NUMBER 纯数字
TYPE_ONLY_CHAR 纯字母
TYPE_ONLY_UPPER 纯大写字母
TYPE_ONLY_LOWER 纯小写字母
TYPE_NUM_AND_UPPER 数字和大写字母

使用方法:

SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
captcha.setCharType(Captcha.TYPE_ONLY_NUMBER); 只有SpecCaptcha和GifCaptcha设置才有效果。

字体设置

内置字体:

字体 效果
Captcha.FONT_1 验证码 - 图3
Captcha.FONT_2 验证码 - 图4
Captcha.FONT_3 验证码 - 图5
Captcha.FONT_4 验证码 - 图6
Captcha.FONT_5 验证码 - 图7
Captcha.FONT_6 验证码 - 图8
Captcha.FONT_7 验证码 - 图9
Captcha.FONT_8 验证码 - 图10
Captcha.FONT_9 验证码 - 图11
Captcha.FONT_10 验证码 - 图12

使用方法:

  1. SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
  2. // 设置内置字体
  3. captcha.setFont(Captcha.FONT_1);
  4. // 设置系统字体
  5. captcha.setFont(new Font("楷体", Font.PLAIN, 28));

输出base64编码

  1. SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
  2. specCaptcha.toBase64();
  3. // 如果不想要base64的头部data:image/png;base64,
  4. specCaptcha.toBase64(""); // 加一个空的参数即可

输出到文件

  1. FileOutputStream outputStream = new FileOutputStream(new File("C:/captcha.png"))
  2. SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
  3. specCaptcha.out(outputStream);

前后端分离项目的使用

  1. //前后端分离项目建议不要存储在session中,存储在redis中,redis存储需要一个key,
  2. //key一同返回给前端用于验证输入:
  3. @Controller
  4. public class CaptchaController {
  5. @Autowired
  6. private RedisUtil redisUtil;
  7. @ResponseBody
  8. @RequestMapping("/captcha")
  9. public JsonResult captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
  10. SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
  11. String verCode = specCaptcha.text().toLowerCase();
  12. String key = UUID.randomUUID().toString();
  13. // 存入redis并设置过期时间为30分钟
  14. redisUtil.setEx(key, verCode, 30, TimeUnit.MINUTES);
  15. // 将key和base64返回给前端
  16. return JsonResult.ok().put("key", key).put("image", specCaptcha.toBase64());
  17. }
  18. @ResponseBody
  19. @PostMapping("/login")
  20. public JsonResult login(String username,String password,String verCode,String verKey){
  21. // 获取redis中的验证码
  22. String redisCode = redisUtil.get(verKey);
  23. // 判断验证码
  24. if (verCode==null || !redisCode.equals(verCode.trim().toLowerCase())) {
  25. return JsonResult.error("验证码不正确");
  26. }
  27. }
  28. }
  29. //前端使用ajax获取验证码:
  30. <img id="verImg" width="130px" height="48px"/>
  31. <script>
  32. var verKey;
  33. // 获取验证码
  34. $.get('/captcha', function(res) {
  35. verKey = res.key;
  36. $('#verImg').attr('src', res.image);
  37. },'json');
  38. // 登录
  39. $.post('/login', {
  40. verKey: verKey,
  41. verCode: '8u6h',
  42. username: 'admin'
  43. password: 'admin'
  44. }, function(res) {
  45. console.log(res);
  46. }, 'json');
  47. </script>

自定义效果

继承Captcha实现out方法,中文验证码可继承ChineseCaptchaAbstract,算术验证码可继承ArithmeticCaptchaAbstract。

阿里滑块验证

效果:
image.png
https://www.jianshu.com/p/e510618cacaa