3分钟接入验证码功能!一款基于SpringBoot实现的开源验证码项目

3分钟接入验证码功能!一款基于SpringBoot实现的开源验证码项目


💂 个人网站:IT知识小屋🤟 版权: 本文由【IT学习日记】原创、在ZEEKLOG首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

文章目录

简介

AJ-Captcha是一款基于SpringBoot实现的开源验证码系统,开箱即用,可在项目中快速以插件式接入。支持多种主流验证码类型,如图形验证码、滑动验证码、文字点选等,可广泛应用于登录、注册、接口防刷等高频安全场景。

该系统具有以下特性:

  • 接入便捷: 插件化设计,零侵入接入SpringBoot应用,仅需简单配置即可使用
  • 样式丰富: 支持多种验证码类型,如图形验证码、滑动验证码,可根据业务灵活切换
  • 性能优异: 支持高并发验证码生成,接口响应快速,提升用户体验
  • 兼容性强: 支持内存与Redis多种验证码缓存方式,可支持单体与分布式部署
  • 对接简单: 接口标准化,适配Vue、React等前后端分离项目,提供了php、angular、html、vue、uni-app、flutter、android、ios等方面接入的代码示例
  • 易于扩展: 源码结构清晰,支持自定义验证码样式与校验逻辑

交互流程

1、用户访问应用页面,请求并显示行为验证码

2、用户按照提示要求完成验证码拼图、点击

3、用户提交表单,前端将第二步的输出一同提交到后台

4、验证数据随表单提交到后台后,后台需要调用captchaService.verification做二次校验

5、第4步返回校验通过/失败到产品应用后端,再返回到前端。如下图所示


项目结构

belief-captcha/ ├─ core/ # 核心模块 │ ├─ captcha/ # Java 核心验证码逻辑 │ └─ captcha-spring-boot-starter/ # Spring Boot 快速启动模块 ├─ images/ # 验证码效果图示例 ├─ service/ # 后端服务接入示例 │ ├─ go/ # Go 语言示例项目 │ ├─ php/ # PHP 示例项目 │ ├─ springboot/ # Spring Boot 示例项目 │ └─ springmvc/ # SpringMVC(非 Spring Boot)示例项目 └─ view/ # 多语言客户端示例(前端) ├─ android/ # 原生 Android 示例 ├─ angular/ # Angular 实现示例 ├─ flutter/ # Flutter 实现示例 ├─ html/ # 原生 HTML 示例 ├─ ios/ # 原生 iOS 示例 ├─ php/ # PHP 实现示例 ├─ react/ # React 实现示例 ├─ uni-app/ # Uni-App 实现示例 ├─ wx-applet/ # 微信小程序实现示例 └─ vue/ # Vue 实现示例 

图形码展示

滑动拼图:

滑动拼图

文字点选:

点选文字

本地启动

1、启动后端服务: 导入Eclipse或者Intellij,启动service/springboot的StartApplication

2、启动前端服务: 使用visual code打开文件夹view/vue,npm install后npm run dev


开源地址&使用手册

点击下方的【IT学习日记】回复【资源】领取!

如果这篇文章对您有帮助,请一定帮我点个 “关注”“点赞”,这对我非常重要。我将会继续推荐更多优质项目和新闻。

写在最后

1000+优质开源项目更新进度:251/1000。如需更多类型优质项目推荐,请在文章后留言。

在这里插入图片描述

Read more

day20|学习前端

{{}}。相当于innerText v-bind:attr绑定属性值。 hooks是一个一个可以调用的函数。composition API 返回对象+解构 const{ sum,add,bigSum}=useSum() 一般组件放到components。路由组件放到pages,views文件夹 to路由:1、字符串写法。2、对象写法(name跳转,path跳转) 集中式状态(数据)管理pinia,redux,vuex 把共享的数据交给集中式管理, pinia落地的东西,就是store v-bind单项绑定。v-model双向绑定   function不缓存,computed计算属性缓存,只有依赖变才重新计算。 computed计算属性函数,根据已有响应式数据计算出新值,具有缓存的功能。 watch 入口文件main.ts App.vue根组件 一般组件导入和使用的方法 插值语法 vue3可以写vue2语法,在vue3里,选项式和组合式是共存的。旧语法可以读出setup东西,

By Ne0inhk

SDWebImage 在 Flutter 中的使用:通过插件桥接

SDWebImage 在 Flutter 中的使用:通过插件桥接 关键词:SDWebImage、Flutter插件、跨平台桥接、MethodChannel、图片加载缓存 摘要:本文将带你探索如何在 Flutter 中通过插件桥接技术调用 iOS 原生的 SDWebImage 库。我们会从背景需求出发,用“跨国快递”的比喻解释桥接原理,逐步拆解核心概念,结合代码实战演示如何实现图片加载与缓存,并总结常见问题与未来优化方向。即使你是 Flutter 新手,也能轻松理解跨平台桥接的底层逻辑! 背景介绍 目的和范围 在 Flutter 开发中,图片加载是高频需求。虽然 Flutter 自带 cached_network_image 等第三方库,但在 iOS 平台上,原生的 SDWebImage 经过多年优化,在缓存策略、

By Ne0inhk
前端攻击手段有哪些,该如何预防

前端攻击手段有哪些,该如何预防

* 前端攻击手段有哪些,该如何预防 * 一,xss * Cross Site Script 跨站脚本攻击 * 手段:黑客将JS代码插入到网页内容中,渲染时执行JS代码 * 预防:特殊字符替换(前端或者后端) 这种img的写法可以规避跨域,img图片的加载可以规避跨域 vue和react可以默认屏蔽xss攻击 除了这两种情况 vue v-html的写法 react dangerouslySetInnerHTML (二)CSRF 这也是一个常见的攻击手段 Cross Site Request Forgery跨站请求伪造 手段:黑客诱导用户去访问另一个网站的接口,伪造请求 预防:严格的跨域限制+验证码机制 CSRF详细过程 1,用户登录了A网站,有了cookie 2,黑客诱导用户到B网站,并发起A网站的请求 3,A网站的API发现有了cookie,认为是用户自己操作的 CSRF预防手段 1,严格的跨域请求限制,如判断referrer(请求来源)

By Ne0inhk

Flutter 三方库 serial 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、稳定的 Web 串口通信与工业硬软连接实战

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 serial 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、稳定的 Web 串口通信与工业硬软连接实战 在鸿蒙(OpenHarmony)系统的工业平板、手持 PDA 及桌面协同场景中,如何通过 Web 容器直接操控外部硬件设备(如扫码枪、打印机、传感器)?serial 做为一个优秀的 window.navigator.serial API 的 Flutter 封装库,为鸿蒙开发者提供了跨平台的硬件底座。本文将深入探讨其在鸿蒙生态中的适配要点。 前言 什么是 Web Serial?它允许鸿蒙应用内的 Web 组件直接请求访问用户的串行设备。在 Flutter for OpenHarmony 的实际开发中,serial

By Ne0inhk