验证码的作用
防止恶意破解密码、刷票、论坛灌水、刷页。
有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试,实际上使用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,百度社区),我们利用比较简易的方式实现了这个功能。虽然登录麻烦一点,但是对网友的密码安全来说这个功能还是很有必要,也很重要。但我们还是 提醒大家要保护好自己的密码 ,尽量使用混杂了数字、字母、符号在内的 6 位以上密码,不要使用诸如 1234 之类的简单密码或者与用户名相同、类似的密码 ,免得你的账号被人盗用给自己带来不必要的麻烦。
验证码通常使用一些线条和一些不规则的字符组成,主要作用是为了防止一些黑客把密码数据化盗取。
Kaptcha 简介
Kaptcha 是一个可高度配置的实用验证码生成工具,可自由配置的选项如:
验证码的字体验证码字体的大小验证码字体的字体颜色验证码内容的范围(数字,字母,中文汉字!)验证码图片的大小,边框,边框粗细,边框颜色验证码的干扰线验证码的样式(鱼眼样式、3D、普通模糊、...)
Kaptcha 详细配置表
Spring MVC 整合 Kaptcha
POM
pom.xml
配置文件如下:
<dependency><groupId>com.google.code.kaptcha</groupId><artifactId>kaptcha</artifactId><version>2.3</version></dependency>
主要增加了com.google.code.kaptcha:kaptcha
依赖
创建 Spring 配置
创建一个名为spring-context-kaptcha.xml
Spring 配置文件,配置如下:
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="/schema/beans"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/schema/beans /schema/beans/spring-beans.xsd"><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">yes</prop><prop key="kaptcha.border.color">105,179,90</prop><prop key="kaptcha.textproducer.font.color">blue</prop><prop key="kaptcha.image.width">125</prop><prop key="kaptcha.image.height">45</prop><prop key="kaptcha.textproducer.font.size">45</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></beans>
控制器关键代码
Controller
层的关键代码如下,主要作用为将生成的验证码放入Session
并输出到页面
package com.funtl.my.shop.web.ui.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.bind.annotation.RequestMethod;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;import java.io.IOException;@Controllerpublic class KaptchaController {@Autowiredprivate Producer captchaProducer;@RequestMapping(value = "verification", method = RequestMethod.GET)public ModelAndView verification(HttpServletRequest request, HttpServletResponse response) throws IOException {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 jpegresponse.setContentType("image/jpeg");// create the text for the imageString capText = captchaProducer.createText();// store the text in the sessionrequest.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);// create the image with the textBufferedImage bi = captchaProducer.createImage(capText);ServletOutputStream out = response.getOutputStream();// write the data outImageIO.write(bi, "jpg", out);try {out.flush();} finally {out.close();}return null;}}
JSP 关键代码
JSP 使用<img />
标签去请求验证码图片
<img id="verification" src="/verification" style="cursor: pointer;" title="看不清?换一张" />
为图片绑定一个点击事件用于无刷新更换验证码
$(function () {// 刷新验证码$("#verification").bind("click", function () {$(this).hide().attr('src', '/verification?random=' + Math.random()).fadeIn();});});