springboot实现图片验证码登录

article/2025/9/20 20:23:52

之前也看到网上有关于验证码的项目，但是自己试了几个不太行，没有较完整的项目，于是东拼西凑加上自己又稍微添加了一点功能。

现在这个项目可以实现的功能：
基于图片验证码登录，验证码输入正确可以跳转到成功页面，输入错误就会重新刷新页面，当然这点放到实际的项目中是很不友好的，（因为用户输入账号密码以后，输错验证码就得重新输入，本实例验证码是拿到后端来判断 的，但是在实际的项目中我觉得在前端的页面判断更好一点） ，点击图片 或者 看不清换一张可以重新刷新验证码，基本的验证码功能都有了 ，运行起来看图
在这里插入图片描述
拿到一般的课程设计，毕设中是没有问题的，加上自己的 登录验证密码框就可以实现一个登录界面了。

碰到的 页面 404 错误，这一篇文章解释 的很好，可以借鉴

码云 地址：https://gitee.com/li-childrens-shoes/shape/tree/master

对了 在git的过程中也犯了许多错误，重新复习一下git 命令

git init # 初始化项目，在本地去创建git仓库(创建本地仓库，才代表git可以管理代码) 
git add -A # 将当前目录下所有的文件添加到缓存区 
git commit -A -m "first commit" # 提交缓存区里面的内容到本地仓库
git remote add origin 复制gitee的https #添加一个远程仓库的地址 
git push origin master # 提交本地仓库到远程仓库

git push时报"error: src refspec master does not match any."的解决方案

项目结构：
在这里插入图片描述

接下来是代码

实体类

package com.pojo;
import lombok.Data;/*** 验证码类*/
@Data
public class VerifyCode {private String code;private byte[] imgBytes;private long expireTime;}

业务层
接口

package com.service;import com.pojo.VerifyCode;import java.io.IOException;
import java.io.OutputStream;/*** 验证码生成接口*/
public interface IVerifyCodeGen {/*** 生成验证码并返回code，将图片写的os中** @param width* @param height* @param os* @return* @throws IOException*/String generate(int width, int height, OutputStream os) throws IOException;/*** 生成验证码对象** @param width* @param height* @return* @throws IOException*/VerifyCode generate(int width, int height) throws IOException;
}

实现类

