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/captchasession:key: ADMIN_KAPTCHA_SESSION_KEYdate: 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>
