1、簡介
登錄模塊新增驗證碼驗證功能。
注意：驗證碼的具體驗證通過filter實現，理論上也可以通過攔截器interceptor實現。但是實際使用時過濾器（interceptor）和security不是很兼容，過濾器會被覆蓋。因此建議使用filter。
頁面如下圖所示
流程：
- 登錄頁面訪問驗證碼Controller，隨機生成驗證碼存於session，並返回驗證碼圖片在登錄頁面顯示。
- 登錄頁面輸入驗證碼,密碼，以及用戶名等信息並點擊提交。
- 自定義的驗證碼filter對登錄頁面提交的表單（meath=post url=/login）進行過濾。驗證是否有驗證碼以及是否與后台session存的驗證碼一致。
- 若一致則通過繼續走流程。若不一致則停止並重定向到登錄頁面。
2、使用
2.1maven
maven 新增google.code.kaptcha依賴
<dependency>
<groupId>com.google.code.kaptcha</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3</version>
</dependency>
2.2spring.xml
spring配置文件新增驗證碼生成器bean，該bean主要配置生成的驗證碼樣式。（CaptchaImageCreateController會引入該bean用於生成驗證碼圖片。）
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
<property name="config">
<bean class="com.google.code.kaptcha.util.Config">
<constructor-arg>
<props>
<prop key="kaptcha.border">no</prop>
<prop key="kaptcha.border.color">105,179,90</prop>
<prop key="kaptcha.textproducer.font.color">red</prop>
<prop key="kaptcha.image.width">250</prop>
<prop key="kaptcha.textproducer.font.size">80</prop>
<prop key="kaptcha.image.height">90</prop>
<prop key="kaptcha.session.key">code</prop>
<prop key="kaptcha.textproducer.char.length">4</prop>
<prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop>
</props>
</constructor-arg>
</bean>
</property>
</bean>
2.3驗證碼生成Controller
此Controller用於生成相關的驗證碼圖片，並把驗證碼存於session中。
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;
/**
* <p class="detail">
* 功能:生成驗證碼
* </p>
*
* @author huanghuizhou
* @ClassName Captcha image create controller.
* @Version V1.0.
* @date 2018.03.07 13:39:40
*/
@Controller
public class CaptchaImageCreateController {
private Producer captchaProducer = null;
@Autowired
public void setCaptchaProducer(Producer captchaProducer) {
this.captchaProducer = captchaProducer;
}
@RequestMapping("/captcha-image")
public ModelAndView handleRequest
(HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setDateHeader("Expires", 0);
// Set standard HTTP/1.1 no-cache headers.
response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
// Set IE extended HTTP/1.1 no-cache headers (use addHeader).
response.addHeader("Cache-Control", "post-check=0, pre-check=0");
// Set standard HTTP/1.0 no-cache header.
response.setHeader("Pragma", "no-cache");
// return a jpeg
response.setContentType("image/jpeg");
// create the text for the image
String capText = captchaProducer.createText();
// store the text in the session
request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
// create the image with the text
BufferedImage bi = captchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
// write the data out
ImageIO.write(bi, "jpg", out);
try {
out.flush();
} finally {
out.close();
}
return null;
}
}
2.4web.xml新增驗證碼filter
該filter對登錄頁面提交的表單（meath=post url=/login）進行過濾。驗證是否有驗證碼以及是否與后台session存的驗證碼一致。
web.xml假如下面配置
<filter>
<filter-name>loginFilter</filter-name>
<filter-class>com.gttown.boss.pbc.filter.LoginPostFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>loginFilter</filter-name>
<url-pattern>/login</url-pattern>
</filter-mapping>
2.5自定義的驗證碼filter
import com.google.code.kaptcha.Constants;
import org.apache.log4j.Logger;
import org.springframework.web.bind.annotation.RequestMethod;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginPostFilter implements Filter {
private static final Logger logger = Logger.getLogger(LoginPostFilter.class);
String captchaFieldName = "captcha";
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
if (!RequestMethod.POST.name().equals(((HttpServletRequest) servletRequest).getMethod())) {
filterChain.doFilter(servletRequest, servletResponse);
} else {
String requestCaptcha = servletRequest.getParameter(captchaFieldName).toLowerCase();
String genCaptcha = (String) ((HttpServletRequest) servletRequest).getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
logger.info("開始校驗驗證碼，生成的驗證碼為：" + genCaptcha + " ，輸入的驗證碼為：" + requestCaptcha);
if (!requestCaptcha.equals(genCaptcha)) {
logger.info("驗證碼錯誤。");
((HttpServletResponse) servletResponse).sendRedirect(((HttpServletRequest) servletRequest).getContextPath() + "/login?error=captchaError");
return;
}
filterChain.doFilter(servletRequest, servletResponse);
}
}
@Override
public void destroy() {
}
}
2.6login頁面
<a href="javascript:void(0)">
<img id="captchaImg"src="${pbcDomain}/captcha-image"></a>
<script type="text/javascript">
// 點擊圖片更換驗證碼
$(function () {
$("#captchaImg,#captcha-refresh-btn").click(function () {
$("#captchaImg").attr('src', '${pbcDomain}/captcha-image?' + Math.floor(Math.random() * 100));
});
})
</script>