SpringBoot+hutool实现图片验证码

目录
  • 一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）
  • 二、开发前准备：
  • 三、 代码实现
  • 四、“点击验证码图片自动刷新” 是如何实现的 ？
  • 五、最终效果

一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）

第1步：浏览器使用<img src="/test/controller”>标签请求特定 Controller 路径。

第2步：服务器 Controller 返回图片的二进制数据。

第3步：浏览器接收到数据，显示图片。

二、开发前准备：

Spring Boot开发常识

hutool工具（hutool是一款Java辅助开发工具，利用它可以快速生成验证码图片，从而避免让我们编写大量重复代码，具体使用请移至官网）

<!-- pom 导包：hutool 工具 -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-captcha</artifactId>
    <version>5.8.5</version>
</dependency>

三、 代码实现

【 index.html 】页面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>验证码页面</title>
</head>
<body>

<form action="#" method="post">

  	<!-- img标签负责向服务器 Controller 请求图片资源 -->
    <img src="/test/code" id="code" onclick="refresh();">

</form>

</body>

<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
    function refresh() {
        document.getElementById("code").src =
          "/test/code?time" + new Date().getTime();
    }
</script>
</html>

【SpringBoot后端】

@RestController
@RequestMapping("test")
public class TestController {

    @Autowired
    HttpServletResponse response;
    @Autowired
    HttpSession session;

    @GetMapping("code")
    void getCode() throws IOException {
   		  // 利用 hutool 工具，生成验证码图片资源
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
        // 获得生成的验证码字符
        String code = captcha.getCode();
        // 利用 session 来存储验证码
        session.setAttribute("code",code);
      	// 将验证码图片的二进制数据写入【响应体 response 】
        captcha.write(response.getOutputStream());
    }
}

四、“点击验证码图片自动刷新” 是如何实现的 ？

HTML 规范规定，在 <img src=“xxx”> 标签中，每当 src 路径发生变化时，浏览器就会自动重新请求资源。所以我们可以编写一个简单的 js 脚本，只要验证码图片被点击，src 路径就会被加上当前【时间戳】，从而达到改变 src 路径的目的。

 <img src="/test/code" id="code" onclick="refresh();">

......

<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
    function refresh() {
        document.getElementById("code").src =
          "/test/code?time" + new Date().getTime();
    }
</script>

五、最终效果

