devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Spring Boot集成AJ-Captcha实现滑动验证码功能

作者：很楠不爱3 | 2024-04-08 17:39:21

赞

踩

Spring Boot集成AJ-Captcha实现滑动验证码功能

1.AJ-Captcha介绍

行为验证码

采用嵌入式集成方式，接入方便，安全，高效。抛弃了传统字符型验证码展示-填写字符-比对答案的流程，采用验证码展示-采集用户行为-分析用户行为流程，用户只需要产生指定的行为轨迹，不需要键盘手动输入，极大优化了传统验证码用户体验不佳的问题；同时，快速、准确的返回人机判定结果

AJ-Captcha行为验证码

AJ-Captcha行为验证码，包含滑动拼图、文字点选两种方式，UI支持弹出和嵌入两种方式。后端提供Java实现，前端提供了php、angular、html、vue、uni-app、flutter、android、ios等代码示例。

2.代码工程

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.     <parent>
  6.         <artifactId>springboot-demo</artifactId>
  7.         <groupId>com.et</groupId>
  8.         <version>1.0-SNAPSHOT</version>
  9.     </parent>
  10.     <modelVersion>4.0.0</modelVersion>
  11.  
  12.  
  13.     <artifactId>Captcha</artifactId>
  14.  
  15.  
  16.     <properties>
  17.         <maven.compiler.source>8</maven.compiler.source>
  18.         <maven.compiler.target>8</maven.compiler.target>
  19.     </properties>
  20.     <dependencies>
  21.  
  22.  
  23.         <dependency>
  24.             <groupId>org.springframework.boot</groupId>
  25.             <artifactId>spring-boot-starter-web</artifactId>
  26.         </dependency>
  27.  
  28.  
  29.         <dependency>
  30.             <groupId>org.springframework.boot</groupId>
  31.             <artifactId>spring-boot-autoconfigure</artifactId>
  32.         </dependency>
  33.         <dependency>
  34.             <groupId>org.springframework.boot</groupId>
  35.             <artifactId>spring-boot-starter-test</artifactId>
  36.             <scope>test</scope>
  37.         </dependency>
  38.         <dependency>
  39.             <groupId>com.anji-plus</groupId>
  40.             <artifactId>spring-boot-starter-captcha</artifactId>
  41.             <version>1.3.0</version>
  42.         </dependency>
  43.  
  44.  
  45.         <dependency>
  46.             <groupId>org.springframework.boot</groupId>
  47.             <artifactId>spring-boot-starter-data-redis</artifactId>
  48.         </dependency>
  49.     </dependencies>
  50. </project>

