SpringBoot实现Thymeleaf验证码生成

使用后台返回验证码图片,验证码存到session中后端实现校验,前端只展示验证码图片。

本篇用SpringBoot Thymeleaf实现验证码生成。

创建springboot项目 引入依赖

完整pom.xml

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>web</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>web</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!-- ThymeLeaf 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application.yml配置 Thymeleaf

#Thymeleaf配置
spring:
  mvc:
    static-path-pattern: /**
  thymeleaf:
    mode: HTML
    encoding: UTF-8
    #关闭缓存
    cache: false

创建CaptchaController.java 类

package com.example.web.controller;

import com.example.web.util.VerifyCode;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;

@RestController
public class CaptchaController {
    /* 获取验证码图片*/

    @RequestMapping("/getVerifyCode")
    public void getVerificationCode(HttpServletResponse response, HttpServletRequest request) {
        try {
            int width = 200;
            int height = 69;

            BufferedImage verifyImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);//生成对应宽高的初始图片
            String randomText = VerifyCode.drawRandomText(width, height, verifyImg);//单独的一个类方法,出于代码复用考虑,进行了封装。功能是生成验证码字符并加上噪点,干扰线,返回值为验证码字符

            request.getSession().setAttribute("verifyCode", randomText);
            response.setContentType("image/png");//必须设置响应内容类型为图片,否则前台不识别

            OutputStream os = response.getOutputStream(); //获取文件输出流
            ImageIO.write(verifyImg, "png", os);//输出图片流
            os.flush();
            os.close();//关闭流
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

创建VerifyCode.java 工具类

package com.example.web.util;

import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;

public class VerifyCode {

    public static String drawRandomText(int width, int height, BufferedImage verifyImg) {

        Graphics2D graphics = (Graphics2D) verifyImg.getGraphics();
        graphics.setColor(Color.WHITE);//设置画笔颜色-验证码背景色
        graphics.fillRect(0, 0, width, height);//填充背景
        graphics.setFont(new Font("微软雅黑", Font.BOLD, 40));

        //数字和字母的组合
        String baseNumLetter = "123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";

        StringBuilder builder = new StringBuilder();
        int x = 10;  //旋转原点的 x 坐标
        String ch;
        Random random = new Random();

        for (int i = 0; i < 4; i++) {
            graphics.setColor(getRandomColor());

            //设置字体旋转角度
            int degree = random.nextInt() % 30;  //角度小于30度
            int dot = random.nextInt(baseNumLetter.length());

            ch = baseNumLetter.charAt(dot) + "";
            builder.append(ch);

            //正向旋转
            graphics.rotate(degree * Math.PI / 180, x, 45);
            graphics.drawString(ch, x, 45);

            //反向旋转
            graphics.rotate(-degree * Math.PI / 180, x, 45);
            x += 48;
        }

        //画干扰线
        for (int i = 0; i < 6; i++) {
            // 设置随机颜色
            graphics.setColor(getRandomColor());

            // 随机画线
            graphics.drawLine(random.nextInt(width), random.nextInt(height),
                    random.nextInt(width), random.nextInt(height));

        }

        //添加噪点
        for (int i = 0; i < 30; i++) {
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);

            graphics.setColor(getRandomColor());
            graphics.fillRect(x1, y1, 2, 2);
        }
        return builder.toString();
    }

    /**
     * 随机取色
     */
    private static Color getRandomColor() {
        Random ran = new Random();
        return new Color(ran.nextInt(256),
                ran.nextInt(256), ran.nextInt(256));

    }
}

创建UserController.java 类

package com.example.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class UserController {
    @RequestMapping("/login")
    public String login() {
        return "login";
    }
}

resources/templates目录下创建login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Show User</title>
</head>
<body>
<a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
    <img th:src="@{getVerifyCode}" onclick="changeCode()" class="verifyCode"/>
</a>
</body>
<!-- 引入JQuery -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script>
    function changeCode() {
        const src = "/getVerifyCode?" + new Date().getTime(); //加时间戳,防止浏览器利用缓存
        $('.verifyCode').attr("src", src);
    }
</script>
</html>

启动项目访问http://localhost:8080/login

点击图片可以更换验证码,至于后面的后台验证就不讲了。
参考文章后台java 实现验证码生成

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

(0)

