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

Java旅途 2021-08-15 19:49:49 阅读数:116

本文一共[544]字,预计阅读时长:1分钟~
高出

前言

行為驗證碼通過用戶的操作來完成驗證,常見的行為驗證碼有拖動式和點觸式。

拖動式驗證就是根據圖片顯示,將指定的圖形拖動到指定比特置完成驗證。而點觸式驗證碼就是通過鼠標點擊出示例中出現的圖形完成驗證。

行為驗證碼應用

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

AJ-Captcha的驗證流程如下:

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

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

項目集成了包括htmlvueflutteruni-appAndroid KotlinIOSphp等多種前端語言,可以輕松將AJ_Captcha集成到項目中。

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

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

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

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

# 滑動驗證,底圖路徑,不配置將使用默認圖片
# 支持全路徑
# 支持項目路徑,以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讀取到是中文,可通過這個在線轉換;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. 驗證碼獲取及驗證
<script>
$('#content').slideVerify({
baseUrl:'http://localhost:8080/', //服務器請求地址, 默認地址為安吉服務器;
containerId:'btn',//pop模式 必填 被點擊之後出現行為驗證碼的元素id
mode:'pop', //展示模式
imgSize : { //圖片的大小對象,有默認值{ width: '310px',height: '155px'},可省略
width: '400px',
height: '200px',
},
barSize:{ //下方滑塊的大小對象,有默認值{ width: '310px',height: '50px'},可省略
width: '400px',
height: '40px',
},
beforeCheck:function(){ //檢驗參數合法性的函數 mode ="pop"有效
let flag = true;
//實現: 參數合法性的判斷邏輯, 返回一個boolean值
return flag
},
ready : function() {}, //加載完畢的回調
success : function(params) { //成功的回調
// params為返回的二次驗證參數 需要在接下來的實現邏輯回傳服務器
例如: login($.extend({}, params))
},
error : function() {} //失敗的回調
});
</script>

驗證碼驗證成功之後,會返回一個用於二次驗證的串碼。

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

客戶端登錄的時候攜帶驗證成功後返回的串碼,在登錄接口中進行二次驗證,驗證流程完畢。

@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;
}
// 驗證通過後,繼續登錄流程
}

今天的內容就介紹到這裏了,趁這個機會,試著使用這款高顏值的行為驗證碼來替換項目中的圖形驗證碼吧。

版权声明:本文为[Java旅途]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815194944357q.html