文章目录
使用 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 工具包将验证码生成封装得非常简单了，只需要几行代码就可以生成验证码
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();
}
}
}
OK，现在再次启动应用，访问登录页面 http://localhost:8080/toLogin
我们来试下刷新验证码看看
OK，刷新验证码是没什么问题的
我们来试下登录
OK，这样就简单的验证码登录就完成了，代码下载地址
扫一扫
3729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