相关推荐

  • SpringBoot发送邮箱验证码功能

    一.开启QQ邮箱服务 (1)登陆QQ找到设置,点击账户 (2)往下拉,开启POP3/SMTP服务和IMAP/SMTP服务 当开启IMAP/SMTP会有一串密文密码,保存起来后面要用到 二.spring boot配置邮箱服务   在spring boot的配置文件application.yml中添加以下配置 spring: mail: username: 1963342385@qq.com password: yqc...fchj host: smtp.qq.com password是在开启邮箱服

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

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

  • SpringBoot登录验证码实现过程详解

    今天记录一下验证码的实现,希望能够帮助到大家! 首先我们看一下实现的效果: 此验证码的实现没有用到太多的插件,话不多说直接上代码,大家拿过去就可以用. 中间用到了org.apache.commons.lang3.RandomUtils工具类,需要pom配置: <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 --> <dependency> <groupId>org.apac

  • 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整合kaptcha验证码的示例代码

    前言: 关于kaptcha简介以及spring整合kaptcha,我在另一篇文章中已详细讲解,请参考:spring整合kaptcha验证码. 本文将介绍springboot整合kaptcha的两种方式. 开发工具及技术: 1.idea 2017 2.springboot 2.0.2 3.kaptcha 正式开始: 方式一:通过kaptcha.xml配置 1.用idea新建一个spring Initializr 2.添加kaptcha的依赖: <!-- kaptcha验证码 --> <de

  • SpringBoot实现前端验证码图片生成和校验

    SpringBoot下实现前端验证码图片的生成和校验,供大家参考,具体内容如下 1.效果 点击验证码可以获取新的验证码 2.原理 后台生成验证码图片,将图片传到前台. 后台在session中保存验证码内容. 前台输入验证码后传到后台在后台取出session中保存的验证码进行校验. 注意,验证码的明文是不能传送到前端的.前端内容都是透明的,不安全.验证码是用来防机器人并不是单单防人.如果把验证码明文传到前端很容易就会被破解. 3.图片生成 验证码生成工具类RandomValidateCodeUti

  • Springboot实现验证码登录

    本文实例为大家分享了Springboot实现验证码登录的具体代码,供大家参考,具体内容如下 因为在项目中需要使用到验证码,我总结一下在项目中如何快速解决项目需求~验证码,下面推荐给大家速上手验证码的例子. 一.编写验证码工具类 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.FileOutputStr

  • SpringBoot集成kaptcha验证码

    本文实例为大家分享了SpringBoot集成kaptcha验证码的具体代码,供大家参考,具体内容如下 1.kaptcha相关介绍 Kaptcha是一个基于SimpleCaptcha的验证码开源项目. 2.集成方案 ①pom.xml中配置依赖 <!-- 验证码--> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> &l

  • SpringBoot实现Thymeleaf验证码生成

    使用后台返回验证码图片,验证码存到session中后端实现校验,前端只展示验证码图片. 本篇用SpringBoot Thymeleaf实现验证码生成. 创建springboot项目 引入依赖 完整pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http

  • SpringBoot+Thymeleaf实现生成PDF文档

    目录 前言 一.引入依赖 二.application.yml配置 三.PDF相关配置 四.Controller 五.生成PDF文件响应效果 前言 温馨提示:本博客使用Thymeleaf模板引擎实现PDF打印仅供参考: 在阅读该博客之前,先要了解一下Thymeleaf模板引擎,因为是使用Thymeleaf模板引擎实现的PDF打印的, Thymeleaf是一个现代的服务器端 Java 模板引擎,适用于 Web 和独立环境. Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板——HT

  • springboot验证码生成以及验证功能举例详解

    目录 1.easy-captcha工具包 2添加依赖 3.验证码字符类型 4.字体设置 5验证码图片输出 6.生成并显示验证码 6.1后端 6.2前端 7 验证码的输入验证 7.1后端 7.2前端 总结 1.easy-captcha工具包 生成验证码的方式有许多种,这里选择的是easy-captcha工具包. github开原地址为:easy-captcha工具包 其支持Java图形验证码,支持gif.中文.算术等类型,可用于Java Web.JavaSE等项目. 2添加依赖 首先需要将easy

  • SpringBoot整合Thymeleaf小项目及详细流程

    目录 1.项目简绍 2.设计流程 3.项目展示 4.主要代码 1.验证码的生成 2.userController的控制层设计 3.employeeController控制层的代码 4.前端控制配置类 5.过滤器 6.yml配置 7.文章添加页面展示 8.POM.xml配置类 9.employeeMapper配置类 10.UserMapper配置类 1.项目简绍 本项目使用SpringBoot开发,jdbc5.1.48 Mybatis 源码可下载 其中涉及功能有:Mybatis的使用,Thymel

  • Springboot实现邮箱验证码注册与修改密码及登录功能详解流程

    目录 前言 一.SpringBoot依赖 1.pom.xml文件 2.Applications.yaml 二.数据库文件 三.实现注册功能 四.找回密码功能 五.登录功能 总结 前言 最近Springboot课程要求登录.注册.找回密码功能,可以自行添加一些额外的功能,这里也是记录一下做好的思路和代码. 一.SpringBoot依赖 1.pom.xml文件 Maven版本号:3.5.4 登录.注册.找回密码,需要用到邮箱验证码,要引入mail依赖,实现三分钟需要使用到redis,要引入redis

  • springboot实现邮箱验证码功能

    本文实例为大家分享了springboot实现邮箱验证码功能的具体代码,供大家参考,具体内容如下 我这边使用的QQ邮箱 1.首先创建maven项目,配置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/XMLSch

  • SpringBoot发送邮件功能 验证码5分钟过期

    springBoot发送邮件(验证码,5分钟过期)超级详细,供大家参考,具体内容如下 自己百度了很久,终于成功了,这里记录一下过程 1.选择邮箱(这里选用163邮箱) 首先在网页登录在设置里面打开POP3/SMTP服务 在application.yaml中配置 要注意的就是这里的password是授权码而不是密码!!!如果使用qq邮箱把host改为smtp.qq.com 2.关于验证码的工具类 private static final String SYMBOLS = "0123456789&q

  • SpringBoot+mybatis+thymeleaf实现登录功能示例

    1.项目文件目录一栏 2.开始工作 先按照上图建立好相应的controller,mapper等文件. 接着进行一个配置 首先是application.properties server.port=8080#启动端口 #加载Mybatis配置文件 mybatis.mapper-locations = classpath:mapper/*.xml #数据源必填项 spring.datasource.driver-class-name= com.mysql.cj.jdbc.Driver spring.

随机推荐