Vue项目中高效集成AJ-Captcha行为验证码的3种实战策略

Vue项目中高效集成AJ-Captcha行为验证码的3种实战策略

【免费下载链接】captcha行为验证码(滑动拼图、点选文字)，前后端(java)交互，包含h5/Android/IOS/flutter/uni-app的源码和实现项目地址: https://gitcode.com/gh_mirrors/captc/captcha

在现代Web应用中，安全验证是保护用户数据的第一道防线。AJ-Captcha作为一款开源的行为验证码解决方案，通过滑动拼图和点选文字两种验证方式，为Vue项目提供了专业级的防护机制。本文将深入探讨AJ-Captcha在Vue项目中的集成策略、技术实现细节以及最佳实践，帮助开发者快速构建安全可靠的验证系统。

一、行为验证码的核心价值与应用场景

AJ-Captcha通过分析用户交互行为特征来区分人类与自动化脚本，有效防止恶意攻击和暴力破解。相比传统字符验证码，行为验证码具有更好的用户体验和更高的安全性。其主要应用场景包括：

• 用户登录注册：防止自动化注册和暴力破解密码
• 敏感操作验证：如支付、修改密码、数据导出等关键操作
• 防刷票防爬虫：限制恶意爬虫和刷票行为
• API接口保护：防止API被恶意调用和滥用

滑动拼图验证码界面，用户需要拖动滑块完成验证，直观且易于操作

点选文字验证码界面，用户需要按要求依次点击指定文字，提供更强的安全性

二、项目结构分析与技术选型

AJ-Captcha项目采用前后端分离架构，为Vue项目提供了完整的组件化解决方案：

核心目录结构

view/vue/src/components/verifition/ # Vue组件源码 ├── Verify.vue # 主验证组件 ├── Verify/ # 具体验证类型组件 │ ├── VerifySlide.vue # 滑动验证组件 │ └── VerifyPoints.vue # 点选验证组件 └── api/ # API接口封装 └── index.js # 验证码接口配置

技术栈要求

• Vue 2.x/3.x（项目提供两个版本支持）
• Axios或项目自带的HTTP客户端
• Node.js 10+环境
• 支持ES6+语法

三、基础集成：快速上手指南

3.1 环境准备与项目配置

首先克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/captc/captcha

进入Vue组件目录，查看项目结构：

cd captcha/view/vue npm install

3.2 核心组件引入与配置

在需要使用验证码的Vue组件中引入AJ-Captcha：