到此这篇关于SpringBoot+hutool实现图片验证码的文章就介绍到这了,更多相关SpringBoot 图片验证码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • springboot控制层图片验证码生成

    本次博客记录项目中一个图片验证码的实现,虽然不是很复杂,但好记性不如烂笔头,谨记! package com.zl.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.FileOutputStream; import java.io.IOException; import java.io.Out

  • springboot图片验证码功能模块

    springboot图片验证码功能模块

    目录 前言: 第一步:工具类 第二步:图片生成: 整合到springboot项目中: 前言: 大家好!我是小小!今天我们用五分钟来用springboot实现我们常用的图形验证码功能模块! 用户登录几乎是一个线上系统必不可少且使用相对比较频繁的一个模块,为了防止恶意暴力尝试,防止洪水攻击.防止脚本自动提交等,验证码是一个较为便捷且行之有效的预防手段. 具体效果如下: 第一步:工具类 该工具类为生成验证码图片的核心,直接拷贝到项目即可,无需做修改:可个性化的参数全部对外提供的API,比如 字体大小,

  • springboot登陆页面图片验证码简单的web项目实现

    springboot登陆页面图片验证码简单的web项目实现

    写在前面 前段时间大家都说最近大环境不好,好多公司在裁员,换工作的话不推荐轻易的裸辞,但是我想说的是我所在的公司好流弊,有做不完的业务需求,还有就是招不完的人...... 最近我也是比较繁忙,但是还是要抽一点时间来进行自我复盘和记录,最近也写一个简单的小功能,就是登陆界面的图片验证码功能 环境:Tomcat9.Jdk1.8 1 生成验证码的工具类 public class RandomValidateCodeUtil { public static final String RANDOMCODE

  • Springboot+SpringSecurity实现图片验证码登录的示例

    Springboot+SpringSecurity实现图片验证码登录的示例

    这个问题,网上找了好多,结果代码都不全,找了好多,要不是就自动注入的类注入不了,编译报错,要不异常捕获不了浪费好多时间,就觉得,框架不熟就不能随便用,全是坑,气死我了,最后改了两天.终于弄好啦; 问题主要是: 返回的验证码不知道在SpringSecurity的什么地方和存在内存里的比较?我用的方法是前置一个过滤器,插入到表单验证之前. 比较之后应该怎么处理,:比较之后要抛出一个继承了AuthenticationException的异常 其次是捕获验证码错误异常的处理? 捕获到的异常交给自定义验证

  • SpringBoot整合kaptcha实现图片验证码功能

    SpringBoot整合kaptcha实现图片验证码功能

    目录 栗子 配置文件 SpringBoot项目中pom.xml文件 项目代码 项目结构 SpringBootVerifyCodeApplication.java VerifyCodeConfig.java KaptchaController.java 测试 生成运算符验证码 1.设置字符个数为7 2.获取图片 3.演示一下 栗子 登录是所有系统都绕不开的一道坎,很多系统会在用户名和密码下发放置一个图形验证码,例如:  这些图形验证码看起来不仅很丑,而且模糊,但却是保护系统的第一道屏障,它的作用是

  • Springboot +redis+谷歌开源Kaptcha实现图片验证码功能

    Springboot +redis+谷歌开源Kaptcha实现图片验证码功能

    背景 注册-登录-修改密码⼀般需要发送验证码,但是容易被 攻击恶意调⽤ 什么是短信-邮箱轰炸机 手机短信轰炸机是批.循环给⼿机⽆限发送各种⽹ 站的注册验 证码短信的方法. 公司带来的损失 短信⼀条5分钱,如果被⼤盗刷大家自己计算 邮箱通知不⽤钱,但被⼤盗刷,带宽.连接等都被占⽤,导致无法正常使⽤ 如何避免自己的网站成为”肉鸡“或者被刷呢 增加图形验证码(开发人员) 单IP请求次数限制(开发人员) 限制号码发送(⼀般短信提供商会做) 攻防永远是有的,只过加大了攻击者的成本,ROI划不过来⾃然就放弃

  • SpringBoot+hutool实现图片验证码

    SpringBoot+hutool实现图片验证码

    目录 一.理解 “ 服务器 / 浏览器 ”沟通流程(3步) 二.开发前准备: 三. 代码实现 四.“点击验证码图片自动刷新” 是如何实现的 ? 五.最终效果 一.理解 “ 服务器 / 浏览器 ”沟通流程(3步) 第1步:浏览器使用<img src="/test/controller”>标签请求特定 Controller 路径. 第2步:服务器 Controller 返回图片的二进制数据. 第3步:浏览器接收到数据,显示图片. 二.开发前准备: Spring Boot开发常识 huto

  • SpringBoot使用Captcha生成验证码

    SpringBoot使用Captcha生成验证码

    1. 基本结构 使用Captcha生成验证码, 利用Redis存储验证码 Redis中的结构为, Key是32位的UUID, Value为Captcha的4位随机字母以及数字的集合 设定Redis过期时间为1min, 即可实现过期验证码的自动失效 2. Kaptcha的依赖 基本的依赖这里不再叙述, 主要说一下要导入Captcha的依赖 <!--Kaptcha--> <dependency> <groupId>com.github.penggle</groupId

  • SpringBoot 集成Kaptcha实现验证码功能实例详解

    SpringBoot 集成Kaptcha实现验证码功能实例详解

    在一个web应用中验证码是一个常见的元素.不管是防止机器人还是爬虫都有一定的作用,我们是自己编写生产验证码的工具类,也可以使用一些比较方便的验证码工具.在网上收集一些资料之后,今天给大家介绍一下kaptcha的和springboot一起使用的简单例子. 准备工作: 1.你要有一个springboot的hello world的工程,并能正常运行. 2.导入kaptcha的maven: <!-- https://mvnrepository.com/artifact/com.github.penggl

  • Spring Security 图片验证码功能的实例代码

    验证码逻辑 以前在项目中也做过验证码,生成验证码的代码网上有很多,也有一些第三方的jar包也可以生成漂亮的验证码.验证码逻辑很简单,就是在登录页放一个image标签,src指向一个controller,这个Controller返回把生成的图片以输出流返回给页面,生成图片的同时把图片上的文本放在session,登录的时候带过来输入的验证码,从session中取出,两者对比.这位老师讲的用Spring Security集成验证码,大体思路和我说的一样,但更加规范和通用些. spring securi

随机推荐