application.yaml

  1. spring.application.name=captcha-service
  2. server.port=8080
  3.  
  4.  
  5. # 滑动验证，底图路径，不配置将使用默认图片
  6. # 支持全路径
  7. # 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/jigsaw
  8. aj.captcha.jigsaw=classpath:images/jigsaw
  9. # 滑动验证，底图路径，不配置将使用默认图片
  10. # 支持全路径
  11. # 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click
  12. aj.captcha.pic-click=classpath:images/pic-click
  13.  
  14.  
  15. # 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis或者memcache，
  16. # 参考CaptchaCacheServiceRedisImpl.java
  17. # 如果应用是单点的，也没有使用redis，那默认使用内存。
  18. # 内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败。
  19. # ！！！注意啦，如果应用有使用spring-boot-starter-data-redis，
  20. # 请打开CaptchaCacheServiceRedisImpl.java注释。
  21. # redis ----->  SPI：在resources目录新建META-INF.services文件夹(两层)，参考当前服务resources。
  22. # 缓存local/redis...
  23. aj.captcha.cache-type=local
  24. # local缓存的阈值,达到这个值，清除缓存
  25. #aj.captcha.cache-number=1000
  26. # local定时清除过期缓存(单位秒),设置为0代表不执行
  27. #aj.captcha.timing-clear=180
  28. #spring.redis.host=10.108.11.46
  29. #spring.redis.port=6379
  30. #spring.redis.password=
  31. #spring.redis.database=2
  32. #spring.redis.timeout=6000
  33.  
  34.  
  35. # 验证码类型default两种都实例化。
  36. aj.captcha.type=default
  37. # 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换
  38. # https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode
  39. # 右下角水印文字(我的水印)
  40. aj.captcha.water-mark=我的水印
  41. # 右下角水印字体(不配置时，默认使用文泉驿正黑)
  42. # 由于宋体等涉及到版权，我们jar中内置了开源字体【文泉驿正黑】
  43. # 方式一：直接配置OS层的现有的字体名称，比如：宋体
  44. # 方式二：自定义特定字体，请将字体放到工程resources下fonts文件夹，支持ttf\ttc\otf字体
  45. # aj.captcha.water-font=WenQuanZhengHei.ttf
  46. # 点选文字验证码的文字字体(文泉驿正黑)
  47. # aj.captcha.font-type=WenQuanZhengHei.ttf
  48. # 校验滑动拼图允许误差偏移量(默认5像素)
  49. aj.captcha.slip-offset=5
  50. # aes加密坐标开启或者禁用(true|false)
  51. aj.captcha.aes-status=true
  52. # 滑动干扰项(0/1/2)
  53. aj.captcha.interference-options=2
  54.  
  55.  
  56. #点选字体样式 默认Font.BOLD
  57. aj.captcha.font-style=1
  58. #点选字体字体大小
  59. aj.captcha.font-size=25
  60. #点选文字个数,存在问题，暂不支持修改
  61. #aj.captcha.click-word-count=4
  62.  
  63.  
  64.  
  65.  
  66. aj.captcha.history-data-clear-enable=false
  67.  
  68.  
  69. # 接口请求次数一分钟限制是否开启 true|false
  70. aj.captcha.req-frequency-limit-enable=false
  71. # 验证失败5次，get接口锁定
  72. aj.captcha.req-get-lock-limit=5
  73. # 验证失败后，锁定时间间隔,s
  74. aj.captcha.req-get-lock-seconds=360
  75. # get接口一分钟内请求数限制
  76. aj.captcha.req-get-minute-limit=30
  77. # check接口一分钟内请求数限制
  78. aj.captcha.req-check-minute-limit=30
  79. # verify接口一分钟内请求数限制(暂用不上，可后台直接调用captchaService)
  80. #aj.captcha.req-verify-minute-limit=30

CaptchaConfig.java

  1. package com.et.captcha.config;
  2.  
  3.  
  4. import com.et.captcha.service.CaptchaCacheServiceRedisImpl;
  5. import com.anji.captcha.properties.AjCaptchaProperties;
  6. import com.anji.captcha.service.CaptchaCacheService;
  7. import com.anji.captcha.service.impl.CaptchaServiceFactory;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.context.annotation.Bean;
  10. import org.springframework.context.annotation.Configuration;
  11. import org.springframework.context.annotation.Primary;
  12. import org.springframework.data.redis.core.StringRedisTemplate;
  13.  
  14.  
  15. @Configuration
  16. public class CaptchaConfig {
  17.  
  18.  
  19.     @Autowired
  20.     StringRedisTemplate redisTemplate;
  21.  
  22.  
  23.     @Bean(name = "CaptchaCacheService")
  24.     @Primary
  25.     public CaptchaCacheService captchaCacheService(AjCaptchaProperties config){
  26.         //缓存类型redis/local/....
  27.         CaptchaCacheService ret = CaptchaServiceFactory.getCache(config.getCacheType().name());
  28.         if(ret instanceof CaptchaCacheServiceRedisImpl){
  29.             ((CaptchaCacheServiceRedisImpl)ret).setStringRedisTemplate(redisTemplate);
  30.         }
  31.         return ret;
  32.     }
  33. }

