Integrating AJ-Captcha Behavioral Verification in Spring Boot Applications

Hello everyone, I am Dayao.

Preface

Behavioral captchas verify users through interactive actions; common types include drag‑and‑drop and click‑based challenges.

Behavior Captcha Applications

Today I recommend an excellent behavioral captcha library called AJ-Captcha (project URL: https://gitee.com/anji-plus/captcha). It supports both sliding puzzle and text click verification, offers embedded and popup interaction modes, and does not affect the original UI layout.

The verification flow of AJ-Captcha is as follows:

User visits the login page and requests a behavior captcha.

User completes the puzzle or click challenge as prompted.

User submits the form, sending the second‑step output together with the request.

The backend calls captchaService.verification for secondary validation.

The result (pass/fail) is returned to the application backend and then to the front end.

If you are a Maven developer, the library is already published to the central repository; adding the dependency completes about 90% of the work. You only need to perform a secondary verification in the login interface.

The project integrates multiple front‑end technologies such as html, vue, flutter, uni‑app, Android Kotlin, iOS, and php, making it easy to embed AJ_Captcha into various projects.

Step 1: Add 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 provides default endpoints for captcha generation ( /captcha/get) and verification ( /captcha/check). You can customize properties such as image paths, cache type, watermark, offset, AES encryption, request limits, etc.

# Sliding puzzle background image path (classpath or absolute path)
aj.captcha.jigsaw=classpath:images/jigsaw
# Click‑type background image path
aj.captcha.pic-click=classpath:images/pic-click
# Cache type (local or redis)
aj.captcha.cache-type=local
# Watermark text (Unicode)
aj.captcha.water-mark=\u6211\u7684\u6c34\u5370
# Sliding offset (pixels)
aj.captcha.slip-offset=5
# AES encryption toggle
aj.captcha.aes-status=true
# Request frequency limits
aj.captcha.req-frequency-limit-enable=false
# ... (other configuration options)

Step 2: Front‑End Pseudo‑Code to Call the Captcha API

<script>
    $('#content').slideVerify({
        baseUrl: 'http://localhost:8080/', // server address
        containerId: 'btn', // element ID for popup mode
        mode: 'pop', // display mode
        imgSize: { width: '400px', height: '200px' },
        barSize: { width: '400px', height: '40px' },
        beforeCheck: function(){
            let flag = true; // validate parameters here
            return flag;
        },
        ready: function(){},
        success: function(params){
            // params contain secondary verification data
            login($.extend({}, params));
        },
        error: function(){}
    });
</script>

After a successful captcha interaction, the front end receives a token used for secondary verification.

Step 3: Backend Login with Secondary Verification

@Autowired
private CaptchaService captchaService;

@PostMapping("login")
public ResultBean login(@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;
    }
    // Verification passed, continue login process
}

This concludes the tutorial; try replacing your existing graphic captchas with the high‑quality AJ-Captcha for a better user experience.