SpringBoot + Hutool 实现图片验证码登录

最新推荐文章于 2024-07-26 15:37:36 发布

Woo_home

最新推荐文章于 2024-07-26 15:37:36 发布

阅读量1w

点赞数 22

分类专栏： # Springboot

本文链接：https://blog.csdn.net/Woo_home/article/details/108512215

版权

Springboot 专栏收录该内容

24 篇文章 8 订阅

订阅专栏

文章目录

准备一个登录页面
导入 Maven 依赖
使用 Hutool 工具生成验证码
整合 SpringBoot
结合验证码实现登录功能

使用 SpringBoot —— Hutool 实现图片验证码登录其实非常简单，下面就来实现一个简单的登录 demo

准备一个登录页面

这个登录页面的实现非常简单，因为本人不是很会前端，所以登录页面做得还是非常简陋的

编写该页面的时候需要用到 bootstrap 组件，这里是直接引用了 bootstrap 的 CDN 链接，也可以直接下载 bootstrap，看个人喜欢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        .form-style {
            width: 500px;
            height: 250px;
            float: left;
            border: #623e80 solid 5px;
            border-radius: 5px;
        }
        form {
            margin: 5px;
        }
        img {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="form-style">
        <form action="/login" class="form-horizontal" method="post">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">验证码</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="imgText" name="imgText" placeholder="验证码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <img src="/getCode" id="codeImg" onclick="refresh()" alt="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Sign in</button>
                </div>
            </div>
        </form>
    </div>
    <script>
    	/* 刷新验证码 */
        function refresh() {
            document.getElementById("codeImg").src = "getCode?time=" + new Date().getTime();
        }
    </script>
</body>
</html>

而这个页面的效果大致是这样的，sign in 的上方是验证码的显示的地方，下面会详细说

在这里插入图片描述
为了更好地理解，我们再弄个登录成功之跳转的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>
    <h1>登录成功！</h1>
</body>
</html>

导入 Maven 依赖

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

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

    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>5.1.0</version>
    </dependency>
</dependencies>

使用 Hutool 工具生成验证码

OK，HTML 页面已经写好了，接下来就是生成验证码了。Hutool 工具包将验证码生成封装得非常简单了，只需要几行代码就可以生成验证码

Hutool 的文档地址

LineCaptcha 线段干扰的验证码

在这里插入图片描述
实现代码如下：

// 定义图形验证码的长和宽
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(100, 30);
// 图形验证码写出，可以写出到文件，也可以写出到流
String code = lineCaptcha.getCode()

CircleCaptcha 圆圈干扰验证码

在这里插入图片描述

// 定义图形验证码的长、宽、验证码字符数、干扰元素个数
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
// CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);
// 图形验证码写出，可以写出到文件，也可以写出到流
captcha.write("d:/circle.png");

ShearCaptcha 扭曲干扰验证码

在这里插入图片描述

// 定义图形验证码的长、宽、验证码字符数、干扰线宽度
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
// ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);
// 图形验证码写出，可以写出到文件，也可以写出到流
captcha.write("d:/shear.png");

自定义验证码

如果上面的几种验证码还不能满足你，那么你还可以自定义一个验证码。比如我们希望使用纯字母的验证码、纯数字的验证码、加减乘除的验证码，此时我们就要自定义CodeGenerator

// 自定义纯数字的验证码（随机4位数字，可重复）
RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
captcha.setGenerator(randomGenerator);
// 重新生成code
captcha.createCode();

还可以自定义验证码内容为四则运算方式

ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 45, 4, 4);
// 自定义验证码内容为四则运算方式
captcha.setGenerator(new MathGenerator());
// 重新生成code
captcha.createCode();

整合 SpringBoot

我们先将验证码显示到网页上

@RequestMapping("/getCode")
public void getCode(HttpServletResponse response) {
    // 随机生成 4 位验证码
    RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
    // 定义图片的显示大小
    lineCaptcha = CaptchaUtil.createLineCaptcha(100, 30);
    response.setContentType("image/jpeg");
    response.setHeader("Pragma", "No-cache");
    try {
        // 调用父类的 setGenerator() 方法，设置验证码的类型
        lineCaptcha.setGenerator(randomGenerator);
        // 输出到页面
        lineCaptcha.write(response.getOutputStream());
        // 打印日志
        logger.info("生成的验证码:{}", lineCaptcha.getCode());
        // 关闭流
        response.getOutputStream().close();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

现在是可以生成验证码了的，我们启动应用，访问 http://localhost:8080/getCode 即可得到验证码，如下：

在这里插入图片描述
但是这肯定不是我们想要的，我们想要把它显示到登录页面上去，怎么做呢？非常简单，在登录页面的代码中增加以下代码即可

<img src="/getCode" id="codeImg" onclick="refresh()" alt="">

没错，只需要在 src 使用 getCode 接口，将传过来的图片验证码显示即可，另外如果验证码比较模糊的，需要换一张显示，这个实现也非常简单，就是刷新一下验证码就行了

刷新验证码的代码如下（在 img 标签中增加一个点击事件即可）：

<script>
	/* 刷新验证码 */
    function refresh() {
        document.getElementById("codeImg").src = "getCode?time=" + new Date().getTime();
    }
</script>

结合验证码实现登录功能

完整的 Controller 代码如下：

package com.example.filedemo.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.captcha.generator.RandomGenerator;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author Woo_home
 * @create 2020/9/9 20:38
 */

@Controller
public class ImageController {

    private LineCaptcha lineCaptcha;

    private Logger logger = LoggerFactory.getLogger(ImageController.class);

    @RequestMapping("/toLogin")
    public String login() {
        return "login";
    }

    /**
     * 登录逻辑实现
     * @param request
     * @return
     */
    @RequestMapping("/login")
    public String index(HttpServletRequest request) {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String imgText = request.getParameter("imgText");
        logger.info("username:{}", username);
        logger.info("password:{}", password);
        logger.info("登录验证码:{}", lineCaptcha.getCode());
        if (("user").equals(username) && ("123").equals(password) && imgText.equals(lineCaptcha.getCode())) {
            return "redirect:hello";
        } else {
            return "redirect:toLogin";
        }
    }

    /**
     * 生成验证码
     * @param response
     */
    @RequestMapping("/getCode")
    public void getCode(HttpServletResponse response) {
        // 随机生成 4 位验证码
        RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
        // 定义图片的显示大小
        lineCaptcha = CaptchaUtil.createLineCaptcha(100, 30);
        response.setContentType("image/jpeg");
        response.setHeader("Pragma", "No-cache");
        try {
            // 调用父类的 setGenerator() 方法，设置验证码的类型
            lineCaptcha.setGenerator(randomGenerator);
            // 输出到页面
            lineCaptcha.write(response.getOutputStream());
            // 打印日志
            logger.info("生成的验证码:{}", lineCaptcha.getCode());
            // 关闭流
            response.getOutputStream().close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}