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

怼烎@ 2022-12-05 12:14 1018阅读 0赞

### 文章目录 ###

*  准备一个登录页面
 *  导入 Maven 依赖
 *  使用 Hutool 工具生成验证码
 *   *  LineCaptcha 线段干扰的验证码
     *  CircleCaptcha 圆圈干扰验证码
     *  ShearCaptcha 扭曲干扰验证码
     *  自定义验证码
 *  整合 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 的上方是验证码的显示的地方，下面会详细说

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

<!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 的文档地址][Hutool]

## LineCaptcha 线段干扰的验证码 ##

![在这里插入图片描述][20200910133232225.png_pic_center]  
实现代码如下：

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

## CircleCaptcha 圆圈干扰验证码 ##

![在这里插入图片描述][20200910133222257.png_pic_center]

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

## ShearCaptcha 扭曲干扰验证码 ##

![在这里插入图片描述][20200910135741469.png_pic_center]

// 定义图形验证码的长、宽、验证码字符数、干扰线宽度
    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 即可得到验证码，如下：

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

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

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

# 结合验证码实现登录功能 #

完整的 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();
            }
        }
    }

OK，现在再次启动应用，访问登录页面 http://localhost:8080/toLogin

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70_pic_center 2]  
我们来试下刷新验证码看看

![在这里插入图片描述][20200910150621674.gif_pic_center]

OK，刷新验证码是没什么问题的

--------------------

我们来试下登录

![在这里插入图片描述][2020091015070443.gif_pic_center]  
OK，这样就简单的验证码登录就完成了，[代码下载地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2abd756c45164292a2578bb55edf7862.png
[Hutool]: https://hutool.cn/docs/#/captcha/%E6%A6%82%E8%BF%B0
[20200910133232225.png_pic_center]: /images/20221123/97cdbaaa80ed4f30824cb0f30517f753.png
[20200910133222257.png_pic_center]: /images/20221123/d1f29c2cd4f6433fadf6d4b2e0f3e2d2.png
[20200910135741469.png_pic_center]: /images/20221123/811626945e7248d68ceaa59488ea775a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6b5b9f1d560340f2a4227b9d2547ebc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/1ff23094d6e34bb6b0f6eff219d04fe3.png
[20200910150621674.gif_pic_center]: /images/20221123/4cf4dd236d8e4634a4c01efcafd90f66.png
[2020091015070443.gif_pic_center]: /images/20221123/6c08735cc2374c83913d8cedc1ecfdb1.png
[Link 1]: https://gitee.com/WooGitee/springboot/tree/master/SpringBoot%20%E6%95%B4%E5%90%88%20Hutool/filedemo