CaptchaCacheService有很多种实现类，可以动态扩展，具体方式可以参考官方教程，下面提出默认local的实现方式DefaultCaptchaServiceImpl

  1. package com.anji.captcha.service.impl;
  2.  
  3.  
  4. import com.anji.captcha.model.common.RepCodeEnum;
  5. import com.anji.captcha.model.common.ResponseModel;
  6. import com.anji.captcha.model.vo.CaptchaVO;
  7. import com.anji.captcha.service.CaptchaService;
  8. import com.anji.captcha.util.StringUtils;
  9. import java.util.Iterator;
  10. import java.util.Properties;
  11.  
  12.  
  13. public class DefaultCaptchaServiceImpl extends AbstractCaptchaService {
  14.     public DefaultCaptchaServiceImpl() {
  15.     }
  16.  
  17.  
  18.     public String captchaType() {
  19.         return "default";
  20.     }
  21.  
  22.  
  23.     public void init(Properties config) {
  24.         Iterator var2 = CaptchaServiceFactory.instances.keySet().iterator();
  25.  
  26.  
  27.         while(var2.hasNext()) {
  28.             String s = (String)var2.next();
  29.             if (!this.captchaType().equals(s)) {
  30.                 this.getService(s).init(config);
  31.             }
  32.         }
  33.  
  34.  
  35.     }
  36.  
  37.  
  38.     public void destroy(Properties config) {
  39.         Iterator var2 = CaptchaServiceFactory.instances.keySet().iterator();
  40.  
  41.  
  42.         while(var2.hasNext()) {
  43.             String s = (String)var2.next();
  44.             if (!this.captchaType().equals(s)) {
  45.                 this.getService(s).destroy(config);
  46.             }
  47.         }
  48.  
  49.  
  50.     }
  51.  
  52.  
  53.     private CaptchaService getService(String captchaType) {
  54.         return (CaptchaService)CaptchaServiceFactory.instances.get(captchaType);
  55.     }
  56.  
  57.  
  58.     public ResponseModel get(CaptchaVO captchaVO) {
  59.         if (captchaVO == null) {
  60.             return RepCodeEnum.NULL_ERROR.parseError(new Object[]{"captchaVO"});
  61.         } else {
  62.             return StringUtils.isEmpty(captchaVO.getCaptchaType()) ? RepCodeEnum.NULL_ERROR.parseError(new Object[]{"类型"}) : this.getService(captchaVO.getCaptchaType()).get(captchaVO);
  63.         }
  64.     }
  65.  
  66.  
  67.     public ResponseModel check(CaptchaVO captchaVO) {
  68.         if (captchaVO == null) {
  69.             return RepCodeEnum.NULL_ERROR.parseError(new Object[]{"captchaVO"});
  70.         } else if (StringUtils.isEmpty(captchaVO.getCaptchaType())) {
  71.             return RepCodeEnum.NULL_ERROR.parseError(new Object[]{"类型"});
  72.         } else {
  73.             return StringUtils.isEmpty(captchaVO.getToken()) ? RepCodeEnum.NULL_ERROR.parseError(new Object[]{"token"}) : this.getService(captchaVO.getCaptchaType()).check(captchaVO);
  74.         }
  75.     }
  76.  
  77.  
  78.     public ResponseModel verification(CaptchaVO captchaVO) {
  79.         if (captchaVO == null) {
  80.             return RepCodeEnum.NULL_ERROR.parseError(new Object[]{"captchaVO"});
  81.         } else if (StringUtils.isEmpty(captchaVO.getCaptchaVerification())) {
  82.             return RepCodeEnum.NULL_ERROR.parseError(new Object[]{"二次校验参数"});
  83.         } else {
  84.             try {
  85.                 String codeKey = String.format(REDIS_SECOND_CAPTCHA_KEY, captchaVO.getCaptchaVerification());
  86.                 if (!CaptchaServiceFactory.getCache(cacheType).exists(codeKey)) {
  87.                     return ResponseModel.errorMsg(RepCodeEnum.API_CAPTCHA_INVALID);
  88.                 }
  89.  
  90.  
  91.                 CaptchaServiceFactory.getCache(cacheType).delete(codeKey);
  92.             } catch (Exception var3) {
  93.                 this.logger.error("验证码坐标解析失败", var3);
  94.                 return ResponseModel.errorMsg(var3.getMessage());
  95.             }
  96.  
  97.  
  98.             return ResponseModel.success();
  99.         }
  100.     }
  101. }

