pom.xml中加入如下依赖
<dependency>
<groupId>com.github.axet</groupId>
<artifactId>kaptcha</artifactId>
<version>0.0.9</version>
</dependency>
返回图片的服务
@GetMapping("captcha.jpg")
public void captcha(HttpServletResponse response, HttpSession session)throws ServletException, IOException {
response.setHeader("Cache-Control", "no-store, no-cache");
response.setContentType("image/jpeg");
String text = producer.createText();
BufferedImage image = producer.createImage(text);
session.setAttribute(Constants.KAPTCHA_SESSION_KEY, text);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(image, "jpg", out);
}
前端图片显示
<div class="form-group">
<img alt="如果看不清楚,请单击图片刷新!" class="pointer" src="" id="captcha_img">
<a href="javascript:;" id="refreshCode">点击刷新</a>
</div>
var page = {
init: function(){
var imgsrc = "http://127.0.0.1/user/captcha.jpg";
$('#captcha_img').attr('src',imgsrc);
this.bindEvent();
},
bindEvent : function(){
var _this = this;
$('#refreshCode').click(function(){
var imgsrc = "http://127.0.0.1/user/captcha.jpg";
$('#captcha_img').attr('src',imgsrc);
})
}
};
$(function(){
page.init();
});
登陆进行校验
@PostMapping("login")
public String login(String username, String password,
String captcha, HttpSession session) {
Object kaptcha = session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
if (null == kaptcha) {
return "验证码过期"
}
if (!captcha.equalsIgnoreCase(kaptcha.toString())) {
return "验证码错误"
}
return "验证码正确";
}
效果展示