驗證碼這樣做，瞬間高出一個逼格

行為驗證碼通過用戶的操作來完成驗證，常見的行為驗證碼有拖動式和點觸式。愛掏網 - it200.com

拖動式驗證就是根據圖片顯示，將指定的圖形拖動到指定位置完成驗證。愛掏網 - it200.com而點觸式驗證碼就是通過鼠標點擊出示例中出現的圖形完成驗證。愛掏網 - it200.com

今天推薦一款非常優(yōu)秀的行為驗證碼AJ-Captcha（項目地址https://gitee.com/anji-plus/captcha），這個項目包含了滑動拼圖和文字點選兩種類型的驗證碼，除了嵌入式交互，還提供了彈出式交互的方式，完全不影響原UI布局。愛掏網 - it200.com

AJ-Captcha的驗證流程如下：

1. 用戶訪問登錄頁面，發(fā)送請求顯示行為驗證碼
2. 用戶按照提示要求完成驗證碼拼圖/點擊
3. 用戶提交表單，前端將第二步的輸出一同提交到后臺
4. 驗證數據隨表單提交到后臺后，后臺需要調用captchaService.verification做二次校驗。愛掏網 - it200.com
5. 第4步返回校驗通過/失敗到產品應用后端，再返回到前端。愛掏網 - it200.com如下圖所示。愛掏網 - it200.com

如果你是Maven開發(fā)者，使用起來非常方便，項目的維護人員已經將依賴推送至中央倉庫。愛掏網 - it200.com只需要引入依賴就完成了90%的工作量。愛掏網 - it200.com接下來只需要在登錄接口中進行二次驗證就可以了。愛掏網 - it200.com

項目集成了包括html、vue、flutter、uni-app、Android Kotlin、IOS、php等多種前端語言，可以輕松將AJ_Captcha集成到項目中。愛掏網 - it200.com

接下來我們以Spring Boot+html為例看看如何快速集成AJ_Captcha完成行為驗證碼的交互流程。愛掏網 - it200.com

第一步、Spring Boot中引入AJ_Captcha依賴

com.anji-plusspring-boot-starter-captcha1.2.9

AJ_Captcha默認實現了驗證碼生成和驗證接口，驗證碼生成接口的默認請求地址是/captcha/get，驗證接口的默認請求地址為/captcha/check。愛掏網 - it200.com也就是說完成以上步驟，就可以提供給前端獲取和驗證驗證碼的接口了。愛掏網 - it200.com如果你還想讓你的驗證碼生成的個性一點，可以配置以下屬性：

# 滑動驗證，底圖路徑，不配置將使用默認圖片 # 支持全路徑 # 支持項目路徑,以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，那默認使用內存。愛掏網 - it200.com # 內存緩存只適合單節(jié)點部署的應用，否則驗證碼生產與驗證在節(jié)點之間信息不同步，導致失敗。愛掏網 - it200.com # ！！！ 注意啦，如果應用有使用spring-boot-starter-data-redis， # 請打開CaptchaCacheServiceRedisImpl.java注釋。愛掏網 - it200.com # redis -----> SPI： 在resources目錄新建META-INF.services文件夾(兩層)，參考當前服務resources。愛掏網 - it200.com # 緩存local/redis... aj.captcha.cache-type=local # local緩存的閾值,達到這個值，清除緩存 #aj.captcha.cache-number=1000 # local定時清除過期緩存(單位秒),設置為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 # 驗證碼類型default兩種都實例化。愛掏網 - it200.com aj.captcha.type=default # 漢字統(tǒng)一使用Unicode,保證程序通過@value讀取到是中文，可通過這個在線轉換;yml格式不需要轉換 # https://tool.chinaz.com/tools/unicode.aspx 中文轉Unicode # 右下角水印文字(我的水印) aj.captcha.water-mark=\u6211\u7684\u6c34\u5370 # 右下角水印字體(不配置時，默認使用文泉驛正黑) # 由于宋體等涉及到版權，我們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 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=60 # verify接口一分鐘內請求數限制 aj.captcha.req-verify-minute-limit=60 

第二步、前端偽代碼調用接口

1. 引入驗證碼的樣式以及驗證等文件
2. 驗證碼獲取及驗證

驗證碼驗證成功之后，會返回一個用于二次驗證的串碼。愛掏網 - it200.com

第三步，用戶登錄，二次驗證

客戶端登錄的時候攜帶驗證成功后返回的串碼，在登錄接口中進行二次驗證，驗證流程完畢。愛掏網 - it200.com

@Autowired private CaptchaService captchaService; /** * 頁面獲取token * 大屏數據校驗 * @param user * @return */ @PostMapping("getWebToken") public ResultBean getWebToken(@RequestBody LoginUser user,String captchaVerification){ ResultBean resultBean = new ResultBean(); CaptchaVO captchaVO = new CaptchaVO(); captchaVO.setCaptchaVerification(captchaVerification); ResponseModel respOnseModel= captchaService.verification(captchaVO); if(!responseModel.isSuccess()){ resultBean.fillCode(0,responseModel.getRepMsg()); return resultBean; } // 驗證通過后，繼續(xù)登錄流程 } 

今天的內容就介紹到這里了，趁這個機會，試著使用這款高顏值的行為驗證碼來替換項目中的圖形驗證碼吧。愛掏網 - it200.com