還在用圖形驗證碼？

前言

某個項目上獲取短信驗證碼的功能，在獲取驗證碼之前，會校驗一個圖形驗證碼。客戶和我們反饋圖形驗證碼經常輸錯，體驗感太差。

於是，我想到了滑動圖形驗證碼，網上找了一下，發現 gitee 上有個開源的，感覺還不錯，就集成到我們的項目中了，客戶給我們發了一個 👍🏻 的表情。

交互流程

前端

前端實現示例代碼，目前支持

• android
• flutter   
• html   
• ios   
• uni-app   
• vue

後臺

• 引入 jar 包

<dependency>
   <groupid>com.github.anji-plus</groupid>
   <artifactid>captcha</artifactid>
   <version>1.1.8</version>
</dependency>

• 修改 application.properties，自定義底圖和水印，啓動後前端就可以請求接口了

#滑動驗證，底圖路徑，不配置將使用默認圖片
#captcha.captchaOriginalPath.jigsaw=/app/product/dist/captchabg
#滑動驗證，底圖路徑，不配置將使用默認圖片
#captcha.captchaOriginalPath.pic-click=/app/product/dist/captchabg

#漢字統一使用Unicode,保證程序通過@value讀取到是中文，可通過這個在線轉換 https://tool.chinaz.com/tools/unicode.aspx 中文轉Unicode
#右下角水印文字(我的水印)
captcha.water.mark=時刻在奔跑
#右下角水印字體(宋體)
captcha.water.font=宋體
#點選文字驗證碼的文字字體(宋體)
captcha.font.type=宋體
#校驗滑動拼圖允許誤差偏移量(默認5像素)
captcha.slip.offset=5
#aes.key(16位，和前端加密保持一致)
#captcha.aes.key=XwKsGlMcdPMEhR1B

• 非常重要。對於分佈式多實例部署的應用，應用必須自己實現 CaptchaCacheService，比如用 Redis 或者 memcache

• 後端二次校驗接口

以登錄爲例，用戶在提交表單到後臺，會攜帶一個驗證碼相關的參數。後端登錄接口login，首先調用CaptchaService.verification做二次校驗。

@Autowired
@Lazy
private CaptchaService captchaService;

@PostMapping("/login")
public ResponseModel get(@RequestBody CaptchaVO captchaVO) {
    ResponseModel response = captchaService.verification(captchaVO);
    if(response.isSuccess() == false){
        //驗證碼校驗失敗，返回信息告訴前端
        //repCode  0000  無異常，代表成功
        //repCode  9999  服務器內部異常
        //repCode  0011  參數不能爲空
        //repCode  6110  驗證碼已失效，請重新獲取
        //repCode  6111  驗證失敗
        //repCode  6112  獲取驗證碼失敗,請聯繫管理員
    }
    return response;
}

• 獲取驗證碼接口：http://:/captcha/get

請求參數：

{
	"captchaType": "blockPuzzle"  //驗證碼類型 clickWord
}

響應參數：

{
    "repCode": "0000",
    "repData": {
        "originalImageBase64": "底圖base64",
        "point": {    //默認不返回的，校驗的就是該座標信息，允許誤差範圍
            "x": 205,
            "y": 5
        },
        "jigsawImageBase64": "滑塊圖base64",
        "token": "71dd26999e314f9abb0c635336976635", //一次校驗唯一標識
        "result": false,
        "opAdmin": false
    },
    "success": true,
    "error": false
}

• 覈對驗證碼接口接口：http://:/captcha/check

請求參數：

{
	 "captchaType": "blockPuzzle",
	 "pointJson": "QxIVdlJoWUi04iM+65hTow==",  //aes加密座標信息
	 "token": "71dd26999e314f9abb0c635336976635"  //get請求返回的token
}

響應參數：

{
    "repCode": "0000",
    "repData": {
        "captchaType": "blockPuzzle",
        "token": "71dd26999e314f9abb0c635336976635",
        "result": true,
        "opAdmin": false
    },
    "success": true,
    "error": false
}

源碼地址

https://gitee.com/anji-plus/captcha?_from=gitee_search