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> get
Captcha(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 "用户名或密码错误";
}
}
}
```
在get
Captcha方法中，首先
使用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="refresh
Captcha()">refresh</a>
</div>
<input type="submit" value="Login">
</form>
<script>
function refresh
Captcha() {
// 刷新
验证码
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 () {
refresh
Captcha();
};
</script>
</body>
</html>
```
在页面加载时，
使用fetch方法调用/
captcha接口获取
验证码图片的base64编码，并将其设置为<img>标签的src属性。当点击刷新链接时，再次调用/
captcha接口获取新的
验证码图片，并刷新<img>标签的src属性。在提交表单时，将用户输入的
验证码一并提交给后端进行校验。
这样，就完成了
使用easycaptcha生成
验证码，并将其以base64格式传给
前端登录页面的后端代码和
前端代码。
最低0.47元/天 解锁文章
2231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
