用户行为验证码（AJ-Captcha）入门

相比于传统验证码，用户只需要根据显示的验证产生指定的行为轨迹，不需要通过键盘输入，极大地提升了用户体验。

滑块拼图

滑块拼图

文字点击

文字点击

快速入门

• 依赖引入

<dependency>
    <groupId>com.anji-plus</groupId>
    <artifactId>spring-boot-starter-captcha</artifactId>
    <version>1.3.0</version>
</dependency>

• 配置文件

spring.application.name=captcha-service
server.port=8088

# 滑动验证，底图路径，不配置将使用默认图片
# 支持全路径
# 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/jigsaw
aj.captcha.jigsaw=classpath:images/jigsaw
# 滑动验证，底图路径，不配置将使用默认图片
# 支持全路径
# 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click
aj.captcha.pic-click=classpath:images/pic-click

# 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis或者memcache，
# 参考CaptchaCacheServiceRedisImpl.java
# 如果应用是单点的，也没有使用redis，那默认使用内存。
# 内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败。
# ！！！ 注意啦，如果应用有使用spring-boot-starter-data-redis，
# 请打开CaptchaCacheServiceRedisImpl.java注释。
# redis ----->  SPI： 在resources目录新建META-INF.services文件夹(两层)，参考当前服务resources。
# 缓存local/redis...
aj.captcha.cache-type=local
# local缓存的阈值,达到这个值，清除缓存
#aj.captcha.cache-number=1000
# local定时清除过期缓存(单位秒),设置为0代表不执行
#aj.captcha.timing-clear=180
#spring.redis.host=10.108.11.46
#spring.redis.port=6379
#spring.redis.password=
#spring.redis.database=2
#spring.redis.timeout=6000

# 验证码类型default两种都实例化。
aj.captcha.type=default
# 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换
# https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode
# 右下角水印文字(我的水印)
aj.captcha.water-mark=我的水印
# 右下角水印字体(不配置时，默认使用文泉驿正黑)
# 由于宋体等涉及到版权，我们jar中内置了开源字体【文泉驿正黑】
# 方式一：直接配置OS层的现有的字体名称，比如：宋体
# 方式二：自定义特定字体，请将字体放到工程resources下fonts文件夹，支持ttf\ttc\otf字体
# aj.captcha.water-font=WenQuanZhengHei.ttf
# 点选文字验证码的文字字体(文泉驿正黑)
# aj.captcha.font-type=WenQuanZhengHei.ttf
# 校验滑动拼图允许误差偏移量(默认5像素)
aj.captcha.slip-offset=5
# aes加密坐标开启或者禁用(true|false)
aj.captcha.aes-status=true
# 滑动干扰项(0/1/2)
aj.captcha.interference-options=2

#点选字体样式 默认Font.BOLD
aj.captcha.font-style=1
#点选字体字体大小
aj.captcha.font-size=25
#点选文字个数,存在问题，暂不支持修改
#aj.captcha.click-word-count=4


aj.captcha.history-data-clear-enable=false

# 接口请求次数一分钟限制是否开启 true|false
aj.captcha.req-frequency-limit-enable=false
# 验证失败5次，get接口锁定
aj.captcha.req-get-lock-limit=5
# 验证失败后，锁定时间间隔,s
aj.captcha.req-get-lock-seconds=360
# get接口一分钟内请求数限制
aj.captcha.req-get-minute-limit=30
# check接口一分钟内请求数限制
aj.captcha.req-check-minute-limit=30
# verify接口一分钟内请求数限制(暂用不上，可后台直接调用captchaService)
#aj.captcha.req-verify-minute-limit=30

• 启动
  配置完成直接点击启动按钮即可

• 默认API，可以看出已经帮我们实现好逻辑

  
  默认API

• {@link com.anji.captcha.controller.CaptchaController#get(CaptchaVO, HttpServletRequest)} 以base64的方式返回滑块底图和滑块图片

• {@link com.anji.captcha.controller.CaptchaController#check(CaptchaVO, HttpServletRequest)} 前端回传用户行为点坐标信息，进行校验

• {@link com.anji.captcha.controller.CaptchaController#verify(CaptchaVO, HttpServletRequest)} 后端二次校验，例如验证码通过后执行登录操作逻辑

• 注意：在单体项目可以采用默认实现方式存储验证结果（正确坐标等等）

  • {@link com.anji.captcha.service.impl.CaptchaCacheServiceMemImpl} 内存缓存的实现方式，详见{@link com.anji.captcha.util.CacheUtil}

• 分布式项目，官方demo采用redis方式存储

  • {@link com.anji.captcha.demo.service.CaptchaCacheServiceRedisImpl} 采用SPI（Java提供的一套用来被第三方实现或者扩展的接口）的方式进行接口拓展

官方前端demo(Vue 3)

• 项目结构

  
  项目结构
  

  详见：Verify组件以及相关子组件

• 启动

# 安装依赖
yarn
# 启动项目
yarn serve

参考文章

• AJ-Captcha
• 在线base64<->图片