写一个springboot后端使用easycaptcha生成验证码,以base64的形式传给前端登录页面,前端展示
时间: 2024-06-10 08:10:56 浏览: 157
1. 引入依赖
在pom.xml中添加以下依赖:
```
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>easy-captcha-spring-boot-starter</artifactId>
<version>2.4.4</version>
</dependency>
```
2. 配置参数
在application.properties或application.yml中添加以下配置:
```
# 验证码配置
easy.captcha.width=130 # 验证码宽度
easy.captcha.height=48 # 验证码高度
easy.captcha.length=4 # 验证码字符长度
easy.captcha.font-size=30 # 验证码字体大小
easy.captcha.expire=120 # 验证码有效期,单位秒
```
3. 生成验证码
在登录接口中生成验证码,代码如下:
```java
@RestController
public class LoginController {
@Autowired
private Producer captchaProducer;
@GetMapping("/captcha")
public Map<String, String> getCaptcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 生成验证码
String text = captchaProducer.createText();
BufferedImage image = captchaProducer.createImage(text);
// 将验证码转换成base64格式
ByteArrayOutputStream bos = new ByteArrayOutputStream();
ImageIO.write(image, "png", bos);
byte[] bytes = bos.toByteArray();
String base64Img = "data:image/png;base64," + Base64.getEncoder().encodeToString(bytes);
// 将验证码存入session中
HttpSession session = request.getSession();
session.setAttribute("captcha", text);
// 返回结果
Map<String, String> result = new HashMap<>();
result.put("captcha", base64Img);
return result;
}
@PostMapping("/login")
public String login(HttpServletRequest request, @RequestParam String username, @RequestParam String password, @RequestParam String captcha) {
// 校验验证码
HttpSession session = request.getSession();
String captchaInSession = (String) session.getAttribute("captcha");
if (!captcha.equals(captchaInSession)) {
return "验证码错误";
}
// 校验用户名和密码
if ("admin".equals(username) && "123456".equals(password)) {
return "登录成功";
} else {
return "用户名或密码错误";
}
}
}
```
在getCaptcha方法中,首先使用captchaProducer.createText()方法生成验证码的文字,然后使用captchaProducer.createImage(text)方法生成验证码图片。接着,将验证码图片转换成base64格式,并将验证码文字存入session中,最后返回包含验证码图片的base64编码的结果。
在login方法中,先从session中获取验证码文字,然后与用户输入的验证码比较。如果一致,则校验用户名和密码,并返回登录结果。
4. 前端展示
在前端页面中,使用<img>标签展示验证码,代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form action="/login" method="post">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<div>
<label for="captcha">Captcha:</label>
<input type="text" name="captcha" id="captcha">
<img src="" id="captchaImg">
<a href="#" onclick="refreshCaptcha()">refresh</a>
</div>
<input type="submit" value="Login">
</form>
<script>
function refreshCaptcha() {
// 刷新验证码
var captchaImg = document.getElementById("captchaImg");
var url = "/captcha?" + new Date().getTime();
fetch(url).then(function (response) {
return response.json();
}).then(function (data) {
captchaImg.src = data.captcha;
});
}
// 页面加载时刷新验证码
window.onload = function () {
refreshCaptcha();
};
</script>
</body>
</html>
```
在页面加载时,使用fetch方法调用/captcha接口获取验证码图片的base64编码,并将其设置为<img>标签的src属性。当点击刷新链接时,再次调用/captcha接口获取新的验证码图片,并刷新<img>标签的src属性。在提交表单时,将用户输入的验证码一并提交给后端进行校验。
这样,就完成了使用easycaptcha生成验证码,并将其以base64格式传给前端登录页面的后端代码和前端代码。
阅读全文