Spring Boot实现登录验证码功能的案例详解

更新时间：2022年08月10日 10:57:42 作者：不断前进的皮卡丘

验证码的作用可以有效防止其他人对某一个特定的注册用户用特定的程序暴力破解方式进行不断的登录尝试，接下来通过本文给大家介绍Spring Boot实现登录验证码功能,需要的朋友可以参考下

验证码的作用

验证码的作用:可以有效防止其他人对某一个特定的注册用户用特定的程序暴力破解方式进行不断的登录尝试
我们其实很经常看到，登录一些网站其实是需要验证码的，比如牛客，QQ等。使用验证码是现在很多网站通行的一种方式，这个问题是由计算机生成并且评判的，但是必须只有人类才能解答，因为计算机无法解答验证码的问题，所以回答出问题的用户就可以被认为是人类。
验证码一般用来防止批量注册。

案例要求

验证码本质:后端程序随机验证码
图片的创建:
—java api手动创建图片
—JavaScript 前端创建图片
验证码的刷新
—添加JavaScript的点击事件，重新请求验证码图片

前端页面准备

因为涉及到jQuery，所以需要在resources/static创建目录，存放jQuery库

在这里插入图片描述

准备login.html页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!--引入jQuery -->
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <h2>用户登录</h2>
    <form action="/login" method="post">
      用户名:<input type="text" name="username"><br><br>
      密码  :<input type="password" name="password"><br><br>
      验证码:<input id="identify-input" type="text" name="identifyCode">
      <img id="identify-img" src="/identifyImage"><br><br>
      <input type="submit" value="登录">
    </form>
    <!--绑定点击事件 -->
    <script>
      $("#identify-img").on('click',function (){
        // 点击验证码那个图片的时候，我们输入的验证码那个框就会清空
        $('#identify-input').val('')
        //而且我们点击验证码的时候，希望它可以改变验证码内容，其实是通过发送新请求来改变验证码内容
        $('#identify-img').attr('src','/identifyImage?'+Math.random())
      })
      
    </script>
  </body>
</html>

随机验证码工具类

public class IdentifyCodeUtils {
    //设置图片宽
    private int width = 95;
    //设置图片高度
    private int height = 25;
    //设置干扰线数量
    private int lineSize = 40;
    //随机产生数字和字母组合的字符串
    private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    private Random random = new Random();
    
    /**
    * 获得字体
    */
    private Font getFont() {
        return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
    }
    
