【仿12306项目】通过纯前端+Kaptcha后端验证码，削弱瞬时高峰并防机器人刷票

news/2025/2/10 21:45:52/

文章目录

  • 一. 场景简介
  • 二. 通过kaptcha实现后端验证码功能
    • 1. 引入依赖
    • 2. 增加配置类
    • 3. 增加后端接口类
  • 三. 纯前端验证码
    • 代码示例
  • 四. 效果演示

一. 场景简介

仿12306项目中，在高并发抢票时，可以利用验证码功能，削弱瞬时的请求高峰。但如果仅仅用后端验证码，又会导致瞬时对验证码验证接口产生巨大请求，因此可以再加一层前端验证码，双重验证码机制。同时也能防止机器人刷票现象

二. 通过kaptcha实现后端验证码功能

1. 引入依赖

<!-- 图形验证码 升级到JDK17后，排除掉javax.servlet-api包 --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version><exclusions><exclusion><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId></exclusion></exclusions></dependency>

2. 增加配置类

KaptchaConfig.java：

java">@Configuration
public class KaptchaConfig {@Beanpublic DefaultKaptcha getDefaultKaptcha() {DefaultKaptcha defaultKaptcha = new DefaultKaptcha();Properties properties = new Properties();properties.setProperty("kaptcha.border", "no");
//        properties.setProperty("kaptcha.border.color", "105,179,90");properties.setProperty("kaptcha.textproducer.font.color", "blue");properties.setProperty("kaptcha.image.width", "90");properties.setProperty("kaptcha.image.height", "28");properties.setProperty("kaptcha.textproducer.font.size", "20");properties.setProperty("kaptcha.session.key", "code");properties.setProperty("kaptcha.textproducer.char.length", "4");properties.setProperty("kaptcha.textproducer.font.names", "Arial");properties.setProperty("kaptcha.noise.color", "255,96,0");properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
//        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");properties.setProperty("kaptcha.obscurificator.impl", KaptchaWaterRipple.class.getName());properties.setProperty("kaptcha.background.impl", KaptchaNoBackhround.class.getName());Config config = new Config(properties);defaultKaptcha.setConfig(config);return defaultKaptcha;}@Beanpublic DefaultKaptcha getWebKaptcha() {DefaultKaptcha defaultKaptcha = new DefaultKaptcha();Properties properties = new Properties();properties.setProperty("kaptcha.border", "no");
//        properties.setProperty("kaptcha.border.color", "105,179,90");properties.setProperty("kaptcha.textproducer.font.color", "blue");properties.setProperty("kaptcha.image.width", "90");properties.setProperty("kaptcha.image.height", "45");properties.setProperty("kaptcha.textproducer.font.size", "30");properties.setProperty("kaptcha.session.key", "code");properties.setProperty("kaptcha.textproducer.char.length", "4");properties.setProperty("kaptcha.textproducer.font.names", "Arial");properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");properties.setProperty("kaptcha.obscurificator.impl", KaptchaWaterRipple.class.getName());Config config = new Config(properties);defaultKaptcha.setConfig(config);return defaultKaptcha;}
}

KaptchaNoBackhround.java：

java">public class KaptchaNoBackhround extends Configurable implements BackgroundProducer {public KaptchaNoBackhround(){}@Overridepublic BufferedImage addBackground(BufferedImage baseImage) {int width = baseImage.getWidth();int height = baseImage.getHeight();BufferedImage imageWithBackground = new BufferedImage(width, height, 1);Graphics2D graph = (Graphics2D)imageWithBackground.getGraphics();graph.fill(new Rectangle2D.Double(0.0D, 0.0D, (double)width, (double)height));graph.drawImage(baseImage, 0, 0, null);return imageWithBackground;}
}

KaptchaWaterRipple.java：