获取验证码

  1. package com.anji.captcha.controller;
  2.  
  3.  
  4. import com.anji.captcha.model.common.ResponseModel;
  5. import com.anji.captcha.model.vo.CaptchaVO;
  6. import com.anji.captcha.service.CaptchaService;
  7. import com.anji.captcha.util.StringUtils;
  8. import javax.servlet.http.HttpServletRequest;
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.web.bind.annotation.PostMapping;
  11. import org.springframework.web.bind.annotation.RequestBody;
  12. import org.springframework.web.bind.annotation.RequestMapping;
  13. import org.springframework.web.bind.annotation.RestController;
  14.  
  15.  
  16. @RestController
  17. @RequestMapping({"/captcha"})
  18. public class CaptchaController {
  19.     @Autowired
  20.     private CaptchaService captchaService;
  21.  
  22.  
  23.     public CaptchaController() {
  24.     }
  25.  
  26.  
  27.     @PostMapping({"/get"})
  28.     public ResponseModel get(@RequestBody CaptchaVO data, HttpServletRequest request) {
  29.         assert request.getRemoteHost() != null;
  30.  
  31.  
  32.         data.setBrowserInfo(getRemoteId(request));
  33.         return this.captchaService.get(data);
  34.     }
  35.  
  36.  
  37.     @PostMapping({"/check"})
  38.     public ResponseModel check(@RequestBody CaptchaVO data, HttpServletRequest request) {
  39.         data.setBrowserInfo(getRemoteId(request));
  40.         return this.captchaService.check(data);
  41.     }
  42.  
  43.  
  44.     public ResponseModel verify(@RequestBody CaptchaVO data, HttpServletRequest request) {
  45.         return this.captchaService.verification(data);
  46.     }
  47.  
  48.  
  49.     public static final String getRemoteId(HttpServletRequest request) {
  50.         String xfwd = request.getHeader("X-Forwarded-For");
  51.         String ip = getRemoteIpFromXfwd(xfwd);
  52.         String ua = request.getHeader("user-agent");
  53.         return StringUtils.isNotBlank(ip) ? ip + ua : request.getRemoteAddr() + ua;
  54.     }
  55.  
  56.  
  57.     private static String getRemoteIpFromXfwd(String xfwd) {
  58.         if (StringUtils.isNotBlank(xfwd)) {
  59.             String[] ipList = xfwd.split(",");
  60.             return StringUtils.trim(ipList[0]);
  61.         } else {
  62.             return null;
  63.         }
  64.     }
  65. }

验证验证码

  1. package com.et.captcha.controller;
  2.  
  3.  
  4. import com.anji.captcha.model.common.ResponseModel;
  5. import com.anji.captcha.model.vo.CaptchaVO;
  6. import com.anji.captcha.service.CaptchaService;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.web.bind.annotation.PostMapping;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import org.springframework.web.bind.annotation.RequestParam;
  11. import org.springframework.web.bind.annotation.RestController;
  12.  
  13.  
  14. /**
  15.  * 后端二次校验接口示例
  16.  */
  17. @RestController
  18. @RequestMapping("/auth")
  19. public class LoginController {
  20.  
  21.  
  22.     @Autowired
  23.     private CaptchaService captchaService;
  24.  
  25.  
  26.     @PostMapping("/login")
  27.     public ResponseModel get(@RequestParam("captchaVerification") String captchaVerification) {
  28.         CaptchaVO captchaVO = new CaptchaVO();
  29.         captchaVO.setCaptchaVerification(captchaVerification);
  30.         ResponseModel response = captchaService.verification(captchaVO);
  31.         if(response.isSuccess() == false){
  32.             //验证码校验失败，返回信息告诉前端
  33.             //repCode  0000  无异常，代表成功
  34.             //repCode  9999  服务器内部异常
  35.             //repCode  0011  参数不能为空
  36.             //repCode  6110  验证码已失效，请重新获取
  37.             //repCode  6111  验证失败
  38.             //repCode  6112  获取验证码失败,请联系管理员
  39.         }
  40.         return response;
  41.     }
  42.  
  43.  
  44. }

前端工程代码太多就不贴出来了，具体可以查看web-ui文件家里面的内容，以上只是一些关键代码，所有代码请参见下面代码仓库

代码仓库

  • https://github.com/Harries/springboot-demo

3.测试

第一步:启动后端，启动service/springboot的StartApplication。

第二步:启动前端，终端进入文件夹view/vue，

  1. yarn install
  2. yarn run dev

浏览器登录 http://localhost:8081/#/

e03c50fcfa74f85df7b0347ef73b4358.png

4.引用

  • https://gitee.com/anji-plus/captcha

  • http://www.liuhaihua.cn/archives/710384.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/387162
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号