2 对接流程

2.1 接入流程(请切换对应标签或分支)

2.1.1 后端接入

用户提交表单会携带验证码相关参数,后台需要调用captchaService.verification做二次校验,以确保验证数据的正确有效。

2.1.2 前端接入

引入相关组件,调用初始化函数,通过配置的一些参数信息。将行为验证码渲染出来。

2.2 后端接入(springboot/springmvc)

2.2.1 SpringBoot项目,参考示例:service\springboot。

a.引入jar,已上传至maven中央仓库。

  1. <dependency>
  2. <groupId>com.github.anji-plus</groupId>
  3. <artifactId>captcha-spring-boot-starter</artifactId>
  4. <version>1.2.4</version>
  5. </dependency>

b.修改application.properties,自定义底图和水印,启动后前端就可以请求接口了。社区底图库

  1. ....
  2. #滑动验证,底图路径,不配置将使用默认图片
  3. ##支持全路径
  4. ##支持项目路径,以classpath:开头,取resource目录下路径,例:classpath:images/jigsaw
  5. aj.captcha.jigsaw=classpath:images/jigsaw
  6. #滑动验证,底图路径,不配置将使用默认图片
  7. ##支持全路径
  8. ##支持项目路径,以classpath:开头,取resource目录下路径,例:classpath:images/pic-click
  9. aj.captcha.pic-click=classpath:images/pic-click
  10. # 对于分布式部署的应用,我们建议应用自己实现CaptchaCacheService,比如用Redis或者memcache,参考CaptchaCacheServiceRedisImpl.java
  11. # 如果应用是单点的,也没有使用redis,那默认使用内存。
  12. # 内存缓存只适合单节点部署的应用,否则验证码生产与验证在节点之间信息不同步,导致失败。
  13. # !!! 注意啦,如果应用有使用spring-boot-starter-data-redis,请打开CaptchaCacheServiceRedisImpl.java注释。
  14. #缓存local/redis...
  15. aj.captcha.cache-type=local
  16. #local缓存的阈值,达到这个值,清除缓存
  17. #aj.captcha.cache-number=1000
  18. #local定时清除过期缓存(单位秒),设置为0代表不执行
  19. #aj.captcha.timing-clear=180
  20. #spring.redis.host=10.108.11.46
  21. #spring.redis.port=6379
  22. #spring.redis.password=
  23. #spring.redis.database=2
  24. #spring.redis.timeout=6000
  25. #验证码类型default两种都实例化。
  26. aj.captcha.type=default
  27. #汉字统一使用Unicode,保证程序通过@value读取到是中文,可通过这个在线转换 https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode
  28. #右下角水印文字(我的水印)
  29. aj.captcha.water-mark=\u6211\u7684\u6c34\u5370
  30. #右下角水印字体(宋体)
  31. aj.captcha.water-font=\u5b8b\u4f53
  32. #点选文字验证码的文字字体(宋体)
  33. aj.captcha.font-type=\u5b8b\u4f53
  34. #校验滑动拼图允许误差偏移量(默认5像素)
  35. aj.captcha.slip-offset=5
  36. #aes加密坐标开启或者禁用(true|false)
  37. aj.captcha.aes-status=true
  38. #滑动干扰项(0/1/2) 1.2.2版本新增
  39. aj.captcha.interference-options=2

c.非常重要。对于分布式多实例部署的应用,应用必须自己实现CaptchaCacheService,比如用Redis或者memcache,参考service/springboot/src/…/CaptchaCacheServiceRedisImpl.java
如果运行报google包路径的错误,删除@AutoService注解,在resources目录新建META-INF.services文件夹,参考service/springmvc中的写法。

2.2.2 后端二次校验接口

二次校验参数请查看前端接入文档,例:vue,html接入文档等

以登录为例,用户在提交表单到后台,会携带一个验证码相关的参数。后端登录接口login,首先调用CaptchaService.verification做二次校验,

  1. @Autowired
  2. privateCaptchaService captchaService;
  3. @PostMapping("/login")
  4. publicResponseModelget(@RequestBodyCaptchaVO captchaVO){
  5. ResponseModel response = captchaService.verification(captchaVO);
  6. if(response.isSuccess()==false){
  7. //验证码校验失败,返回信息告诉前端
  8. //repCode 0000 无异常,代表成功
  9. //repCode 9999 服务器内部异常
  10. //repCode 0011 参数不能为空
  11. //repCode 6110 验证码已失效,请重新获取
  12. //repCode 6111 验证失败
  13. //repCode 6112 获取验证码失败,请联系管理员
  14. }
  15. return response;
  16. }