java">public class KaptchaWaterRipple extends Configurable implements GimpyEngine {public KaptchaWaterRipple(){}@Overridepublic BufferedImage getDistortedImage(BufferedImage baseImage) {NoiseProducer noiseProducer = this.getConfig().getNoiseImpl();BufferedImage distortedImage = new BufferedImage(baseImage.getWidth(), baseImage.getHeight(), 2);Graphics2D graph = (Graphics2D)distortedImage.getGraphics();Random rand = new Random();RippleFilter rippleFilter = new RippleFilter();rippleFilter.setXAmplitude(7.6F);rippleFilter.setYAmplitude(rand.nextFloat() + 1.0F);rippleFilter.setEdgeAction(1);BufferedImage effectImage = rippleFilter.filter(baseImage, (BufferedImage)null);graph.drawImage(effectImage, 0, 0, (Color)null, (ImageObserver)null);graph.dispose();noiseProducer.makeNoise(distortedImage, 0.1F, 0.1F, 0.25F, 0.25F);noiseProducer.makeNoise(distortedImage, 0.1F, 0.25F, 0.5F, 0.9F);return distortedImage;}
}

3. 增加后端接口类

KaptchaController.java：

java">@RestController
@RequestMapping("/kaptcha")
public class KaptchaController {@Qualifier("getDefaultKaptcha")@AutowiredDefaultKaptcha defaultKaptcha;@Resourcepublic StringRedisTemplate stringRedisTemplate;@GetMapping("/image-code/{imageCodeToken}")public void imageCode(@PathVariable(value = "imageCodeToken") String imageCodeToken, HttpServletResponse httpServletResponse) throws Exception{ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();try {// 生成验证码字符串String createText = defaultKaptcha.createText();// 将生成的验证码放入redis缓存中，后续验证的时候用到stringRedisTemplate.opsForValue().set(imageCodeToken, createText, 300, TimeUnit.SECONDS);// 使用验证码字符串生成验证码图片BufferedImage challenge = defaultKaptcha.createImage(createText);ImageIO.write(challenge, "jpg", jpegOutputStream);} catch (IllegalArgumentException e) {httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);return;}// 定义response输出类型为image/jpeg类型，使用response输出流输出图片的byte数组byte[] captchaChallengeAsJpeg = jpegOutputStream.toByteArray();httpServletResponse.setHeader("Cache-Control", "no-store");httpServletResponse.setHeader("Pragma", "no-cache");httpServletResponse.setDateHeader("Expires", 0);httpServletResponse.setContentType("image/jpeg");ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();responseOutputStream.write(captchaChallengeAsJpeg);responseOutputStream.flush();responseOutputStream.close();}
}

这样就完成了后端验证码验证功能，接下来只需要前端传入生成的用户token即可，用来对应验证码和所属者。

三. 纯前端验证码

如果仅设计后端验证码，那可能会瞬时大量请求对验证码验证接口产生巨大压力，因此可以再多一层纯前端验证码。将纯前端验证码座位第一层验证码，将后端验证码作为第二层验证码

代码示例

第一层验证码：

