还在用图形验证码？

前言

某个项目上获取短信验证码的功能，在获取验证码之前，会校验一个图形验证码。客户和我们反馈图形验证码经常输错，体验感太差。

于是，我想到了滑动图形验证码，网上找了一下，发现 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