1.首先引入jar包,
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
<!--排除兼容,防止下载不下来,下载后可以删除-->
<exclusions>
<exclusion>
<artifactId>javax.servlet-api</artifactId>
<groupId>javax.servlet</groupId>
</exclusion>
</exclusions>
</dependency>
2.在springmvc.xml中配置bean
<bean id="defaultKaptcha" class="com.google.code.kaptcha.impl.DefaultKaptcha">
<property name="config">
<bean class="com.google.code.kaptcha.util.Config">
<constructor-arg>
<props>
<!-- 验证码宽度 -->
<prop key="kaptcha.image.width">110</prop>
<!-- 验证码高度 -->
<prop key="kaptcha.image.height">40</prop>
<!-- 生成验证码内容范围 -->
<prop key="kaptcha.textproducer.char.string">0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</prop>
<!-- 验证码个数 -->
<prop key="kaptcha.textproducer.char.length">4</prop>
<!-- 是否有边框 -->
<prop key="kaptcha.border">no</prop>
<!-- 边框颜色 -->
<prop key="kaptcha.border.color">105,179,90</prop>
<!-- 边框厚度 -->
<prop key="kaptcha.border.thickness">1</prop>
<!-- 验证码字体颜色 -->
<prop key="kaptcha.textproducer.font.color">black</prop>
<!-- 验证码字体大小 -->
<prop key="kaptcha.textproducer.font.size">30</prop>
<!-- 验证码所属字体样式 -->
<prop key="kaptcha.textproducer.font.names">楷体</prop>
<!-- 干扰线颜色 -->
<prop key="kaptcha.noise.color">black</prop>
<!-- 验证码文本字符间距 -->
<prop key="kaptcha.textproducer.char.space">3</prop>
<!-- 图片样式 :阴影-->
<prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>
</props>
</constructor-arg>
</bean>
</property>
</bean>
3,新建一个生成验证码的controller
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
@Controller
public class CaptchaController {
private Producer kaptchaProducer=null;
@Autowired
public void setCaptchaProducer(Producer kaptchaProducer) {
this.kaptchaProducer = kaptchaProducer;
}
@RequestMapping("/kaptcha")
public ModelAndView handleRequest(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 = kaptchaProducer.createText();
//seesion的key
request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
BufferedImage bi = kaptchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(bi, "jpg", out);
try {
out.flush();
} finally {
out.close();
}
return null;
}
}
在页面上,图片的加载会访问服务器,所以将图片的src设置成kaptcha就会找到这个controller,然后向页面输出验证码
3.jsp代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>在线图书商城</title>
<%@ include file="/WEB-INF/inc/taglibs.jsp" %>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
#img {
position: absolute;
z-index: -5;
width: 100%;
max-width: 1320px;
height: 100%;
max-height: 600px;
}
</style>
</head>
<body>
<img id="img" src="statics/images/bg.jpg" />
<div>
<div>
<h1 class="text-center">在线图书商城</h1>
<br><br>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-4 control-label">账号</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="telphone" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-4 control-label">密码</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="pass" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-4 control-label">验证码</label>
<div class="col-sm-4">
<input type="text" name="verifyCode" placeholder="请输入验证码"/>
<img src="kaptcha" id="kaptchaImage" title="看不清,点击换一张" onclick="changeVerifyCode()"><br><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-8">
<button type="button" class="btn btn-default loginsubmit" >登录</button>
    
<button type="button" class="btn btn-default">注册</button>
</div>
</div>
</form>
</div>
</div>
</body>
<script>
$(function () {
$(".loginsubmit").click(function(){
console.log("jquery起作用");
var telphone=$("#telphone").val();
var pass= $("#pass").val();
if(pass == "" || telphone == ""){
alert("账号或密码不能为空");
return;
}
$.ajax({
url:"login",
type:"post",
dataType:"json",
data:{"telphone":telphone,"pass":pass},
success:function(data){
if(data.code == '200'){
window.location="sysIndex";
}
},
error:function (data) {
console.log(data);
}
});
});
});
function changeVerifyCode() {
var time=new Date().getTime();
document.getElementById("kaptchaImage").src="kaptcha?d="+time;//为了不让验证码缓存,为了安全起见,需要次次都刷新
}
</script>
</html>
由于每次点击图片的时候,d的值不一样,所以就相当与要加载一个新的验证码图片,所以会再次访问CaptchaController ,找到kaptcha.
4,提前登录的时候时候,用存在session的验证码和用户输入的验证码进行比对
@ResponseBody
@RequestMapping(value = "login",method = RequestMethod.POST)
public ReturnData loginInfo(@RequestParam(value = "telphone",required = true)String telphone,
@RequestParam(value = "pass",required = true)String pass, HttpServletRequest request){
ReturnData r = new ReturnData();
logger.info("进入login--post");
//这里获取seession里的验证码
String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
logger.info("产生的验证码:"+kaptchaExpected);
Map<String,Object> map = new HashMap<>();
map.put("telphone",telphone);
map.put("pass",pass);
User user = userService.loginByphoneAndpass(map);
logger.info(user.toString());
if(user != null){
r.put("code","200");
r.put("msg","success");
r.put("user",user);
return r;
}
r.put("code","500");
r.put("msg","未找到用户信息");
return r;
}
5.验证成功后进行登录.效果图如下