推薦一個非常好的行爲驗證碼開源項目!

項目介紹

行爲驗證碼採用嵌入式集成方式,接入方便,安全,高效,拋棄了傳統字符型驗證碼展示-填寫字符-比對答案的流程,採用驗證碼展示-採集用戶行爲-分析用戶行爲流程,用戶只需要產生指定的行爲軌跡,不需要鍵盤手動輸入,極大優化了傳統驗證碼用戶體驗不佳的問題;同時,快速、準確的返回人機判定結果。目前對外提供兩種類型的驗證碼,其中包含滑動拼圖、文字點選。如圖1-1、1-2所示。若希望不影響原UI佈局,可採用彈出式交互。

滑動拼圖

點選文字

概念術語描述

術語 描述
驗證碼類型 1)滑動拼圖blockPuzzle 2) 文字點選 clickWord
驗證 用戶拖動/點擊一次驗證碼拼圖即視爲一次"驗證",不論拼圖/點擊是否正確
二次校驗

驗證數據隨表單提交到後臺後,後臺需要調用captchaService.verification做二次校驗。目的是覈實驗證數據的有效性。

 

交互流程

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

目錄結構

├─core
│ ├─captcha    java核心源碼
│ └─captcha-spring-boot-starter    springboot快速啓動
├─images       效果圖
├─service
│ ├─springboot    後端爲springboot項目示例
│ └─springmvc    後端爲springmvc非springboot項目示例
└─view       多語言客戶端示例
 ├─android    原生android實現示例
 ├─flutter    flutter實現示例
 ├─html    原生html實現示例
 ├─ios    原生ios實現示例
 ├─uni-app    uni-app實現示例
 └─vue    vue實現示例

 

1.1 電腦在線體驗:https://mirror.anji-plus.com/captcha-web/

1.2 微信小程序和H5在線體驗(基於uni-app實現)

微信小程序  

 微信小程序Demo

項目地址

開源地址:https://gitee.com/anji-plus/captcha