<template> <div class="login-container"> <!-- 滑动拼图验证码 --> <verify ref="slideVerify" mode="pop" captcha-type="blockPuzzle" :img-size="{ width: '310px', height: '155px' }" @success="handleSuccess" @error="handleError" @refresh="handleRefresh" /> <!-- 点选文字验证码 --> <verify ref="clickVerify" mode="fixed" captcha-type="clickWord" @success="handleSuccess" @error="handleError" /> </div> </template> <script> import Verify from '@/components/verifition/Verify.vue' export default { components: { Verify }, data() { return { captchaToken: '', isVerified: false } }, methods: { handleSuccess(params) { // 验证成功回调 this.captchaToken = params.captchaVerification this.isVerified = true console.log('验证成功，token:', this.captchaToken) // 提交表单或执行后续操作 this.submitForm() }, handleError(error) { // 验证失败处理 console.error('验证失败:', error) this.$message.error('验证失败，请重试') }, handleRefresh() { // 刷新验证码 console.log('验证码已刷新') }, submitForm() { // 提交表单时带上验证token const formData = { username: this.username, password: this.password, captchaVerification: this.captchaToken } // 调用API接口 this.$api.login(formData).then(res => { // 处理登录结果 }) }, // 主动触发验证 showCaptcha() { this.$refs.slideVerify.show() } } } </script>

3.3 API接口配置

修改API配置文件以适应后端接口：

// src/api/basic.js 或自定义axios配置 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use( config => { // 添加token等认证信息 if (store.getters.token) { config.headers['Authorization'] = 'Bearer ' + store.getters.token } return config }, error => { console.log(error) return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { const res = response.data // 根据后端返回状态码处理 if (res.code !== 200) { // 验证失败等错误处理 return Promise.reject(new Error(res.msg || 'Error')) } return res }, error => { console.log('err' + error) return Promise.reject(error) } ) export default service

四、进阶策略：组件封装与状态管理

4.1 可复用验证码组件封装

创建统一的验证码组件，支持动态切换验证类型：

<!-- src/components/AjCaptchaWrapper.vue --> <template> <div class="captcha-wrapper"> <div v-if="visible" class="captcha-modal"> <div class="captcha-content"> <verify ref="captchaInstance" :mode="mode" :captcha-type="captchaType" :img-size="imgSize" :block-size="blockSize" :bar-size="barSize" @success="onSuccess" @error="onError" @close="onClose" /> </div> </div> <!-- 触发按钮 --> <slot :show="showCaptcha" :isVerified="isVerified"> <button @click="showCaptcha" :disabled="isVerified"> {{ isVerified ? '已验证' : '点击验证' }} </button> </slot> </div> </template> <script> import Verify from './verifition/Verify.vue' export default { name: 'AjCaptchaWrapper', components: { Verify }, props: { // 验证码类型：blockPuzzle(滑动拼图)，clickWord(点选文字) type: { type: String, default: 'blockPuzzle', validator: value => ['blockPuzzle', 'clickWord'].includes(value) }, // 显示模式：pop(弹窗)，fixed(固定位置) mode: { type: String, default: 'pop', validator: value => ['pop', 'fixed'].includes(value) }, // 图片尺寸 imgSize: { type: Object, default: () => ({ width: '310px', height: '155px' }) }, // 滑块尺寸 blockSize: { type: Object, default: () => ({ width: '50px', height: '50px' }) }, // 滑动条尺寸 barSize: { type: Object, default: () => ({ width: '310px', height: '40px' }) } }, data() { return { visible: false, isVerified: false, verification: '' } }, computed: { captchaType() { return this.type } }, methods: { showCaptcha() { if (!this.isVerified) { this.visible = true this.$nextTick(() => { this.$refs.captchaInstance.show() }) } }, onSuccess(params) { this.verification = params.captchaVerification this.isVerified = true this.visible = false this.$emit('verified', params) }, onError(error) { this.$emit('error', error) }, onClose() { this.visible = false this.$emit('close') }, // 重置验证状态 reset() { this.isVerified = false this.verification = '' if (this.$refs.captchaInstance) { this.$refs.captchaInstance.refresh() } }, // 获取验证token getVerification() { return this.verification } } } </script> <style scoped> .captcha-wrapper { display: inline-block; } .captcha-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; } .captcha-content { background: white; border-radius: 8px; padding: 20px; max-width: 400px; width: 90%; } </style>

4.2 Vuex状态管理集成

对于大型应用，建议使用Vuex管理验证码状态：

// store/modules/captcha.js const state = { token: '', isVerified: false, loading: false, error: null, config: { type: 'blockPuzzle', mode: 'pop', imgSize: { width: '310px', height: '155px' } } } const mutations = { SET_TOKEN(state, token) { state.token = token }, SET_VERIFIED(state, verified) { state.isVerified = verified }, SET_LOADING(state, loading) { state.loading = loading }, SET_ERROR(state, error) { state.error = error }, SET_CONFIG(state, config) { state.config = { ...state.config, ...config } }, RESET(state) { state.token = '' state.isVerified = false state.loading = false state.error = null } } const actions = { // 初始化验证码 async initCaptcha({ commit, state }) { commit('SET_LOADING', true) try { const response = await captchaApi.getCaptcha({ captchaType: state.config.type }) commit('SET_LOADING', false) return response } catch (error) { commit('SET_ERROR', error.message) commit('SET_LOADING', false) throw error } }, // 验证验证码 async verifyCaptcha({ commit }, data) { commit('SET_LOADING', true) try { const response = await captchaApi.checkCaptcha(data) if (response.success) { commit('SET_TOKEN', data.captchaVerification) commit('SET_VERIFIED', true) } commit('SET_LOADING', false) return response } catch (error) { commit('SET_ERROR', error.message) commit('SET_LOADING', false) throw error } }, // 重置验证码 resetCaptcha({ commit }) { commit('RESET') } } export default { namespaced: true, state, mutations, actions }

五、高级配置：性能优化与安全加固

5.1 验证码加载性能优化

// 使用异步加载和缓存策略 import { defineAsyncComponent } from 'vue' // Vue 3异步组件 const AsyncVerify = defineAsyncComponent(() => import('@/components/verifition/Verify.vue') ) // 或者在Vue 2中使用 const AsyncVerify = () => ({ component: import('@/components/verifition/Verify.vue'), loading: LoadingComponent, error: ErrorComponent, delay: 200, timeout: 10000 }) // 图片预加载 export function preloadCaptchaImages() { const images = [ require('@/assets/image/default.jpg'), // 添加其他验证码图片 ] images.forEach(src => { const img = new Image() img.src = src }) }

5.2 防刷策略实现

// 验证码防刷策略 class CaptchaAntiSpam { constructor() { this.attempts = {} this.maxAttempts = 5 this.lockTime = 5 * 60 * 1000 // 5分钟 } // 记录尝试次数 recordAttempt(identifier) { const now = Date.now() if (!this.attempts[identifier]) { this.attempts[identifier] = { count: 1, firstAttempt: now, lastAttempt: now } } else { this.attempts[identifier].count++ this.attempts[identifier].lastAttempt = now } // 清理过期记录 this.cleanup() } // 检查是否被锁定 isLocked(identifier) { const record = this.attempts[identifier] if (!record) return false // 检查是否超过最大尝试次数 if (record.count >= this.maxAttempts) { const timeSinceFirst = Date.now() - record.firstAttempt if (timeSinceFirst < this.lockTime) { return true } else { // 锁定时间已过，重置记录 delete this.attempts[identifier] return false } } return false } // 清理过期记录 cleanup() { const now = Date.now() Object.keys(this.attempts).forEach(key => { const record = this.attempts[key] if (now - record.lastAttempt > 24 * 60 * 60 * 1000) { delete this.attempts[key] } }) } // 获取剩余尝试次数 getRemainingAttempts(identifier) { const record = this.attempts[identifier] if (!record) return this.maxAttempts return Math.max(0, this.maxAttempts - record.count) } } // 在Vue组件中使用 export default { data() { return { antiSpam: new CaptchaAntiSpam(), userId: this.getUserId() } }, methods: { async handleCaptcha() { const identifier = `captcha_${this.userId}` // 检查是否被锁定 if (this.antiSpam.isLocked(identifier)) { this.$message.error('尝试次数过多，请5分钟后再试') return } // 记录尝试 this.antiSpam.recordAttempt(identifier) // 显示验证码 this.showCaptcha() }, getUserId() { // 获取用户标识，可以是IP、用户ID等 return localStorage.getItem('userId') || 'anonymous' } } }

5.3 自定义样式与主题

/* 自定义验证码样式 */ :root { --aj-captcha-primary: #409EFF; --aj-captcha-success: #67C23A; --aj-captcha-error: #F56C6C; --aj-captcha-bg: #F5F7FA; --aj-captcha-text: #303133; --aj-captcha-border: #DCDFE6; } /* 暗色主题 */ .aj-captcha-dark { --aj-captcha-bg: #1F2937; --aj-captcha-text: #E5E7EB; --aj-captcha-border: #374151; } /* 响应式设计 */ @media (max-width: 768px) { .captcha-content { max-width: 90%; margin: 10px; } :root { --aj-captcha-width: 280px; --aj-captcha-height: 140px; } } /* 自定义动画效果 */ @keyframes slideSuccess { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } } .slide-verify-success { animation: slideSuccess 0.5s ease-in-out; } /* 高对比度模式 */ @media (prefers-contrast: high) { :root { --aj-captcha-primary: #0066CC; --aj-captcha-success: #228B22; --aj-captcha-error: #DC143C; } }

六、常见问题深度解析与解决方案

6.1 跨域问题解决方案

前后端分离项目常见的跨域问题可以通过以下方式解决：

// 后端配置示例（Spring Boot） @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8080") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } } // 前端代理配置（vue.config.js） module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } // Nginx反向代理配置 server { listen 80; server_name your-domain.com; location /api/ { proxy_pass http://backend-server:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } }

6.2 验证码不显示问题排查

当验证码无法正常显示时，可以按照以下步骤排查：

// 1. 检查网络请求 async function checkCaptchaApi() { try { const response = await fetch('/api/captcha/get', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ captchaType: 'blockPuzzle' }) }) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() console.log('API响应:', data) // 检查返回数据格式 if (data.repCode === '0000' && data.repData) { console.log('图片Base64数据:', data.repData.originalImageBase64.substring(0, 100)) console.log('Token:', data.repData.token) return true } else { console.error('API返回错误:', data.repMsg) return false } } catch (error) { console.error('API请求失败:', error) return false } } // 2. 检查图片加载 function checkImageLoading(imgBase64) { return new Promise((resolve) => { const img = new Image() img.onload = () => resolve(true) img.onerror = () => resolve(false) img.src = `data:image/png;base64,${imgBase64}` }) } // 3. 调试信息输出 export default { methods: { async debugCaptcha() { console.group('验证码调试信息') // 检查组件状态 console.log('组件状态:', { visible: this.visible, isVerified: this.isVerified, captchaType: this.captchaType }) // 检查API状态 const apiOk = await checkCaptchaApi() console.log('API状态:', apiOk ? '正常' : '异常') // 检查DOM元素 const captchaEl = document.querySelector('.verify-img-panel') console.log('DOM元素:', captchaEl ? '存在' : '不存在') console.groupEnd() } } }

6.3 移动端适配优化

<template> <div class="captcha-container" :class="{ 'mobile': isMobile }"> <verify ref="captcha" :captcha-type="captchaType" :img-size="imgSize" :block-size="blockSize" :bar-size="barSize" @success="handleSuccess" /> </div> </template> <script> import { isMobile } from '@/utils/device' export default { data() { return { isMobile: isMobile(), captchaType: 'blockPuzzle' } }, computed: { imgSize() { return this.isMobile ? { width: '280px', height: '140px' } : { width: '310px', height: '155px' } }, blockSize() { return this.isMobile ? { width: '40px', height: '40px' } : { width: '50px', height: '50px' } }, barSize() { return this.isMobile ? { width: '280px', height: '30px' } : { width: '310px', height: '40px' } } }, mounted() { // 监听窗口大小变化 window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { this.isMobile = isMobile() }, handleSuccess(params) { // 移动端可能需要特殊处理 if (this.isMobile) { this.$emit('mobile-success', params) } else { this.$emit('success', params) } } } } </script> <style scoped> .captcha-container { position: relative; } .captcha-container.mobile { transform: scale(0.9); transform-origin: top center; } /* 触摸优化 */ @media (hover: none) and (pointer: coarse) { .verify-move-block { touch-action: pan-y; } .verify-point { min-width: 44px; /* iOS最小触摸区域 */ min-height: 44px; } } /* 防止双击缩放 */ .captcha-container { touch-action: manipulation; } </style>

七、实战案例：完整的登录页面集成

以下是一个完整的登录页面示例，展示了AJ-Captcha的最佳实践：

<template> <div class="login-page"> <div class="login-card"> <h2 class="login-title">用户登录</h2> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" @submit.native.prevent="handleSubmit" > <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user" clearable /> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password clearable /> </el-form-item> <el-form-item label="安全验证" prop="captcha"> <div class="captcha-section"> <aj-captcha-wrapper ref="captchaWrapper" :type="captchaType" :mode="captchaMode" @verified="handleCaptchaVerified" @error="handleCaptchaError" > <template v-slot="{ show, isVerified }"> <el-button :type="isVerified ? 'success' : 'primary'" :icon="isVerified ? 'el-icon-success' : 'el-icon-lock'" @click="show" :loading="captchaLoading" > {{ isVerified ? '已验证' : '点击验证' }} </el-button> </template> </aj-captcha-wrapper> <div v-if="remainingAttempts > 0" class="attempts-info"> 剩余尝试次数: {{ remainingAttempts }} </div> <div v-else class="attempts-warning"> 尝试次数过多，请稍后再试 </div> </div> </el-form-item> <el-form-item> <el-button type="primary" :loading="loginLoading" :disabled="!loginForm.captchaVerified" @click="handleSubmit" class="login-button" > 登录 </el-button> <el-button @click="resetForm"> 重置 </el-button> </el-form-item> </el-form> <div class="login-footer"> <el-checkbox v-model="rememberMe">记住我</el-checkbox> <el-link type="primary" @click="showHelp">帮助</el-link> <el-link type="primary" @click="showRegister">注册</el-link> </div> </div> <!-- 帮助对话框 --> <el-dialog title="验证码帮助" :visible.sync="helpVisible" width="500px" > <div class="help-content"> <h3>如何完成验证？</h3> <p><strong>滑动拼图验证：</strong>拖动滑块，使其与背景图缺口对齐</p> <p><strong>点选文字验证：</strong>按照提示点击图片中的文字</p> <p>如果验证失败，可以点击刷新按钮重新获取验证码</p> </div> </el-dialog> </div> </template> <script> import AjCaptchaWrapper from '@/components/AjCaptchaWrapper.vue' import { mapActions } from 'vuex' export default { name: 'LoginPage', components: { AjCaptchaWrapper }, data() { return { loginForm: { username: '', password: '', captchaVerified: false, captchaToken: '' }, loginRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] }, captchaType: 'blockPuzzle', captchaMode: 'pop', captchaLoading: false, loginLoading: false, rememberMe: false, helpVisible: false, remainingAttempts: 5, antiSpam: new CaptchaAntiSpam() } }, computed: { userId() { // 获取用户标识 return this.loginForm.username || 'anonymous' } }, methods: { ...mapActions('captcha', ['verifyCaptcha', 'resetCaptcha']), async handleCaptchaVerified(params) { this.loginForm.captchaVerified = true this.loginForm.captchaToken = params.captchaVerification try { // 验证验证码 await this.verifyCaptcha({ captchaVerification: this.loginForm.captchaToken }) this.$message.success('验证成功') this.antiSpam.reset(this.userId) } catch (error) { this.$message.error('验证失败，请重试') this.resetCaptchaState() } }, handleCaptchaError(error) { console.error('验证码错误:', error) this.$message.error('验证码加载失败，请刷新重试') this.captchaLoading = false }, async handleSubmit() { // 表单验证 const valid = await this.$refs.loginForm.validate() if (!valid) return // 检查验证状态 if (!this.loginForm.captchaVerified) { this.$message.warning('请先完成安全验证') return } // 检查尝试次数 if (this.antiSpam.isLocked(this.userId)) { this.$message.error('尝试次数过多，请稍后再试') return } this.loginLoading = true try { // 调用登录API const response = await this.$api.login({ username: this.loginForm.username, password: this.loginForm.password, captchaVerification: this.loginForm.captchaToken }) if (response.code === 200) { // 登录成功处理 this.$message.success('登录成功') // 保存登录状态 if (this.rememberMe) { localStorage.setItem('rememberMe', 'true') localStorage.setItem('username', this.loginForm.username) } // 跳转到首页 this.$router.push('/dashboard') } else { // 登录失败 this.$message.error(response.msg || '登录失败') this.antiSpam.recordAttempt(this.userId) this.remainingAttempts = this.antiSpam.getRemainingAttempts(this.userId) this.resetCaptchaState() } } catch (error) { console.error('登录失败:', error) this.$message.error('网络错误，请稍后重试') this.resetCaptchaState() } finally { this.loginLoading = false } }, resetForm() { this.$refs.loginForm.resetFields() this.resetCaptchaState() this.remainingAttempts = 5 }, resetCaptchaState() { this.loginForm.captchaVerified = false this.loginForm.captchaToken = '' if (this.$refs.captchaWrapper) { this.$refs.captchaWrapper.reset() } }, showHelp() { this.helpVisible = true }, showRegister() { this.$router.push('/register') } }, mounted() { // 恢复记住的用户名 if (localStorage.getItem('rememberMe') === 'true') { this.rememberMe = true this.loginForm.username = localStorage.getItem('username') || '' } // 预加载验证码资源 this.preloadCaptchaImages() } } </script> <style scoped> .login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; } .login-card { width: 100%; max-width: 400px; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } .login-title { text-align: center; margin-bottom: 30px; color: #333; font-size: 24px; font-weight: 600; } .captcha-section { display: flex; flex-direction: column; gap: 10px; } .attempts-info { font-size: 12px; color: #666; } .attempts-warning { font-size: 12px; color: #f56c6c; } .login-button { width: 100%; margin-bottom: 10px; } .login-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } .help-content h3 { margin-bottom: 15px; color: #333; } .help-content p { margin-bottom: 10px; color: #666; line-height: 1.6; } /* 响应式设计 */ @media (max-width: 768px) { .login-card { padding: 20px; margin: 10px; } .login-title { font-size: 20px; } } </style>

八、总结与最佳实践

AJ-Captcha在Vue项目中的集成不仅仅是技术实现，更是安全策略的重要组成部分。通过本文介绍的三种集成策略，开发者可以根据项目需求选择最适合的方案：

1. 基础集成：适合快速上手的简单项目
2. 组件封装：适合需要高度复用的中型项目
3. 状态管理：适合复杂的大型企业级应用

关键实践要点

• 安全性优先：始终在后端进行二次验证，前端验证仅用于提升用户体验
• 性能优化：合理使用缓存、异步加载和图片优化技术
• 用户体验：提供清晰的错误提示和友好的交互反馈
• 移动端适配：确保在移动设备上的良好体验
• 监控与日志：记录验证失败日志，便于问题排查和安全分析

扩展建议

• 多语言支持：根据项目需求添加国际化支持
• 主题定制：提供多种主题样式，满足不同设计需求
• 统计与分析：收集验证成功率、失败原因等数据，持续优化
• A/B测试：对比不同验证方式的转化率和安全性

AJ-Captcha的完整实现可以参考项目中的示例代码，包括Vue演示页面、后端实现以及其他前端框架的集成方案。通过合理的架构设计和持续优化，AJ-Captcha能够为你的Vue应用提供可靠的安全保障，同时保持优秀的用户体验。

AJ-Captcha验证流程示意图，展示了从请求验证码到验证结果返回的完整过程

记住：安全验证不是一次性的任务，而是一个持续优化的过程。随着攻击手段的不断演变，验证码系统也需要不断更新和改进。AJ-Captcha的开源特性使其能够快速响应安全威胁，为你的应用提供持续的保护。

【免费下载链接】captcha行为验证码(滑动拼图、点选文字)，前后端(java)交互，包含h5/Android/IOS/flutter/uni-app的源码和实现项目地址: https://gitcode.com/gh_mirrors/captc/captcha