驗(yàn)證碼這樣做，瞬間高出一個(gè)逼格
前言
行為驗(yàn)證碼通過(guò)用戶的操作來(lái)完成驗(yàn)證，常見(jiàn)的行為驗(yàn)證碼有拖動(dòng)式和點(diǎn)觸式。
拖動(dòng)式驗(yàn)證就是根據(jù)圖片顯示，將指定的圖形拖動(dòng)到指定位置完成驗(yàn)證。而點(diǎn)觸式驗(yàn)證碼就是通過(guò)鼠標(biāo)點(diǎn)擊出示例中出現(xiàn)的圖形完成驗(yàn)證。
行為驗(yàn)證碼應(yīng)用
今天推薦一款非常優(yōu)秀的行為驗(yàn)證碼AJ-Captcha(項(xiàng)目地址https://gitee.com/anji-plus/captcha)，這個(gè)項(xiàng)目包含了滑動(dòng)拼圖和文字點(diǎn)選兩種類型的驗(yàn)證碼，除了嵌入式交互，還提供了彈出式交互的方式，完全不影響原UI布局。
AJ-Captcha的驗(yàn)證流程如下：
- 用戶訪問(wèn)登錄頁(yè)面，發(fā)送請(qǐng)求顯示行為驗(yàn)證碼
- 用戶按照提示要求完成驗(yàn)證碼拼圖/點(diǎn)擊
- 用戶提交表單，前端將第二步的輸出一同提交到后臺(tái)
- 驗(yàn)證數(shù)據(jù)隨表單提交到后臺(tái)后，后臺(tái)需要調(diào)用captchaService.verification做二次校驗(yàn)。
- 第4步返回校驗(yàn)通過(guò)/失敗到產(chǎn)品應(yīng)用后端，再返回到前端。如下圖所示。
如果你是Maven開(kāi)發(fā)者，使用起來(lái)非常方便，項(xiàng)目的維護(hù)人員已經(jīng)將依賴推送至中央倉(cāng)庫(kù)。只需要引入依賴就完成了90%的工作量。接下來(lái)只需要在登錄接口中進(jìn)行二次驗(yàn)證就可以了。
項(xiàng)目集成了包括html、vue、flutter、uni-app、Android Kotlin、IOS、php等多種前端語(yǔ)言，可以輕松將AJ_Captcha集成到項(xiàng)目中。
接下來(lái)我們以Spring Boot+html為例看看如何快速集成AJ_Captcha完成行為驗(yàn)證碼的交互流程。
第一步、Spring Boot中引入AJ_Captcha依賴
- <dependency>
- <groupId>com.anji-plus</groupId>
- <artifactId>spring-boot-starter-captcha</artifactId>
- <version>1.2.9</version>
- </dependency>
AJ_Captcha默認(rèn)實(shí)現(xiàn)了驗(yàn)證碼生成和驗(yàn)證接口，驗(yàn)證碼生成接口的默認(rèn)請(qǐng)求地址是/captcha/get，驗(yàn)證接口的默認(rèn)請(qǐng)求地址為/captcha/check。也就是說(shuō)完成以上步驟，就可以提供給前端獲取和驗(yàn)證驗(yàn)證碼的接口了。如果你還想讓你的驗(yàn)證碼生成的個(gè)性一點(diǎn)，可以配置以下屬性：
- # 滑動(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
- # 驗(yàn)證碼類型default兩種都實(shí)例化。
- aj.captcha.type=default
- # 漢字統(tǒng)一使用Unicode,保證程序通過(guò)@value讀取到是中文，可通過(guò)這個(gè)在線轉(zhuǎn)換;yml格式不需要轉(zhuǎn)換
- # https://tool.chinaz.com/tools/unicode.aspx 中文轉(zhuǎn)Unicode
- # 右下角水印文字(我的水印)
- aj.captcha.water-mark=\u6211\u7684\u6c34\u5370
- # 右下角水印字體(不配置時(shí)，默認(rèn)使用文泉驛正黑)
- # 由于宋體等涉及到版權(quán)，我們jar中內(nèi)置了開(kāi)源字體【文泉驛正黑】
- # 方式一：直接配置OS層的現(xiàn)有的字體名稱，比如：宋體
- # 方式二：自定義特定字體，請(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
- 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=60
- # verify接口一分鐘內(nèi)請(qǐng)求數(shù)限制
- aj.captcha.req-verify-minute-limit=60
第二步、前端偽代碼調(diào)用接口
1.引入驗(yàn)證碼的樣式以及驗(yàn)證等文件
2.驗(yàn)證碼獲取及驗(yàn)證
- <script>
- $('#content').slideVerify({
- baseUrl:'http://localhost:8080/', //服務(wù)器請(qǐng)求地址, 默認(rèn)地址為安吉服務(wù)器;
- containerId:'btn',//pop模式 必填 被點(diǎn)擊之后出現(xiàn)行為驗(yàn)證碼的元素id
- mode:'pop', //展示模式
- imgSize : { //圖片的大小對(duì)象,有默認(rèn)值{ width: '310px',height: '155px'},可省略
- width: '400px',
- height: '200px',
- },
- barSize:{ //下方滑塊的大小對(duì)象,有默認(rèn)值{ width: '310px',height: '50px'},可省略
- width: '400px',
- height: '40px',
- },
- beforeCheck:function(){ //檢驗(yàn)參數(shù)合法性的函數(shù) mode ="pop"有效
- let flag = true;
- //實(shí)現(xiàn): 參數(shù)合法性的判斷邏輯, 返回一個(gè)boolean值
- return flag
- },
- ready : function() {}, //加載完畢的回調(diào)
- success : function(params) { //成功的回調(diào)
- // params為返回的二次驗(yàn)證參數(shù) 需要在接下來(lái)的實(shí)現(xiàn)邏輯回傳服務(wù)器
- 例如: login($.extend({}, params))
- },
- error : function() {} //失敗的回調(diào)
- });
- </script>
驗(yàn)證碼驗(yàn)證成功之后，會(huì)返回一個(gè)用于二次驗(yàn)證的串碼。
第三步，用戶登錄，二次驗(yàn)證
客戶端登錄的時(shí)候攜帶驗(yàn)證成功后返回的串碼，在登錄接口中進(jìn)行二次驗(yàn)證，驗(yàn)證流程完畢。
- @Autowired
- private CaptchaService captchaService;
- @PostMapping("login")
- public ResultBean login(@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;
- }
- // 驗(yàn)證通過(guò)后，繼續(xù)登錄流程
- }
今天的內(nèi)容就介紹到這里了，趁這個(gè)機(jī)會(huì)，試著使用這款高顏值的行為驗(yàn)證碼來(lái)替換項(xiàng)目中的圖形驗(yàn)證碼吧。
本文轉(zhuǎn)載自微信公眾號(hào)「Java旅途」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系Java旅途公眾號(hào)。