 /* ------------------- 第一层验证码 --------------------- */const firstImageCodeSourceA = ref();const firstImageCodeSourceB = ref();const firstImageCodeTarget = ref();const firstImageCodeModalVisible = ref();/*** 加载第一层验证码*/const loadFirstImageCode = () => {// 获取1~10的数：Math.floor(Math.random()*10 + 1)firstImageCodeSourceA.value = Math.floor(Math.random()*10 + 1) + 10;firstImageCodeSourceB.value = Math.floor(Math.random()*10 + 1) + 20;};/*** 显示第一层验证码弹出框*/const showFirstImageCodeModal = () => {loadFirstImageCode();firstImageCodeModalVisible.value = true;};/*** 校验第一层验证码*/const validFirstImageCode = () => {if (parseInt(firstImageCodeTarget.value) === parseInt(firstImageCodeSourceA.value + firstImageCodeSourceB.value)) {// 第一层验证通过firstImageCodeModalVisible.value = false;showImageCodeModal();} else {notification.error({description: '验证码错误'});}};

第二层验证码：

    /* ------------------- 第二层验证码 --------------------- */const imageCodeModalVisible = ref();const imageCodeToken = ref();const imageCodeSrc = ref();const imageCode = ref();/*** 加载图形验证码*/const loadImageCode = () => {imageCodeToken.value = Tool.uuid(8);imageCodeSrc.value = process.env.VUE_APP_SERVER + '/business/kaptcha/image-code/' + imageCodeToken.value;};const showImageCodeModal = () => {loadImageCode();imageCodeModalVisible.value = true;};

四. 效果演示

点击确认订单，先跳出第一层验证码：
在这里插入图片描述
回答正确后跳出第二层图形验证码：
在这里插入图片描述
最后都正确了才会进入购票业务处理。


http://www.ppmy.cn/news/1570968.html

相关文章

使用 Ollama 在 Windows 环境部署 DeepSeek 大模型实战指南

使用 Ollama 在 Windows 环境部署 DeepSeek 大模型实战指南

文章目录 前言Ollama核心特性 实战步骤安装 Ollama验证安装结果部署 DeepSeek 模型拉取模型启动模型 交互体验命令行对话调用 REST API 总结个人简介 前言 近年来&#xff0c;大语言模型&#xff08;LLM&#xff09;的应用逐渐成为技术热点&#xff0c;而 DeepSeek 作为国产开…
阅读更多...
【golang学习之旅】Go 语言并发编程（goroutine、channel 的使用）

【golang学习之旅】Go 语言并发编程（goroutine、channel 的使用）

文章目录 前言1. 为什么要学习 Go 语言并发编程&#xff1f;2. Goroutine&#xff08;协程&#xff09;详解2.1 什么是Goroutine&#xff1f;2.2 如何启动Goroutine&#xff1f;2.3 多个Goroutine并发执行 3. Channel&#xff08;通道&#xff09;详解3.1 什么是Channel&#x…
阅读更多...
如何写出优秀的单元测试？

如何写出优秀的单元测试？

写出优秀的单元测试需要考虑以下几个方面&#xff1a; 1. 测试用例设计 测试用例应该覆盖被测试代码的不同场景和边界情况&#xff0c;以尽可能发现潜在的问题。在设计测试用例时需要关注以下几点&#xff1a; 输入输出数据&#xff1a;要测试的函数或方法可能有多个输入参数…
阅读更多...
c/c++蓝桥杯经典编程题100道（16）链表反转

c/c++蓝桥杯经典编程题100道（16）链表反转

链表反转 c/c蓝桥杯经典编程题100道-目录-CSDN博客 目录 链表反转 一、题型解释 二、例题问题描述 三、C语言实现 解法1&#xff1a;迭代反转&#xff08;难度★&#xff09; 解法2&#xff1a;递归反转&#xff08;难度★★&#xff09; 解法3&#xff1a;分组反转&am…
阅读更多...
基于STM32的智能鱼缸水质净化系统设计

基于STM32的智能鱼缸水质净化系统设计

&#x1f91e;&#x1f91e;大家好&#xff0c;这里是5132单片机毕设设计项目分享&#xff0c;今天给大家分享的是智能鱼缸水质净化系统。 目录 1、设计要求 2、系统功能 3、演示视频和实物 4、系统设计框图 5、软件设计流程图 6、原理图 7、主程序 8、总结 1、设计要求…
阅读更多...
大模型deepseek-r1 本地快速搭建

大模型deepseek-r1 本地快速搭建

1、安装部署ollama 详细步骤见&#xff1a;Ollama 下载和安装 官网下载地址&#xff1a;Ollama官网 2、大模型Deepseekk-r1下载 详细步骤见&#xff1a;大模型deepseek-r1 本地ollama部署详解 ollama run deepseek-r13、Open WebUI部署详解 详细见步骤&#xff1a;大模型d…
阅读更多...
PHP 完整表单实例

PHP 完整表单实例

PHP 完整表单实例 引言 表单是网站与用户交互的重要方式&#xff0c;尤其是在收集用户输入数据时。PHP 作为一种流行的服务器端脚本语言&#xff0c;在处理表单数据方面具有强大的功能。本文将提供一个完整的 PHP 表单实例&#xff0c;涵盖表单创建、数据收集、验证和存储等关…
阅读更多...
如何通过Deepseek的API进行开发和使用(适合开发者和小白的学习使用教程)

如何通过Deepseek的API进行开发和使用(适合开发者和小白的学习使用教程)

目录 一,API创建与获取 二,直接进行API的调用 2.1 安装第三方库 2.2 官方支持的接口调用方式 2.3 编写的小tips 2.4 AI助手工具代码 三, 配置方面的说明 3.1 token价格和字符用量 3.2 响应错误码 最近在休息的时候也是一直会刷到关于deepseek,简单使用了一下,发现这…
阅读更多...
最新文章

Copyright @ 2022~2023