摒弃传统字符型验证码#xff0c;采用行为验证码采用嵌入式集成方式#xff0c;接入方便#xff0c;安全#…一、背景

1.1

传统字符型验证码展示-填写字符-比对答案的流程目前已可被机器暴力破解应用程序容易被自动化脚本和机器人攻击。

摒弃传统字符型验证码采用行为验证码采用嵌入式集成方式接入方便安全高效。

验证码展示-采集用户行为-分析用户行为流程用户只需要产生指定的行为轨迹不需要键盘手动输入极大优化了传统验证码用户体验不佳的问题同时快速、准确的返回人机判定结果。

1.2

网站登录保护用户账号免受非法登录尝试在线表单提交避免垃圾邮件和恶意数据填充论坛或社区防止机器人自动发帖和灌水支付验证保障交易安全防止欺诈行为

二、anji-plus

AJ-Captcha行为验证码包含滑动拼图、文字点选两种方式UI支持弹出和嵌入两种方式。

后端提供Java实现前端提供了php、angular、html、vue、uni-app、flutter、android、ios等代码示例。

代码开源地址https://gitee.com/anji-plus/captcha

文档地址https://ajcaptcha.beliefteam.cn/captcha-doc/

2.1

clickWord验证用户拖动/点击一次验证码拼图即视为一次“验证”不论拼图/点击是否正确二次校验验证数据随表单提交到后台后后台需要调用captchaService.verification做二次校验。

目的是核实验证数据的有效性。

2.2

验证数据随表单提交到后台后后台需要调用captchaService.verification做二次校验。

第4步返回校验通过/失败到产品应用后端再返回到前端。

如下图所示。

三、代码实现

dependencygroupIdcom.anji-plus/groupIdartifactIdspring-boot-starter-captcha/artifactIdversion1.3.0/version

/dependency3.2

验证码类型default,blockPuzzle,clickWordtype:

default#

缓存类型local,redis,othercache-type:

redis#

local缓存的阈值,达到这个值清除缓存cache-number:

1000#

local定时清除过期缓存(单位秒)设置为0代表不执行timing-clear:

180#

滑块验证码的滑块干扰项interference-options:

文字验证码的文字数量【暂不可用】click-word-count:

WenQuanZhengHei.ttf#

历史数据清理是否开启history-data-clear-enable:

false#

接口请求次数一分钟限制是否开启req-frequency-limit-enable:

true#

验证失败5次get接口锁定req-get-lock-limit:

验证失败后锁定时间间隔,sreq-get-lock-seconds:

360#

get接口一分钟内请求数限制req-get-minute-limit:

30#

check接口一分钟内请求数限制req-check-minute-limit:

60#

verify接口一分钟内请求数限制req-verify-minute-limit:

603.3

dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-redis/artifactId

/dependency实现CaptchaCacheService

package

com.qiangesoft.captcha.cache;import

com.anji.captcha.service.CaptchaCacheService;

import

org.springframework.beans.factory.annotation.Autowired;

import

org.springframework.data.redis.core.StringRedisTemplate;import

java.util.concurrent.TimeUnit;/***

redis缓存验证码**

stringRedisTemplate;Overridepublic

void

{stringRedisTemplate.opsForValue().set(key,

value,

TimeUnit.SECONDS);}Overridepublic

boolean

stringRedisTemplate.hasKey(key);}Overridepublic

void

{stringRedisTemplate.delete(key);}Overridepublic

String

stringRedisTemplate.opsForValue().get(key);}Overridepublic

Long

stringRedisTemplate.opsForValue().increment(key,

val);}Overridepublic

在resources目录新建META-INF.services文件夹新建文件名为com.anji.captcha.service.CaptchaCacheService内容为com.qiangesoft.captcha.cache.CaptchaCacheServiceRedisImpl

3.4

com.qiangesoft.captcha.controller;import

com.anji.captcha.model.common.ResponseModel;

import

com.anji.captcha.model.vo.CaptchaVO;

import

com.anji.captcha.service.CaptchaService;

import

com.qiangesoft.captcha.pojo.LoginDTO;

import

com.qiangesoft.captcha.pojo.ResultVO;

import

org.springframework.beans.factory.annotation.Autowired;

import

org.springframework.stereotype.Controller;

import

org.springframework.web.bind.annotation.*;/***

登录接口**

captchaService;GetMapping(/)public

String

login;}ResponseBodyPostMapping(/login)public

ResultVO

CaptchaVO();captchaVO.setCaptchaVerification(loginDTO.getCaptcha());ResponseModel

response

captchaService.verification(captchaVO);if

{throw

RuntimeException(图片验证码校验失败);}//

todo

placeholder账号/el-input/el-form-itemel-form-item

label密码

placeholder密码/el-input/el-form-itemel-form-itemel-button

typeprimary

clickcheckParam登录/el-button/el-form-item/el-formVerifyrefverifycaptcha-typeblockPuzzle:img-size{width:400px,height:200px}successlogin/!--

Verify--!--

:img-size{width:400px,height:200px}--!--

successlogin--!--

./../components/verifition/Verify

import

{document.removeEventListener(keyup,

{document.addEventListener(keyup,

{handlerKeyup

{this.checkParam()}},checkParam

{if

{Message.error(请先输入账号密码)}this.$refs.verify.show()},login

(params)

params.captchaVerification}).then(res

{const

{Message.success(登录成功)this.$router.push(/index)}

else

{Message.error(res.message)}})}}

/script

dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId

/dependency配置静态资源

com.qiangesoft.captcha.config;import

org.springframework.context.annotation.Configuration;

import

org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

import

org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/***

全局异常处理**

addResourceHandlers(ResourceHandlerRegistry

registry)

{registry.addResourceHandler(/static/**).addResourceLocations(classpath:/static/);}

}html代码

xmlns:thhttp://www.thymeleaf.org

headmeta

nameviewportcontentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno/titleverify插件demo/titlelink

relstylesheet

th:href{/static/css/verify.css}scriptif

(!window.Promise)

srchttps://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js

{border:

srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js/script

script

th:src{/static/js/crypto-js.js}/script

script

th:src{/static/js/ase.js}/script

script

th:src{/static/js/verify.js}/scriptscript//

滑块$(#mpanel).slideVerify({baseUrl:

pop,containerId:

$(#password).val();$.ajax({url:

/login,type:

params.captchaVerification}),success:

function

文字点击$(#mpanel1).pointsVerify({baseUrl:

http://localhost:8028,containerId:

btn1,mode:

$(#password).val();$.ajax({url:

/login,type:

params.captchaVerification}),success:

function

功能描述请求方式获取验证码/captcha/getpost核对验证码/captcha/checkpost

接口调用流程

71dd26999e314f9abb0c635336976635,

一次校验唯一标识secretKey:

71dd26999e314f9abb0c635336976635

}响应数据

71dd26999e314f9abb0c635336976635,result:

true,opAdmin:

码云https://gitee.com/qiangesoft/boot-business/tree/master/boot-business-captcha