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

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

文章目录

  • 准备一个登录页面
  • 导入 Maven 依赖
  • 使用 Hutool 工具生成验证码
    • LineCaptcha 线段干扰的验证码
    • CircleCaptcha 圆圈干扰验证码
    • ShearCaptcha 扭曲干扰验证码
    • 自定义验证码
  • 整合 SpringBoot
  • 结合验证码实现登录功能

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

准备一个登录页面

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录</title>
  6.     <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">
  8.     <style> .form-style { width: 500px; height: 250px; float: left; border: #623e80 solid 5px; border-radius: 5px; } form { margin: 5px; } img { cursor: pointer; } </style>
  9. </head>
  10. <body>
  11.     <div class="form-style">
  12.         <form action="/login" class="form-horizontal" method="post">
  13.             <div class="form-group">
  14.                 <label for="username" class="col-sm-2 control-label">Username</label>
  15.                 <div class="col-sm-10">
  16.                     <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
  17.                 </div>
  18.             </div>
  19.             <div class="form-group">
  20.                 <label for="password" class="col-sm-2 control-label">Password</label>
  21.                 <div class="col-sm-10">
  22.                     <input type="password" class="form-control" id="password" name="password" placeholder="密码">
  23.                 </div>
  24.             </div>
  25.             <div class="form-group">
  26.                 <label for="password" class="col-sm-2 control-label">验证码</label>
  27.                 <div class="col-sm-10">
  28.                     <input type="text" class="form-control" id="imgText" name="imgText" placeholder="验证码">
  29.                 </div>
  30.             </div>
  31.             <div class="form-group">
  32.                 <div class="col-sm-offset-2 col-sm-10">
  33.                     <img src="/getCode" id="codeImg" onclick="refresh()" alt="">
  34.                 </div>
  35.             </div>
  36.             <div class="form-group">
  37.                 <div class="col-sm-offset-2 col-sm-10">
  38.                     <button type="submit" class="btn btn-default">Sign in</button>
  39.                 </div>
  40.             </div>
  41.         </form>
  42.     </div>
  43.     <script> /* 刷新验证码 */ function refresh() { document.getElementById("codeImg").src = "getCode?time=" + new Date().getTime(); } </script>
  44. </body>
  45. </html>

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Welcome</title>
  6. </head>
  7. <body>
  8.     <h1>登录成功！</h1>
  9. </body>
  10. </html>

导入 Maven 依赖

  1. <dependencies>
  2.    <dependency>
  3.         <groupId>org.springframework.boot</groupId>
  4.         <artifactId>spring-boot-starter-web</artifactId>
  5.     </dependency>
  7.     <dependency>
  8.         <groupId>org.springframework.boot</groupId>
  9.         <artifactId>spring-boot-starter-thymeleaf</artifactId>
  10.     </dependency>
  12.     <dependency>
  13.         <groupId>cn.hutool</groupId>
  14.         <artifactId>hutool-all</artifactId>
  15.         <version>5.1.0</version>
  16.     </dependency>
  17. </dependencies>

使用 Hutool 工具生成验证码

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

Hutool 的文档地址

LineCaptcha 线段干扰的验证码

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

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

CircleCaptcha 圆圈干扰验证码

在这里插入图片描述

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

ShearCaptcha 扭曲干扰验证码

在这里插入图片描述

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

自定义验证码

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

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

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

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

整合 SpringBoot

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

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

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

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

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

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

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

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

结合验证码实现登录功能

完整的 Controller 代码如下：

  1. package com.example.filedemo.controller;
  3. import cn.hutool.captcha.CaptchaUtil;
  4. import cn.hutool.captcha.LineCaptcha;
  5. import cn.hutool.captcha.generator.RandomGenerator;
  6. import org.slf4j.Logger;
  7. import org.slf4j.LoggerFactory;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12. import java.io.IOException;
  14. /** * @author Woo_home * @create 2020/9/9 20:38 */
  16. @Controller
  17. public class ImageController { 
  19.     private LineCaptcha lineCaptcha;
  21.     private Logger logger = LoggerFactory.getLogger(ImageController.class);
  23.     @RequestMapping("/toLogin")
  24.     public String login() { 
  25.         return "login";
  26.     }
  28.     /** * 登录逻辑实现 * @param request * @return */
  29.     @RequestMapping("/login")
  30.     public String index(HttpServletRequest request) { 
  31.         String username = request.getParameter("username");
  32.         String password = request.getParameter("password");
  33.         String imgText = request.getParameter("imgText");
  34.         logger.info("username:{}", username);
  35.         logger.info("password:{}", password);
  36.         logger.info("登录验证码:{}", lineCaptcha.getCode());
  37.         if (("user").equals(username) && ("123").equals(password) && imgText.equals(lineCaptcha.getCode())) { 
  38.             return "redirect:hello";
  39.         } else { 
  40.             return "redirect:toLogin";
  41.         }
  42.     }
  44.     /** * 生成验证码 * @param response */
  45.     @RequestMapping("/getCode")
  46.     public void getCode(HttpServletResponse response) { 
  47.         // 随机生成 4 位验证码
  48.         RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
  49.         // 定义图片的显示大小
  50.         lineCaptcha = CaptchaUtil.createLineCaptcha(100, 30);
  51.         response.setContentType("image/jpeg");
  52.         response.setHeader("Pragma", "No-cache");
  53.         try { 
  54.             // 调用父类的 setGenerator() 方法，设置验证码的类型
  55.             lineCaptcha.setGenerator(randomGenerator);
  56.             // 输出到页面
  57.             lineCaptcha.write(response.getOutputStream());
  58.             // 打印日志
  59.             logger.info("生成的验证码:{}", lineCaptcha.getCode());
  60.             // 关闭流
  61.             response.getOutputStream().close();
  62.         } catch (IOException e) { 
  63.             e.printStackTrace();
  64.         }
  65.     }
  66. }

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

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

在这里插入图片描述

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

我们来试下登录

在这里插入图片描述
OK，这样就简单的验证码登录就完成了，代码下载地址

发表评论

表情：
评论列表 （有 0 条评论，1046人围观）

还没有评论，来说两句吧...

相关阅读

    相关 登录图片验证码

    页面刷新时，自动发送获取验证码到服务端 输入验证码登录，登录成功返回token 通过token获取用户详情，跳转主页 //获取验证码图片 @GetMappi

    小咪咪小咪咪/ 0 赞/ 26 阅读

    相关 登录验证码的实现

    前言： 验证码，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的

    左手的ㄟ右手左手的ㄟ右手/ 0 赞/ 431 阅读

    相关 springboot+jwt 实现登录验证

    jwt 简介 json web token ，简要说明：前端传验证信息到后端，后端验证通过，返回一个对象，只不过这个对象是被加密的，这样后端就可以为无状态的，每次请求的时候，请

    迷南。迷南。/ 0 赞/ 439 阅读