package com.service.impl;import com.pojo.VerifyCode;
import com.service.IVerifyCodeGen;
import com.util.RandomUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;/*** 验证码实现类*/
@Service
public class SimpleCharVerifyCodeGenImpl implements IVerifyCodeGen {private static final Logger logger = LoggerFactory.getLogger(SimpleCharVerifyCodeGenImpl.class);private static final String[] FONT_TYPES = { "\u5b8b\u4f53", "\u65b0\u5b8b\u4f53", "\u9ed1\u4f53", "\u6977\u4f53", "\u96b6\u4e66" };private static final int VALICATE_CODE_LENGTH = 4;/*** 设置背景颜色及大小，干扰线** @param graphics* @param width* @param height*/private static void fillBackground(Graphics graphics, int width, int height) {// 填充背景graphics.setColor(Color.WHITE);//设置矩形坐标x y 为0graphics.fillRect(0, 0, width, height);// 加入干扰线条for (int i = 0; i < 8; i++) {//设置随机颜色算法参数graphics.setColor(RandomUtils.randomColor(40, 150));Random random = new Random();int x = random.nextInt(width);int y = random.nextInt(height);int x1 = random.nextInt(width);int y1 = random.nextInt(height);graphics.drawLine(x, y, x1, y1);}}/*** 生成随机字符** @param width* @param height* @param os* @return* @throws IOException*/@Overridepublic String generate(int width, int height, OutputStream os) throws IOException {BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);Graphics graphics = image.getGraphics();fillBackground(graphics, width, height);String randomStr = RandomUtils.randomString(VALICATE_CODE_LENGTH);createCharacter(graphics, randomStr);graphics.dispose();//设置JPEG格式ImageIO.write(image, "JPEG", os);return randomStr;}/*** 验证码生成** @param width* @param height* @return*/@Overridepublic VerifyCode generate(int width, int height) {VerifyCode verifyCode = null;try {//将流的初始化放到这里就不需要手动关闭流ByteArrayOutputStream baos = new ByteArrayOutputStream();String code = generate(width, height, baos);verifyCode = new VerifyCode();verifyCode.setCode(code);verifyCode.setImgBytes(baos.toByteArray());} catch (IOException e) {logger.error(e.getMessage(), e);verifyCode = null;}return verifyCode;}/*** 设置字符颜色大小** @param g* @param randomStr*/private void createCharacter(Graphics g, String randomStr) {char[] charArray = randomStr.toCharArray();for (int i = 0; i < charArray.length; i++) {//设置RGB颜色算法参数g.setColor(new Color(50 + RandomUtils.nextInt(100),50 + RandomUtils.nextInt(100), 50 + RandomUtils.nextInt(100)));//设置字体大小，类型g.setFont(new Font(FONT_TYPES[RandomUtils.nextInt(FONT_TYPES.length)], Font.BOLD, 26));//设置x y 坐标g.drawString(String.valueOf(charArray[i]), 15 * i + 5, 19 + RandomUtils.nextInt(8));}}
}

控制层

package com.Cnotroller;import com.pojo.VerifyCode;
import com.service.IVerifyCodeGen;
import com.service.impl.SimpleCharVerifyCodeGenImpl;
import io.swagger.annotations.ApiOperation;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;@Controller
public class verifyCode{private static final Logger LOGGER = LoggerFactory.getLogger(verifyCode.class);String code;@ApiOperation(value = "验证码")@GetMapping("/verifyCode")public void verifyCode(HttpServletRequest request, HttpServletResponse response) {IVerifyCodeGen iVerifyCodeGen = new SimpleCharVerifyCodeGenImpl();try {//设置长宽VerifyCode verifyCode = iVerifyCodeGen.generate(80, 28);code = verifyCode.getCode();LOGGER.info(code);//将VerifyCode绑定sessionrequest.getSession().setAttribute("VerifyCode", code);//设置响应头response.setHeader("Pragma", "no-cache");//设置响应头response.setHeader("Cache-Control", "no-cache");//在代理服务器端防止缓冲response.setDateHeader("Expires", 0);//设置响应内容类型response.setContentType("image/jpeg");response.getOutputStream().write(verifyCode.getImgBytes());response.getOutputStream().flush();}catch (IOException e) {LOGGER.info("", e);}}@RequestMapping(value ="/login")public String Login ( String CODE) {if (CODE.equals(code))return "success";//如果验证码填写错误就刷新页面return "redirect:/";}}

工具类

package com.util;import java.awt.*;
import java.util.Random;public class RandomUtils extends org.apache.commons.lang3.RandomUtils {private static final char[] CODE_SEQ = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J','K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W','X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9' };private static final char[] NUMBER_ARRAY = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };private static Random random = new Random();public static String randomString(int length) {StringBuilder sb = new StringBuilder();for (int i = 0; i < length; i++) {sb.append(String.valueOf(CODE_SEQ[random.nextInt(CODE_SEQ.length)]));}return sb.toString();}public static String randomNumberString(int length) {StringBuilder sb = new StringBuilder();for (int i = 0; i < length; i++) {sb.append(String.valueOf(NUMBER_ARRAY[random.nextInt(NUMBER_ARRAY.length)]));}return sb.toString();}public static Color randomColor(int fc, int bc) {int f = fc;int b = bc;Random random = new Random();if (f > 255) {f = 255;}if (b > 255) {b = 255;}return new Color(f + random.nextInt(b - f), f + random.nextInt(b - f), f + random.nextInt(b - f));}public static int nextInt(int bound) {return random.nextInt(bound);}
}

启动类

package com;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class ShapeApplication {public static void main(String[] args) {SpringApplication.run(ShapeApplication.class, args);}
}

资源配置类：

index页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="/login" method="post">
<div><input  name="CODE" id="code" placeholder="验证码" type="text" class=""style="width:170px"><!-- 验证码 显示 --><!--这里改变验证码的方式有两种，一种是点击图片，另一种是点击后面的 超链接，看不清换一张--><img onclick="javascript:getvCode()" id="verifyimg" style="margin-left: 20px;"/><a href="#" onclick="getvCode()">看不清换一张</a>
</div><input type="submit"  value="提交"></input>
</form>
<script type="text/javascript">getvCode();/*** 获取验证码* 将验证码写到index.html页面的id = verifyimg 的地方*/function getvCode() {document.getElementById("verifyimg").src = timestamp("http://127.0.0.1:81/verifyCode");}//为url添加时间戳function timestamp(url) {var getTimestamp = new Date().getTime();if (url.indexOf("?") > -1) {url = url + "&timestamp=" + getTimestamp} else {url = url + "?timestamp=" + getTimestamp}return url;};</script>
</body>
</html>
<!--<script type="text/javascript">/** 弹出重新输入验证啊函数* */reWrite();function  reWrite(){alert("验证码有误，请重新输入");}
</script>-->

success页面就是随便写一个登录成功就行

配置文件：

server:port: 81
spring:thymeleaf:prefix: classpath:/templates/suffix: .htmlmode: HTML5encoding: UTF-8cache: falseservlet:content-type: text/html
logging:level:com:example:mapper : debug

最后是pom 依赖 要记得坐标换成自己的

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.example</groupId><artifactId>shape</artifactId><version>1.0-SNAPSHOT</version><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.0.RELEASE</version></parent><properties><java.version>1.8</java.version></properties><build><resources><resource><directory>src/main/java</directory><includes><include>**/*.xml</include></includes></resource></resources></build><dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.10</version></dependency><dependency><groupId>io.swagger</groupId><artifactId>swagger-annotations</artifactId><version>1.5.22</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency></dependencies>
</project>

http://chatgpt.dhexx.cn/article/gDTNdajn.shtml

相关文章

apifox图片验证码显示

apifox图片验证码显示

添加后置脚本 脚本内容如下&#xff1a; var resp {response: pm.response.json() } let imgresp.response.data let template <img src"{{img}}" /> pm.visualizer.set(template,img)在此查看图片验证码
阅读更多...
JS实现图片验证码功能

JS实现图片验证码功能

JS实现图片验证码功能 点关注不迷路&#xff0c;欢迎再来&#xff01;以下代码可以直接copy运行&#xff0c;不需要引入jquery.jar 1. html代码 <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-8"%> &l…
阅读更多...
node实现图片验证码

node实现图片验证码

使用node来做一个图片验证码 做一个下面的小案例&#xff0c;应该能够很快的理解。 首先我们需要创建一个项目。 使用express搭建一个简单的服务器。 安装express。 yarn add express在app文件下这样配置。 const express require(express) const app express() app.use…
阅读更多...
Java实现图片验证码

Java实现图片验证码

我们在一些网站注册的时候&#xff0c;经常需要填写以上图片的信息。 这种图片验证方式是我们最常见的形式&#xff0c;它可以有效的防范恶意攻击者采用恶意工具,调用“动态验证码短信获取”接口进行动态短信发送, 导致接入用户短信被刷&#xff0c;造成账号余额损失。同时这种…
阅读更多...
图片验证码

图片验证码

通过下面这个方法可以得到随机验证码&#xff1a; public String getIdentifyCode(){//得到验证码&#xff08;数字大小写字母&#xff09;String str"";Random randnew Random();for(int i0;i<6;i){switch(rand.nextInt(3)){case 0:int a(int) (Math.random()*26…
阅读更多...
图片验证码破解

图片验证码破解

2.8图片验证码破解 在测试web平台时&#xff0c;难以避免的就是登录&#xff0c;登录的时候就会需要输入验证码&#xff01;有的是图型验证码有的是滑动验证码&#xff0c;那么在自动化中如何破解验证码&#xff1f;这里只介绍简单的图片验证码。 一般来说破解这种图形验证码…
阅读更多...
Java实现图片验证码功能

Java实现图片验证码功能

文章目录 一、背景二、实现步骤1、maven中加入依赖2、CaptchaController.java3、生成验证码配置4、CaptchaService.java接口5、CaptchaServiceImpl.java实现类6、增加验证码校验涉及文件 一、背景 在实现登录功能时&#xff0c;为了防止特定的程序暴力破解&#xff0c;一般为了…
阅读更多...
python 图片验证码

python 图片验证码

1.图片验证码第一步 # 导入绘图库 from PIL import ImageDraw, Image, ImageFont 2.生成图片验证类 # 图片验证类 class ImgCode(BaseHandler):# 定义随机颜色实例方法def get_random_color(self):R random.randrange(255)G random.randrange(255)B random.randrange(255)…
阅读更多...
java 生成图片验证码

java 生成图片验证码

https://vimsky.com/zh-tw/examples/detail/java-class-javax.servlet.ServletOutputStream.html 开发过程中&#xff0c;需要服务端返回验证码图片给前台&#xff0c;想想该如何实现呢&#xff1f; 1、字节流的输入输出 2、生成一个验证码&#xff0c;自定义字母数字混合实现…
阅读更多...
C# 图片验证码简单例子

C# 图片验证码简单例子

C# 图片验证码简单例子 一、简述 记--使用PictureBox绘制验证码。 例子&#xff1a;外链:https://wwm.lanzouq.com/b0cafckej 密码:cxxn 二、效果 三、工程结构 四、源文件 Form1.cs文件 using System; using System.Drawing; using System.Windows.Forms;namespace Verifi…
阅读更多...
springboot图片验证码

springboot图片验证码

前言: 大家好&#xff01;我是小小&#xff01;今天我们用五分钟来用springboot实现我们常用的图形验证码功能模块&#xff01; 用户登录几乎是一个线上系统必不可少且使用相对比较频繁的一个模块&#xff0c;为了防止恶意暴力尝试&#xff0c;防止洪水攻击、防止脚本自动提交…
阅读更多...
JavaWeb总结之通过Servlet生成验证码图片

JavaWeb总结之通过Servlet生成验证码图片

项目地址:https://github.com/zhangzeminzZ/ServletStudy 目录 1.BufferedImage类介绍2.在Form表单中使用验证码图片3.服务器端对form表单提交上来的验证码处理 1.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类 创建一个DrawImage Servlet&#xff0c;用…
阅读更多...
网站安全检测之图片验证码

网站安全检测之图片验证码

2019独角兽企业重金招聘Python工程师标准>>> 在对网站安全进行整体的安全检测的时候&#xff0c;用户登陆以及用户留言&#xff0c;评论&#xff0c;设置支付密码&#xff0c;以及一些网站功能方面都会用到图片验证码&#xff0c;针对于验证码我们SINE安全对其进行了…
阅读更多...
实现图片验证码【详细代码】

实现图片验证码【详细代码】

实际开发过程中经常遇到要实现图片验证码来防止外部使用脚本刷接口&#xff0c;所以说图片验证码是很有必要的一个小功能。 html <!--- 注册页面整增加图形验证码功能,这里为了更贴近企业级业务&#xff0c;我们在注册页面整增加图形验证码功能--> <div class"u…
阅读更多...
图片验证码实现的几种方式

图片验证码实现的几种方式

一、Google Kaptcha 1、简介 kaptcha 是一个非常实用的验证码生成工具。有了它&#xff0c;你可以生成各种样式的验证码&#xff0c;因为它是可配置的。kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.KaptchaServlet&#xff0c;生成一个图片。同时将生成的验证码…
阅读更多...
ajax请求后台返回数据

ajax请求后台返回数据

功能介绍&#xff1a;最近学习在做一个新闻管理系统&#xff0c;其中有一个模块做的是一个排行榜功能&#xff0c;分为东部联盟和西部联盟&#xff0c;当我点击他的时候&#xff0c;排行的数据会发生变化。由于这一块怎么整个页面中的一小块&#xff0c;所以使用的是局部刷新页…
阅读更多...
如何取消ajax请求

如何取消ajax请求

之前在面试的时候&#xff0c;被面试官问到了如何取消ajax请求&#xff0c;然鹅并不知道&#xff0c;被刷之后痛定思痛&#xff0c;总结了原生XHR、jquery、axios取消ajax请求的方法。 原生XHR 对于原生XHR对象来说&#xff0c;取消的ajax的关键是调用XHR对象的.abort()方法 …
阅读更多...
HTML AJAX请求调用

HTML AJAX请求调用

html ajax请求 ------------------温故而知新,可以装逼矣-------------------- 大佬提出需求&#xff0c;访问html文件&#xff0c;动态响应文章内容 作为一个纯正&#xff08;半吊子&#xff09;的JAVA后端写太多前后端分离的项目&#xff0c;太久没接触前端知识。头都是炸的…
阅读更多...
ajax请求五个步骤！

ajax请求五个步骤！

ajax请求五个步骤&#xff01; 今天 咱们讲一讲Ajax请求五个步骤&#xff01; 1.创建XMLHttpRequest异步对象 var xhr; if (window.XMLHttpRequest){// code for IE7, Firefox, Chrome, Opera, Safarixhrnew XMLHttpRequest();} else{// code for IE6, IE5xhrnew ActiveXObje…
阅读更多...
jquery（五）Ajax请求

jquery（五）Ajax请求

在jQuery中AJAX的写法有3种&#xff0c;$ajax&#xff0c;$post&#xff0c;$get这三种。其中$post和$get是简易写法&#xff0c;高层的实现&#xff0c;在调用他们的时候&#xff0c;会运行底层封装好的$ajax。 ajax写法 $.ajax({url:"http://www.microsoft.com",…
阅读更多...
推荐文章

Copyright @ 2022~2023