    /**
    * 获得颜色
    */
    private Color getRandColor(int fc, int bc) {
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }
        int r = fc + random.nextInt(bc - fc - 16);
        int g = fc + random.nextInt(bc - fc - 14);
        int b = fc + random.nextInt(bc - fc - 18);
        return new Color(r, g, b);
    }
    
    /**
    * 获取验证码
    *
    * @return
    */
    public String getIdentifyCode() {
        StringBuffer buffer = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            char c = randString.charAt(random.nextInt(randString.length()));
            buffer.append(c);
        }
        return buffer.toString();
    }
    
    /**
    * 生成随机图片
    *
    * @param identifyCode
    * @return
    */
    public BufferedImage getIdentifyImage(String identifyCode) {
        //BufferedImage类是具有缓冲区的Image类，Image类是用来描述图像信息的类
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
        //产生Image对象的Graphics对象，改对象可以在图像上进行各种绘制操作
        Graphics graphics = image.getGraphics();
        //图片大小
        graphics.fillRect(0, 0, width, height);
        //字体大小
        graphics.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
        //字体颜色
        graphics.setColor(getRandColor(110, 133));
        //绘制干扰线
        for (int i = 0; i <= lineSize; i++) {
            drawLine(graphics);
        }
        //绘制随机字符
        drawString(graphics, identifyCode);
        graphics.dispose();
        return image;
        
    }
    
    /**
    * 绘制字符串
    */
    private void drawString(Graphics g, String identifyCode) {
        for (int i = 0; i < identifyCode.length(); i++) {
            g.setFont(getFont());
            g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
                                 .nextInt(121)));
            g.translate(random.nextInt(3), random.nextInt(3));
            g.drawString(String.valueOf(identifyCode.charAt(i)), 13 * i + 20, 18);
        }
        
        
    }
    
    /**
    * 响应验证码图片
    *
    * @param identifyImg
    * @param response
    */
    public void responseIdentifyImg(BufferedImage identifyImg, HttpServletResponse response) {
        //设置响应类型，告诉浏览器输出的内容是图片
        response.setContentType("image/jpeg");
        //设置响应头信息，告诉浏览器不用缓冲此内容
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expire", 0);
        try {
            //把内存中的图片通过流动形式输出到客户端
            ImageIO.write(identifyImg, "JPEG", response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    /**
    * 绘制干扰线
    */
    private void drawLine(Graphics graphics) {
        int x = random.nextInt(width);
        int y = random.nextInt(height);
        int xl = random.nextInt(13);
        int yl = random.nextInt(15);
        graphics.drawLine(x, y, x + xl, y + yl);
    }
}

后端控制器

@Controller
public class UserController {
    @RequestMapping("/loginShow")
    public String loginShow(){
        return "login.html";
    }
    @PostMapping("/login")
    public String login(String username,String password,String identifyCode,HttpSession session){
        System.out.println("用户名:"+username);
        System.out.println("密码:"+password);
        System.out.println("验证码:"+identifyCode);
        //从session中取出验证码
        String sessionCode = (String)session.getAttribute("identifyFyCode");
        if (identifyCode.equalsIgnoreCase(sessionCode)){
            System.out.println("验证码正确");
            //进行登录判断的逻辑大家自己写，这里就不演示了
        }else{
            System.out.println("验证码错误");
            //重定向到登录画面
            return "redirect:/loginShow";
        }
         return "";
    }

    /**
     * 给前端返回一个验证码图片
     * @return
     */
    @RequestMapping("/identifyImage")
    public void identifyImage(HttpServletResponse response, HttpSession session){
        //创建随机验证码
        IdentifyCodeUtils utils = new IdentifyCodeUtils();
        String identifyCode = utils.getIdentifyCode();
        //session存入验证码
        session.setAttribute("identifyCode", identifyCode);
        //根据验证码创建图片
        BufferedImage identifyImage = utils.getIdentifyImage(identifyCode);
        //回传给前端
        utils.responseIdentifyImg(identifyImage,response);

    }
}

测试

在这里插入图片描述

当我们点击验证码这个图片的时候，它就会生成新验证码
并且如果我们在输入框中如果有写验证码的话，当我们点击验证码图片，它就会把输入框内容清空(大家自己测试)

到此这篇关于Spring Boot实现登录验证码功能的案例详解的文章就介绍到这了,更多相关springboot登录验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用Sentinel实现流控和服务降级的代码示例
Sentinel是面向分布式、多语言异构化服务架构的流量治理组件，本文将详细为大家介绍如何使用Sentinel实现流控和服务降级，文中有相关的代码示例,需要的朋友可以参考下
2023-05-05
IDEA 中创建Spring Data Jpa 项目的示例代码
这篇文章主要介绍了IDEA 中创建Spring Data Jpa 项目的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
Spring注解与P/C命名空间超详细解析
Spring注解方式减少了配置文件内容，更加便于管理，并且使用注解可以大大提高了开发效率！注解本身是没有功能的，和xml一样，注解和xml都是一种元数据，元数据即解释数据的数据，也就是所谓的配置
2022-11-11
Springboot 集成 lombok.jar过程解析
这篇文章主要介绍了Springboot 集成 lombok.jar过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11
Mybatis-Plus实体类注解方法与mapper层和service层的CRUD方法
CRUD是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。主要被用在描述软件系统中DataBase或者持久层的基本操作功能，下面让我们一起看看吧
2022-03-03
简单谈谈JVM、JRE和JDK的区别与联系
简单的说JDK是用于开发的而JRE是用于运行Java程序的。JDK和JRE都包含了JVM，从而使得我们可以运行Java程序。JVM是Java编程语言的核心并且具有平台独立性。
2016-05-05
feign客户端HTTP状态码为204时响应体被忽略的问题
这篇文章主要介绍了feign客户端HTTP状态码为204时响应体被忽略的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
详解JAVA如何实现乐观锁以及CAS机制
悲观锁和乐观锁其实本质都是一种思想，在JAVA中对于悲观锁的实现大家可能都很了解，可以通过synchronized、ReentrantLock加锁实现，本文不展开讲解了。那么乐观锁在JAVA中是如何实现的呢？底层的实现机制又是什么呢？本文就来和大家详细讲讲
2022-12-12
Mybatis设置sql打印日志的多种方法
这篇文章主要介绍了Mybatis设置sql打印日志,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
Java数据类型的规则
这篇文章主要介绍了Java数据类型的规则的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12