2.2.3 后端接口

获取验证码接口:http://*:*/captcha/get

请求参数:
  1. {
  2. "captchaType":"blockPuzzle"//验证码类型 clickWord
  3. }
响应参数:
  1. {
  2. "repCode":"0000",
  3. "repData":{
  4. "originalImageBase64":"底图base64",
  5. "point":{//默认不返回的,校验的就是该坐标信息,允许误差范围
  6. "x":205,
  7. "y":5
  8. },
  9. "jigsawImageBase64":"滑块图base64",
  10. "token":"71dd26999e314f9abb0c635336976635",//一次校验唯一标识
  11. "secretKey":"16位随机字符串",//aes秘钥,开关控制,前端根据此值决定是否加密
  12. "result":false,
  13. "opAdmin":false
  14. },
  15. "success":true,
  16. "error":false
  17. }

核对验证码接口接口:http://*:*/captcha/check

请求参数:
  1. {
  2. "captchaType":"blockPuzzle",
  3. "pointJson":"QxIVdlJoWUi04iM+65hTow==",//aes加密坐标信息
  4. "token":"71dd26999e314f9abb0c635336976635"//get请求返回的token
  5. }
响应参数:
  1. {
  2. "repCode":"0000",
  3. "repData":{
  4. "captchaType":"blockPuzzle",
  5. "token":"71dd26999e314f9abb0c635336976635",
  6. "result":true,
  7. "opAdmin":false
  8. },
  9. "success":true,
  10. "error":false
  11. }

2.2.4 防刷功能

  1. a.同一用户,登录错误3次才要求验证码,考虑是登录模块的功能。
  2. b.同一用户,限制请求验证码,5分钟不能超过100次等。
  3. 以上功能,我们会在service/springboot示例代码中提供额外的参考代码,不集成在jar中。

2.2.5 SpringMVC项目

  1. 示例:仓库service\springmvc。考虑部分老项目,还是非springboot的,我们提供spring mvc的项目示例代码。
  2. 主要是配置redisTemplate和包扫描。整理中...

a.引入jar,已上传至maven中央仓库。

  1. <dependency>
  2. <groupId>com.github.anji-plus</groupId>
  3. <artifactId>captcha</artifactId>
  4. <version>1.2.3</version>
  5. </dependency>

b.引入CaptchaConfig.java配置文件,需自行配置参数, 详情参照service\springmvc目录下

c.引入外部缓存,例:redis

  1. 参考:
  2. 1.CaptchaCacheServiceRedisImpl
  3. 2.resources.META-INF.services配置文件

3 Q & A

3.1 linux部署注意事项点选文字

3.1.1 字体乱码问题

点选文字中所用字体默认为宋体,linux不支持该字体,所以可能会出现以下图中情况,如图3-1所示。

字体错误

图3-1 点选文字字体乱码

3.1.2 乱码解决方案

宋体黑体为例

1、安装字体库

在CentOS 4.x开始用fontconfig来安装字体库,所以输入以下命令即可:

  1. sudo yum -y install fontconfig

这时在/usr/shared目录就可以看到fonts和fontconfig目录了(之前是没有的): 接下来就可以给我们的字体库中添加中文字体了。

2、首先在/usr/shared/fonts目录下新建一个目录chinese:

CentOS中,字体库的存放位置正是上图中看到的fonts目录,所以我们首先要做的就是找到中文字体文件放到该目录下,而中文字体文件在我们的windows系统中就可以找到,打开c盘下的Windows/Fonts目录:

3、紧接着需要修改chinese目录的权限:

  1. sudo chmod -R 755/usr/share/fonts/chinese

接下来需要安装ttmkfdir来搜索目录中所有的字体信息,并汇总生成fonts.scale文件,输入命令:

  1. sudo yum -y install ttmkfdir

然后执行ttmkfdir命令即可:

  1. ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir

4、最后一步就是修改字体配置文件了,首先通过编辑器打开配置文件 :

  1. vim /etc/fonts/fonts.conf

可以看到一个Font list,即字体列表,在这里需要把我们添加的中文字体位置加进去:

  1. /usr/share/fonts/chinese

5、然后输入:wq保存退出,最后别忘了刷新内存中的字体缓存,这样就不用reboot重启了:

  1. fc-cache

6、这样所有的步骤就算完成了,最后再次通过fc-list看一下字体列表:

  1. fc-list