1.maven依赖
<!-- 验证码-->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
2.Kaptcha配置类
import java.util.Properties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
/**
* Kaptcha配置类
* @author Administrator
*
*/
@Configuration
public class kaptchaConfig {
@Bean(name="captchaProducer")
public DefaultKaptcha getKaptchaBean(){
DefaultKaptcha defaultKaptcha=new DefaultKaptcha();
Properties properties=new Properties();
properties.setProperty("kaptcha.border", "yes");
properties.setProperty("kaptcha.border.color", "105,179,90");
properties.setProperty("kaptcha.textproducer.font.color", "blue");
properties.setProperty("kaptcha.image.width", "125");
properties.setProperty("kaptcha.image.height", "45");
properties.setProperty("kaptcha.session.key", "code");
properties.setProperty("kaptcha.textproducer.char.length", "4");
properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
Config config=new Config(properties);
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
3.KaptchaController
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
@Controller
public class KaptchaController {
@Autowired
private Producer captchaProducer;
/**
* 生成验证码
* @param request
* @param response
* @throws Exception
*/
@GetMapping("/getKaptchaImage")
public void getKaptchaImage(HttpServletRequest request,
HttpServletResponse response) throws Exception {
response.setDateHeader("Expires", 0);
response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
response.addHeader("Cache-Control", "post-check=0, pre-check=0");
response.setHeader("Pragma", "no-cache");
response.setContentType("image/jpeg");
String capText = captchaProducer.createText();
//生成的验证码存入session
request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
BufferedImage bi = captchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(bi, "jpg", out);
try {
out.flush();
} finally {
out.close();
}
}
/**
* 验证码校验实例
* @param inputCode
* @param request
* @param model
* @return
*/
@RequestMapping("/verify")
public String verifyCode(String inputCode,HttpServletRequest request,Model model) {
//...
String view ="success";
if(inputCode==null) {
return view;
}
//验证码
String tips = "";
HttpSession httpSession = request.getSession();
//取出验证码
String kaptcha = (String) httpSession.getAttribute(Constants.KAPTCHA_SESSION_KEY);
if(!kaptcha.equals(inputCode)) {
tips = "验证码有误";
model.addAttribute("tips", tips);
}else {
tips = "验证码正确";
model.addAttribute("tips", tips);
}
//...
return view;
}
}
4.页面嵌入片段success.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>验证码校验页面</title>
</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
function flushCode(){
var timestamp = new Date().getTime();
$('#kaptcha').attr("src","/getKaptchaImage?"+timestamp);
}
</script>
<body>
<div class="form-group">
<div style="margin: 10% auto auto 40%;width: 300px">
<form action="#" th:action="@{/verify}" method="post">
<input type="text" name="inputCode" class="form-control" placeholder="验证码" style="width: 100px;float: left;" required="required">
<a href="#" onclick="flushCode()"><i>看不清楚</i></a>
<img id="kaptcha" alt="待加载..." src="/" th:src="@{/getKaptchaImage}"/>
<div class="form-group">
<label for="exampleInputPassword1" th:text="${tips}"></label>
</div>
<button type="submit" class="btn btn-default">校验</button>
</form>
</div>
</div>
</body>
</html>

还没有评论,来说两句吧...