流程:本项目是通过maven创建的,首先需要导入Kaptcha的jar包,然后在spring中配置Kaptcha的属性,还需要实现一个生成验证码的controller类,最后在前端显示。
导包:
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
配置 Kaptcha的spring文件,我这里是新建一个spring- Kaptcha.xml文件
<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">50</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>
/**
* Created by xuweijie on 2017/3/8.
* 生成验证码Controller.
*/
@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();
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;
}
}
前端:这里有的js函数的作用是当点击验证码图片的时候会更新验证码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户登录</title>
<script type="text/javascript">
function changeVerifyCode() {
var time=new Date().getTime();
document.getElementById("kaptchaImage").src="/kaptcha?d="+time;//为了不让验证码缓存,为了安全起见,需要次次都刷新
}
</script>
</head>
<body>
<br><br><br>
<div align="center">
<h1>登录</h1>
<br><br><br>
<form action="/login" method="POST">
用 户 名:<input type="text" name="username" placeholder="请输入用户名"><br><br><br>
密 码:<input type="password" name="password" placeholder="请输入密码"><br><br>
验 证 码:<input type="text" name="verifyCode" placeholder="请输入验证码"/>
<img src="/kaptcha.jpg" id="kaptchaImage" title="看不清,点击换一张" οnclick="changeVerifyCode()"><br><br>
<input type="submit" value="登录"> <input type="reset" value="取消">
</form>
</div>
</body>
</html>
最后一步就是做判断验证码输入正不正确啦,由于本项目集成了shiro,所以逻辑是当验证码通过后再去执行shiro的登录认证
@RequestMapping(value = "/login",method = RequestMethod.POST)
public String login(HttpServletRequest request, Model model){
CustomException customException=null;
String verifyCode=request.getParameter("verifyCode").toUpperCase();
String username=request.getParameter("username");
String password=request.getParameter("password");
//判断验证码输入是否正确
if(verifyCode.equals(request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY))){
if((username!=null && password!=null)){
UsernamePasswordToken token=new UsernamePasswordToken(username,password);
Subject subject= SecurityUtils.getSubject();
try{
subject.login(token);
}catch (AuthenticationException e){
customException=new CustomException(e.getMessage());
}
if( subject.isAuthenticated()){
subject.logout();
model.addAttribute("username",username);
return "/loginsuccess";
}else {
model.addAttribute("exception",customException.getMessage());
return "/refuse";
}
}
}else {
System.out.print("验证码输入不正确");
}
return "login";
}