1、Kaptcha详细配置
|
配置项
|
配置说明
|
默认值
|
|---|---|---|
|
kaptcha.border
|
图⽚边框，合法值：yes , no
|
yes
|
|
kaptcha.border.color
|
边框颜⾊，合法值： r,g,b (and optional
alpha) 或者 white,black,blue
|
black
|
|
kaptcha.image.width
|
图⽚宽
| 200 |
|
kaptcha.image.height
|
图⽚⾼
| 50 |
|
kaptcha.producer.impl
|
图⽚实现类
|
com.google.code.kaptcha.imp
l.DefaultKaptcha
|
|
kaptcha.textproducer.impl
|
⽂本实现类
|
com.google.code.kaptcha.text
.impl.DefaultTextCreator
|
|
kaptcha.textproducer.char.s
tring
|
⽂本集合，验证码值从此集合中获取
|
abcde2345678gfynmnpwx
|
|
kaptcha.textproducer.char.l
ength
|
验证码⻓度
|
5
|
|
kaptcha.textproducer.font.n
ames
|
字体
|
Arial, Courier
|
|
kaptcha.textproducer.font.si
ze
|
字体⼤⼩
| 40px. |
|
kaptcha.textproducer.font.c
olor
|
字体颜⾊，合法值： r,g,b 或者
white,black,blue.
|
black
|
|
kaptcha.textproducer.char.s
pace
|
⽂字间隔
| 2 |
|
kaptcha.noise.impl
|
⼲扰实现类
|
com.google.code.kaptcha.imp
l.DefaultNoise
|
|
kaptcha.noise.color
|
⼲扰 颜⾊，合法值： r,g,b 或者
white,black,blue.
|
black
|
|
kaptcha.obscurificator.impl
|
图⽚样式:
⽔纹
com.google.code.kaptcha.impl.WaterRip
ple
⻥眼
com.google.code.kaptcha.impl.FishEyeG
impy
阴影
com.google.code.kaptcha.impl.Shadow
Gimpy
|
com.google.code.kaptcha.imp
l.WaterRipple
|
|
kaptcha.background.impl
|
背景实现类
|
com.google.code.kaptcha.imp
l.DefaultBackground
|
|
kaptcha.background.clear.fr
om
|
背景颜⾊渐变，开始颜⾊
| light grey |
|
kaptcha.background.clear.t
o
|
背景颜⾊渐变， 结束颜⾊
| white |
|
kaptcha.word.impl
|
⽂字渲染器
|
com.google.code.kaptcha.text
.impl.DefaultWordRenderer
|
|
kaptcha.session.key
|
session key
|
KAPTCHA_SESSION_KEY
|
|
kaptcha.session.date
|
session date
|
KAPTCHA_SESSION_DATE
|
2、使用举例
3、
（1）生成验证码我们需要引入的依赖
<dependency>
<groupId>com.oopsguy.kaptcha</groupId>
<artifactId>kaptcha-spring-boot-starter</artifactId>
<version>1.0.0-beta-2</version>
</dependency>（2）生成验证码需要引入的yml代码
kaptcha:
items:
admin:
path: /admin/captcha
session:
key: ADMIN_KAPTCHA_SESSION_KEY
date: ADMIN_KAPTCHA_SESSION_DATE4、后端代码
package com.example.demo;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpSession;
import javax.xml.crypto.Data;
import java.util.Date;
@RequestMapping("/admin")
@RestController
public class KaptchaController {
//获取yml文件的对象
private static final String ADMIN_KAPTCHA_SESSION_KEY="ADMIN_KAPTCHA_SESSION_KEY";
private static final String ADMIN_KAPTCHA_SESSION_DATE="ADMIN_KAPTCHA_SESSION_DATE";
//定义过期时间
private static final long TIME_OUT=60*1000;//一分钟
//校验验证码是否正确
@RequestMapping("/check")
public boolean chech(String inputCaptcha, HttpSession session){
//1判断验证码是否为空
if(!StringUtils.hasLength(inputCaptcha)){
return false;
}
//2获取生成的验证码(因为我们生成的验证码存在session中)
//所以我们要从session中获取(生成的验证码，正确的验证码)
String saveCaptcha=(String) session.getAttribute(ADMIN_KAPTCHA_SESSION_KEY);
//获取验证码生成的时间
Date saveCaptchaDate=(Date) session.getAttribute(ADMIN_KAPTCHA_SESSION_DATE);
//3对比验证码是否一致(不区分大小写)
if(inputCaptcha.equalsIgnoreCase(saveCaptcha)){
if(saveCaptchaDate!=null||System.currentTimeMillis()-saveCaptchaDate.getTime()<TIME_OUT){
return true;
}
}
return false;
//4验证码是否过期
}
}5、前端验证码页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>验证码</title>
<style>
#inputCaptcha {
height: 30px;
vertical-align: middle;
}
#verificationCodeImg{
vertical-align: middle;
}
#checkCaptcha{
height: 40px;
width: 100px;
}
</style>
</head>
<body>
<h1>输入验证码</h1>
<div id="confirm">
<input type="text" name="inputCaptcha" id="inputCaptcha">
<img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" />
<input type="button" value="提交" id="checkCaptcha">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$("#verificationCodeImg").click(function(){
$(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();
});
$("#checkCaptcha").click(function () {
$.ajax({
type:"get",
url:"/admin/check",
data:{
inputCaptcha:$("#inputCaptcha").val()
},
success:function(result){
if(result){
location.href="success.html";
}else{
alert("校验失败");
}
}
});
});
</script>
</body>
</html>6、前端验证码成功跳转的页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证成功页</title>
</head>
<body>
<h1>验证成功</h1>
</body>
</html>
