相比于傳統(tǒng)驗(yàn)證碼，用戶(hù)只需要根據(jù)顯示的驗(yàn)證產(chǎn)生指定的行為軌跡，不需要通過(guò)鍵盤(pán)輸入，極大地提升了用戶(hù)體驗(yàn)。

滑塊拼圖

滑塊拼圖

文字點(diǎn)擊

文字點(diǎn)擊

快速入門(mén)

• 依賴(lài)引入

<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

# 滑動(dòng)驗(yàn)證，底圖路徑，不配置將使用默認(rèn)圖片
# 支持全路徑
# 支持項(xiàng)目路徑,以classpath:開(kāi)頭,取resource目錄下路徑,例：classpath:images/jigsaw
aj.captcha.jigsaw=classpath:images/jigsaw
# 滑動(dòng)驗(yàn)證，底圖路徑，不配置將使用默認(rèn)圖片
# 支持全路徑
# 支持項(xiàng)目路徑,以classpath:開(kāi)頭,取resource目錄下路徑,例：classpath:images/pic-click
aj.captcha.pic-click=classpath:images/pic-click

# 對(duì)于分布式部署的應(yīng)用，我們建議應(yīng)用自己實(shí)現(xiàn)CaptchaCacheService，比如用Redis或者memcache，
# 參考CaptchaCacheServiceRedisImpl.java
# 如果應(yīng)用是單點(diǎn)的，也沒(méi)有使用redis，那默認(rèn)使用內(nèi)存。
# 內(nèi)存緩存只適合單節(jié)點(diǎn)部署的應(yīng)用，否則驗(yàn)證碼生產(chǎn)與驗(yàn)證在節(jié)點(diǎn)之間信息不同步，導(dǎo)致失敗。
# ?。。?注意啦，如果應(yīng)用有使用spring-boot-starter-data-redis，
# 請(qǐng)打開(kāi)CaptchaCacheServiceRedisImpl.java注釋。
# redis ----->  SPI： 在resources目錄新建META-INF.services文件夾(兩層)，參考當(dāng)前服務(wù)resources。
# 緩存local/redis...
aj.captcha.cache-type=local
# local緩存的閾值,達(dá)到這個(gè)值，清除緩存
#aj.captcha.cache-number=1000
# local定時(shí)清除過(guò)期緩存(單位秒),設(shè)置為0代表不執(zhí)行
#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

# 驗(yàn)證碼類(lèi)型default兩種都實(shí)例化。
aj.captcha.type=default
# 漢字統(tǒng)一使用Unicode,保證程序通過(guò)@value讀取到是中文，可通過(guò)這個(gè)在線轉(zhuǎn)換
# https://tool.chinaz.com/tools/unicode.aspx 中文轉(zhuǎn)Unicode
# 右下角水印文字(我的水印)
aj.captcha.water-mark=我的水印
# 右下角水印字體(不配置時(shí)，默認(rèn)使用文泉驛正黑)
# 由于宋體等涉及到版權(quán)，我們jar中內(nèi)置了開(kāi)源字體【文泉驛正黑】
# 方式一：直接配置OS層的現(xiàn)有的字體名稱(chēng)，比如：宋體
# 方式二：自定義特定字體，請(qǐng)將字體放到工程resources下fonts文件夾，支持ttf\ttc\otf字體
# aj.captcha.water-font=WenQuanZhengHei.ttf
# 點(diǎn)選文字驗(yàn)證碼的文字字體(文泉驛正黑)
# aj.captcha.font-type=WenQuanZhengHei.ttf
# 校驗(yàn)滑動(dòng)拼圖允許誤差偏移量(默認(rèn)5像素)
aj.captcha.slip-offset=5
# aes加密坐標(biāo)開(kāi)啟或者禁用(true|false)
aj.captcha.aes-status=true
# 滑動(dòng)干擾項(xiàng)(0/1/2)
aj.captcha.interference-options=2

#點(diǎn)選字體樣式 默認(rèn)Font.BOLD
aj.captcha.font-style=1
#點(diǎn)選字體字體大小
aj.captcha.font-size=25
#點(diǎn)選文字個(gè)數(shù),存在問(wèn)題，暫不支持修改
#aj.captcha.click-word-count=4


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

# 接口請(qǐng)求次數(shù)一分鐘限制是否開(kāi)啟 true|false
aj.captcha.req-frequency-limit-enable=false
# 驗(yàn)證失敗5次，get接口鎖定
aj.captcha.req-get-lock-limit=5
# 驗(yàn)證失敗后，鎖定時(shí)間間隔,s
aj.captcha.req-get-lock-seconds=360
# get接口一分鐘內(nèi)請(qǐng)求數(shù)限制
aj.captcha.req-get-minute-limit=30
# check接口一分鐘內(nèi)請(qǐng)求數(shù)限制
aj.captcha.req-check-minute-limit=30
# verify接口一分鐘內(nèi)請(qǐng)求數(shù)限制(暫用不上，可后臺(tái)直接調(diào)用captchaService)
#aj.captcha.req-verify-minute-limit=30

• 啟動(dòng)
  配置完成直接點(diǎn)擊啟動(dòng)按鈕即可

• 默認(rèn)API，可以看出已經(jīng)幫我們實(shí)現(xiàn)好邏輯

  
  
  默認(rèn)API

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

• {@link com.anji.captcha.controller.CaptchaController#check(CaptchaVO, HttpServletRequest)} 前端回傳用戶(hù)行為點(diǎn)坐標(biāo)信息，進(jìn)行校驗(yàn)

• {@link com.anji.captcha.controller.CaptchaController#verify(CaptchaVO, HttpServletRequest)} 后端二次校驗(yàn)，例如驗(yàn)證碼通過(guò)后執(zhí)行登錄操作邏輯

• 注意：在單體項(xiàng)目可以采用默認(rèn)實(shí)現(xiàn)方式存儲(chǔ)驗(yàn)證結(jié)果（正確坐標(biāo)等等）

  • {@link com.anji.captcha.service.impl.CaptchaCacheServiceMemImpl} 內(nèi)存緩存的實(shí)現(xiàn)方式，詳見(jiàn){@link com.anji.captcha.util.CacheUtil}

• 分布式項(xiàng)目，官方demo采用redis方式存儲(chǔ)

  • {@link com.anji.captcha.demo.service.CaptchaCacheServiceRedisImpl} 采用SPI（Java提供的一套用來(lái)被第三方實(shí)現(xiàn)或者擴(kuò)展的接口）的方式進(jìn)行接口拓展

官方前端demo(Vue 3)

• 項(xiàng)目結(jié)構(gòu)

  
  
  項(xiàng)目結(jié)構(gòu)
  
  

  詳見(jiàn)：Verify組件以及相關(guān)子組件

• 啟動(dòng)

# 安裝依賴(lài)
yarn
# 啟動(dòng)項(xiàng)目
yarn serve

參考文章

• AJ-Captcha
• 在線base64<->圖片