# 验证码
# kaptcha——谷歌验证码工具(样式太老了)
# 导入依赖
<dependency>
<groupId>com.google.code</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
1
2
3
4
5
2
3
4
5
直接下载失败
方法一：
官网下载后放入maven本地仓库相应的目录里面
Google Code Archive - Long-term storage for Google Code Project Hosting. (opens new window)
方法2：
换github
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
1
2
3
4
5
2
3
4
5
# easycaptcha
https://github.com/pig-mesh/easy-captcha (opens new window)
# 使用hutool工具包
controller层，将验证码以base64编码返回前端，并将真实的值存到redis中，key值是"captcha_code_"+uuid，key值也返回前端，有效期设为为15s。
@GetMapping("/captcha")
public AjaxResult captcha(){
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200,100,4,20);
String uuid = UUID.randomUUID().toString();
//保存到redis
redisUtil.setEx("captcha_code_" + uuid, captcha.getCode(), 15L, TimeUnit.SECONDS);
Map<String, String> map = new HashMap<>();
map.put("uuid",uuid);
map.put("captcha",captcha.getImageBase64());
return AjaxResult.success(200,"获取验证码成功",map);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
登录时判断验证码，如果有问题抛出异常到全局异常处理器
@RequestMapping("/login")
public AjaxResult login(User user){
String code = redisUtil.get("captcha_code_" + user.getUuid());
if(code == null) throw new RuntimeException("验证码超时");
if(!code.equals(user.getCode().toLowerCase())) throw new RuntimeException("验证码错误");
String uuid = UUID.randomUUID().toString();
redisUtil.setEx(uuid, JSON.toJSONString(user), 15L, TimeUnit.MINUTES);
System.out.println(user);
Map<String, String> payload = new HashMap<>();
//加密算法，非对称加密
payload.put("userId", user.getUserId());
payload.put("userName", user.getUserName());
payload.put("login_key", uuid);
return AjaxResult.success(200,"登录成功",jwtutil.getTokenRsa(payload, Calendar.HOUR, 1));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
前端,存储一个隐藏的input，值为存储验证码的key值，登录时一起发送到后端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页</title>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
$(function(){
getCaptcha()
})
function getCaptcha(){
$.ajax({
url: "http://127.0.0.1:8080/user/captcha",
method: 'get',
dataType: "json",
success: function (result) {
if(result.success){
$("#captcha").attr("src","data:image/png;base64," + result.object.captcha);
$("#uuid").val(result.object.uuid)
}
}
});
}
function login() {
$.ajax({
url: "http://127.0.0.1:8080/user/login",
method: 'post',
data: $("#loginForm").serialize(),
dataType: "json",
success: function (result) {
if(result.success){
localStorage.setItem("token", result.object)
location.href="/main.html"
}else{
console.log('账号或密码错误')
}
}
});
}
</script>
</head>
<body>
<form id="loginForm">
账户：<input type="text" name="userId" id="userId"><br/>
密码：<input type="password" name="password" id="password"><br/>
<input name="uuid" id="uuid" hidden><br/>
验证码：<input type="text" name="code" ><br/>
<img id="captcha" src="" onclick="getCaptcha()">
</form>
<input type="button" onclick="login()" value="登录">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60