The verification code does this, and it is a force higher in an instant

Preface

Behavior verification codes are verified through user operations. Common behavior verification codes include drag type and touch type.

Drag-type verification is based on the picture display, drag the designated graphics to the designated position to complete the verification. The touch verification code is to complete the verification by clicking the graphic that appears in the example with the mouse.

Behavior verification code application

Today I recommend a very good behavior verification code AJ-Captcha (project address

The verification process of AJ-Captcha

1. The user visits the login page and sends a request to display the behavior verification code
2. The user completes the verification code puzzle/click as prompted
3. The user submits the form, and the front-end submits the output of the second step to the back-end together
4. After the verification data is submitted to the backend along with the form, the backend needs to call captchaService.verification for secondary verification.
5. Step 4 returns the verification pass/fail to the back end of the product application, and then back to the front end. As shown below.

If you are a Maven developer, it is very convenient to use. The maintainer of the project has pushed the dependencies to the central warehouse. Only need to introduce dependencies to complete 90% of the workload. Next, you only need to perform a second verification in the login interface.

The project integrates a variety of front-end languages html , vue , flutter , uni-app , Android Kotlin , IOS , php AJ_Captcha into the project.

Next, we take Spring Boot + html as an example to see how to quickly integrate AJ_Captcha complete the interaction process of the behavior verification code.

The first step is to introduce AJ_Captcha dependency in Spring Boot

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

AJ_Captcha implements the verification code generation and verification interface by default. The default request address of the verification code generation interface is /captcha/get , and the default request address of the verification interface is /captcha/check . In other words, after completing the above steps, you can provide an interface for the front end to obtain and verify the verification code. If you want to make your verification code more personal, you can configure the following properties:

# 滑动验证，底图路径，不配置将使用默认图片
# 支持全路径
# 支持项目路径,以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

The second step, the front-end pseudo code call interface

1. Introduce the verification code style and verification documents
2. Verification code acquisition and verification

<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>

After the verification code is successfully verified, a serial code

The third step, user login, secondary verification

When the client logs in, it carries the serial code returned after the verification is successful, and performs a second verification in the login interface, and the verification process is completed.

@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;
    }
    // 验证通过后，继续登录流程
}

That's it for today's content. Take this opportunity and try to use this high-value behavior verification code to replace the graphic verification code in the project.