当前位置:   article > 正文

推荐一款强大的行为验证码,采用创新的用户交互方式,安全高效(附源码)

推荐一款强大的行为验证码,采用创新的用户交互方式,安全高效(附源码)

前言

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

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

介绍

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的相关配置:

  1. # AJ-Captcha配置
  2. # 定制化配置
  1. 启动AJ-Captcha服务:在Spring Boot的主类或配置类上添加@EnableCaptcha注解,以启用验证码服务。

  1. import cn.beliefteam.ajCaptcha.annotation.EnableCaptcha;
  2. @EnableCaptcha
  3. public class Application {
  4.     public static void main(String[] args) {
  5.         SpringApplication.run(Application.class, args);
  6.     }
  7. }
前端集成(以Vue为例)

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

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

npm install aj-captcha --save
  1. 引入并使用AJ-Captcha组件:在Vue组件中引入并使用AJ-Captcha组件。

  1. <template>
  2.   <div>
  3.     <!-- 使用AJ-Captcha组件 -->
  4.     <aj-captcha @captcha-verified="onCaptchaVerified"></aj-captcha>
  5.   </div>
  6. </template>
  7. <script>
  8. import AjCaptcha from 'aj-captcha';
  9. export default {
  10.   components: {
  11.     AjCaptcha
  12.   },
  13.   methods: {
  14.     onCaptchaVerified(captchaInfo) {
  15.       // 处理验证码验证成功
  16.       console.log('验证码验证成功:', captchaInfo);
  17.     }
  18.   }
  19. }
  20. </script>
  1. 配置路由(如果需要):如果需要在Vue路由中配置验证码页面,可以在路由配置中添加对应的路径和组件。

  1. // router/index.js
  2. import AjCaptcha from 'aj-captcha';
  3. const routes = [
  4.   // ...
  5.   {
  6.     path: '/captcha',
  7.     component: AjCaptcha
  8.   }
  9.   // ...
  10. ];
注意事项
  • 请确保后端服务已启动,并且前端能够正确访问到AJ-Captcha的API。

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

结语

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/903190
推荐阅读
相关标签
  

闽ICP备14008679号