一款安全强大的行为验证码，提供滑动拼图和文字点选两种方式，UI支持弹出和嵌入方式（附源码）

前言

验证码是网络安-全的重要组成部分，用于区分用户是人类还是自动化程序。然而，传统的字符型验证码存在一些痛点，比如用户体验不佳、容易被自动化工具破解等。开发者常常面临需要从头开发验证码系统的困境，这不仅增加了开发成本，也难以保证验证码的安全性和效率。

为了解决这些问题，开发者需要一款易于集成、安全且高效的验证码解决方案。

介绍

AJ-Captcha行为验证码系统正是为了满足这些需求而设计的。它采用嵌入式集成方式，不仅接入方便，而且安全高效。与传统验证码相比，它通过展示验证码、采集用户行为、分析用户行为的流程，优化了用户体验，并能快速准确地返回人机判定结果。目前，AJ-Captcha提供滑动拼图和文字点选两种类型的验证码。

特点

AJ-Captcha的详细特点包括：

• 多端支持：后端基于Java实现，提供纯Java.jar和SpringBoot Starter。前端支持Android、iOS、Flutter、Uni-App、ReactNative、Vue、Angular、Html、Php等多种平台。

• 验证码类型：提供滑动拼图（blockPuzzle）和文字点选（clickWord）两种验证码类型。

• 用户体验：用户只需产生行为轨迹，无需键盘手动输入，简化了cao作流程。

• 安-全性：通过二次校验机制，确保验证数据的有效性，增强了安-全性。

技术架构

AJ-Captcha的技术架构包括：

• 后端：基于Java，提供纯Java.jar和SpringBoot Starter，方便快速集成到Java项目中。

• 前端：提供了多端示例代码，包括但不限于Android、iOS、Flutter、Uni-App、ReactNative、Vue、Angular、Html、Php等。

部署方式

部署AJ-Captcha的步骤如下：

1. 启动后端：导入Eclipse或Intellij，启动service/springboot的StartApplication。

2. 启动前端：使用Visual Code打开文件夹view/vue，执行npm install后运行npm run dev，在浏览器中登录。

开源协议

AJ-Captcha遵循Apache License开源协议，允许免费使用和修改。具体的开源协议详情可以参考项目的文档或源码仓库中的相关文件。通常情况下，开源协议允许商用，但需要遵守相应的版权和贡献规定。

即刻体验一波

AJ-Captcha提供了在线体验功能，用户可以通过以下步骤即刻体验：

1. 访问在线文档了解详细信息。

2. 根据文档指引，启动后端和前端服务。

3. 在浏览器中查看验证码的展示效果，并体验滑动拼图和文字点选的cao作流程。

后端集成（Java）

如果您的项目是基于Java的，可以通过以下步骤将AJ-Captcha集成到后端：

1. 添加依赖：如果您使用Maven构建项目，可以在pom.xml文件中添加以下依赖：

   

2. 配置application.properties：在Spring Boot项目的配置文件中添加AJ-Captcha的相关配置：

# AJ-Captcha配置
# 定制化配置

1. 启动AJ-Captcha服务：在Spring Boot的主类或配置类上添加@EnableCaptcha注解，以启用验证码服务。

import cn.beliefteam.ajCaptcha.annotation.EnableCaptcha;

@EnableCaptcha
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

前端集成（以Vue为例）

假设您的前端是基于Vue.js的，可以通过以下步骤将AJ-Captcha集成到前端：

1. 安装AJ-Captcha前端库：在Vue项目的根目录下运行以下命令安装AJ-Captcha前端库：

npm install aj-captcha --save

1. 引入并使用AJ-Captcha组件：在Vue组件中引入并使用AJ-Captcha组件。

<template>
  <div>
    <!-- 使用AJ-Captcha组件 -->
    <aj-captcha @captcha-verified="onCaptchaVerified"></aj-captcha>
  </div>
</template>

<script>
import AjCaptcha from 'aj-captcha';

export default {
  components: {
    AjCaptcha
  },
  methods: {
    onCaptchaVerified(captchaInfo) {
      // 处理验证码验证成功
      console.log('验证码验证成功：', captchaInfo);
    }
  }
}
</script>

1. 配置路由（如果需要）：如果需要在Vue路由中配置验证码页面，可以在路由配置中添加对应的路径和组件。

// router/index.js
import AjCaptcha from 'aj-captcha';

const routes = [
  // ...
  {
    path: '/captcha',
    component: AjCaptcha
  }
  // ...
];

注意事项

• 请确保后端服务已启动，并且前端能够正确访问到AJ-Captcha的API。

• 在集成过程中，可能需要根据项目的实际需求对配置和代码进行相应的调整。

结语

AJ-Captcha 行为验证码系统为开发者提供了一个高效、安全且易于集成的验证码解决方案。它通过创新的用户交互方式，不仅提升了用户体验，还增强了系统的安全性。

源码地址：https://gitee.com/anji-plus/captcha ，

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