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

2024-11-30 11:08:51

验证码的作用

验证码的作用:可以有效防止其他人对某一个特定的注册用户用特定的程序暴力破解方式进行不断的登录尝试
我们其实很经常看到，登录一些网站其实是需要验证码的，比如牛客，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登录验证码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

springboot整合shiro多验证登录功能的实现（账号密码登录和使用手机验证码登录）

1. 首先新建一个shiroConfig shiro的配置类,代码如下: @Configuration public class SpringShiroConfig { /** * @param realms 这儿使用接口集合是为了实现多验证登录时使用的 * @return */ @Bean public SecurityManager securityManager(Collection<Realm> realms) { DefaultWebSecurityManager sManager
Springboot实现验证码登录

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

今天记录一下验证码的实现,希望能够帮助到大家! 首先我们看一下实现的效果: 此验证码的实现没有用到太多的插件,话不多说直接上代码,大家拿过去就可以用. 中间用到了org.apache.commons.lang3.RandomUtils工具类,需要pom配置:  <dependency> <groupId>org.apac
SpringBoot 整合 Shiro 密码登录与邮件验证码登录功能(多 Realm 认证)

导入依赖(pom.xml)  <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring</artifactId> <version>1.4.0</version> </dependency>  <dependency
springboot短信验证码登录功能的实现

1 .构造手机验证码:使用 random 对象生成要求的随机数作为验证码,例如 4 位验证码: 1000~9999 之间随机数: 2 .使用接口向短信平台发送手机号和验证码数据,然后短信平台再把验证码发送到制定手机号上,接口参数一般包括:目标手机号,随机验证码 (或包含失效时间),平台接口地址,平台口令: 3 .保存接口返回的信息(一般为 json 文本数据,然后需转换为 json 对象格式): 4 .将手机号 - 验证码.操作时间存入 Session 中,作为后面验证使用: 5 .接收用户填写
SpringBoot + SpringSecurity 短信验证码登录功能实现

实现原理在之前的文章中,我们介绍了普通的帐号密码登录的方式: SpringBoot + Spring Security 基本使用及个性化登录配置. 但是现在还有一种常见的方式,就是直接通过手机短信验证码登录,这里就需要自己来做一些额外的工作了. 对SpringSecurity认证流程详解有一定了解的都知道,在帐号密码认证的过程中,涉及到了以下几个类:UsernamePasswordAuthenticationFilter(用于请求参数获取),UsernamePasswordAuthentica
Springboot+SpringSecurity实现图片验证码登录的示例

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

目录验证码的作用案例要求前端页面准备准备login.html页面随机验证码工具类后端控制器验证码的作用验证码的作用:可以有效防止其他人对某一个特定的注册用户用特定的程序暴力破解方式进行不断的登录尝试我们其实很经常看到,登录一些网站其实是需要验证码的,比如牛客,QQ等.使用验证码是现在很多网站通行的一种方式,这个问题是由计算机生成并且评判的,但是必须只有人类才能解答,因为计算机无法解答验证码的问题,所以回答出问题的用户就可以被认为是人类.验证码一般用来防止批量注册. 案例要求验证
Spring Boot 多数据源处理事务的思路详解

目录 1. 思路梳理 2. 代码实践 2.1 案例准备 2.2 开始整活 LoadDataSource.java 3. 总结首先我先声明一点,本文单纯就是技术探讨,要从实际应用中来说的话,我并不建议这样去玩分布式事务.也不建议这样去玩多数据源,毕竟分布式事务主要还是用在微服务场景下. 好啦,那就不废话了,开整. 1. 思路梳理首先我们来梳理一下思路. 在上篇文章中,我们是一个微服务,在 A 中分别去调用 B 和 C,当 B 或者 C 有一个执行失败的时候,就去回滚.B 和 C 都是调用远程的
Android中用Bmob实现短信验证码功能的方法详解

这篇文章主要介绍发送验证码和校验验证码的功能,用到一个第三方平台Bmob,那Bmob是什么呢?Bmob可以开发一个云存储的移动应用软件,他提供了大量的标准的API接口,根据需要接入相关服务,开发者可以更加专注于应用的开发,让产品交付更快速,验证码功能就是其中一个. 一.跟其他第三方一样,我们开发之前要做一些准备工作. 1.首先,去官网注册一个帐号:http://www.bmob.cn/: 2.然后就可以创建应用了:具体怎么做Bmob说得很清楚了(官方操作介绍),如果你不想看,我简单说一下:点击右
spring boot 图片上传与显示功能实例详解

首先描述一下问题,spring boot 使用的是内嵌的tomcat, 所以不清楚文件上传到哪里去了, 而且spring boot 把静态的文件全部在启动的时候都会加载到classpath的目录下的,所以上传的文件不知相对于应用目录在哪,也不知怎么写访问路径合适,对于新手的自己真的一头雾水. 后面想起了官方的例子,没想到一开始被自己找到的官方例子,后面太依赖百度谷歌了,结果发现只有官方的例子能帮上忙,而且帮上大忙,直接上密码的代码 package hello; import static org
Spring Boot的listener(监听器)简单使用实例详解

监听器(Listener)的注册方法和 Servlet 一样,有两种方式:代码注册或者注解注册 1.代码注册方式通过代码方式注入过滤器 @Bean public ServletListenerRegistrationBean servletListenerRegistrationBean(){ ServletListenerRegistrationBean servletListenerRegistrationBean = new ServletListenerRegistrationBean
Spring boot进行参数校验的方法实例详解

Spring boot开发web项目有时候我们需要对controller层传过来的参数进行一些基本的校验,比如非空.整数值的范围.字符串的长度.日期.邮箱等等.Spring支持JSR-303 Bean Validation API,可以方便的进行校验. 使用注解进行校验先定义一个form的封装对象 class RequestForm { @Size(min = 1, max = 5) private String name; public String getName() { return n
Spring Boot 中PageHelper 插件使用配置思路详解

使用思路 1.引入myabtis和pagehelper依赖 2.yml中配置mybatis扫描和实体类这2行代码 pageNum:当前第几页 pageSize:显示多少条数据 userList:数据库查询的数据数据列表 PageHelper.startPage(pageNum, pageSize); PageInfo pageInfo = new PageInfo(userList); 最后返回一个pageInfo 对象即可,pageInfo 这个对象中只有数据一些信息,但是,没有成功失败的状
Spring Boot学习入门之AOP处理请求详解

前言面向切面(AOP)Aspect Oriented Programming是一种编程范式,与语言无关,是一种程序设计思想,它也是spring的两大核心之一. 在spring Boot中,如何用AOP实现拦截器呢? 首先加入依赖关系: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId>
Spring Boot中使用Spring-data-jpa的配置方法详解

为了解决这些大量枯燥的数据操作语句,我们第一个想到的是使用ORM框架,比如:hibernate.通过整合Hibernate之后,我们以操作Java实体的方式最终将数据改变映射到数据库表中. 为了解决抽象各个Java实体基本的"增删改查"操作,我们通常会以泛型的方式封装一个模板Dao来进行抽象简化,但是这样依然不是很方便,我们需要针对每个实体编写一个继承自泛型模板Dao的接口,再编写该接口的实现.虽然一些基础的数据访问已经可以得到很好的复用,但是在代码结构上针对每个实体都会有一堆Dao的
Spring boot定时任务的原理及动态创建详解

v一.前言定时任务一般是项目中都需要用到的,可以用于定时处理一些特殊的任务.这篇文章主要给大家介绍了关于Spring boot定时任务的原理及动态创建的相关内容,下面来一起看看详细的介绍吧上周工作遇到了一个需求,同步多个省份销号数据,解绑微信粉丝.分省定时将销号数据放到SFTP服务器上,我需要开发定时任务去解析文件.因为是多省份,服务器.文件名规则.数据规则都不一定,所以要做成可配置是有一定难度的.数据规则这块必须强烈要求统一,服务器.文件名规则都可以从配置中心去读.每新增一个省份的配置,后