javaWeb开发------调用验证码插件Kaptcha

一、导入Kaptcha验证码库文件

我当初尝试使用maven导入，毕竟做项目时采用的是maven开发，但Kaptcha验证码库文件死活导入失败，就直接采用jar文件导入方式导入了，下载路径。

二、在web.xml中配置验证码相关处理拦截

<servlet>			<!-- 验证码功能 -->
		<servlet-name>KaptchaServlet</servlet-name>
		<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
		<init-param>	<!-- 定义是否存在有边框 -->
			<param-name>kaptcha.border</param-name>
			<param-value>no</param-value>
		</init-param>
		<init-param>	<!-- 定义边框颜色 -->
			<param-name>kaptcha.border.color</param-name>
			<param-value>105,179,90</param-value>
		</init-param>
		<init-param>	<!-- 设置字体颜色 -->
			<param-name>kaptcha.textproducer.font.color</param-name>
			<param-value>red</param-value>
		</init-param>
		<init-param>	<!-- 设置生成图片宽度 -->
			<param-name>kaptcha.image.width</param-name>
			<param-value>130</param-value>
		</init-param>
		<init-param>	<!-- 设置生成图片高度 -->
			<param-name>kaptcha.image.height</param-name>
			<param-value>38</param-value>
		</init-param>
		<init-param>	<!-- 设置验证码显示文字尺寸 -->
			<param-name>kaptcha.textproducer.font.size</param-name>
			<param-value>30</param-value>
		</init-param>
		<init-param>	<!-- 设置验证码保存到session中的属性名称 -->
			<param-name>kaptcha.session.key</param-name>
			<param-value>rand</param-value>
		</init-param>
		<init-param>	<!-- 设置字符间距 -->
			<param-name>kaptcha.textproducer.char.space</param-name>
			<param-value>2</param-value>
		</init-param>
		<init-param>	<!-- 设置生成的验证码长度 -->
			<param-name>kaptcha.textproducer.char.length</param-name>
			<param-value>4</param-value>
		</init-param>
		<init-param>	<!-- 设置使用的字体 -->
			<param-name>kaptcha.textproducer.font.names</param-name>
			<param-value>宋体,楷体,微软雅黑</param-value>
		</init-param>
		<init-param>	<!-- 设置样式 -->
			<param-name>kaptcha.obscurificator.impl</param-name>
			<!-- <param-value>com.google.code.kaptcha.impl.FishEyeGimpy</param-value> -->
			<param-value>com.google.code.kaptcha.impl.ShadowGimpy</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>KaptchaServlet</servlet-name>
		<url-pattern>/captcha.jpg</url-pattern>
	</servlet-mapping>

三、jsp页面定义验证码的位置以及显示方式

<div class="form-group" id="codeDiv">
	<label class="col-md-2 control-label" for="code">验证码：</label>
	<div class="col-md-3">
		<input type="text" name="code" id="code" class="form-control input-sm" size="4" maxlength="4" placeholder="请输入验证码...">
	</div>
	<div class="col-md-2">
		<img id="imageCode" src="captcha.jpg">
	</div>
	<div class="col-md-4" id="codeMsg">*</div>
</div>

其中最重要的位置在于

<img id="imageCode" src="captcha.jpg">

此处的captcha.jpg与web.xml文件中定义的servlet配置<url-pattern>/captcha.jpg</url-pattern>相一致。

四、触发方式

页面加载后，会优先进行一个kaptcha的请求，获取数据，按照你在web.xml中设置的格式样式等信息显示对应的信息到指定的jsp页面中，同时按照你定义的

<init-param>   
           <param-name>kaptcha.session.key</param-name>
           <param-value>rand</param-value>
       </init-param>

保存至session中，key为设定的rand。

五、点击验证码实现更换操作

$("#imageCode").on("click",function(){
		$("#imageCode").attr("src","captcha.jpg?p=" + Math.random()) ;
	}) ;

六、实现验证码的校验操作

定义服务器，实现控制器的监听

package cn.linkpower.singup.action.front;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import cn.linkpower.util.action.AbstractAction;
import cn.linkpower.util.string.StringUtils;
/**
 *验证码处理类
 * @author 76519
 *
 */
@Controller
public class RandAndCodeAction extends AbstractAction{
	private Logger log = Logger.getLogger(RandAndCodeAction.class);
	@RequestMapping("/checkRandAndCode")
	public ModelAndView checkRandAndCode(String code , HttpServletRequest request,
			HttpServletResponse response){
		log.info("调用验证码校验类");
		HttpSession session = request.getSession();
		//web.xml文件配置中有验证码保存kaptcha.session.key----取得session中保存的code值
		String rand = (String) session.getAttribute("rand");
		log.info("session中存储的验证码："+String.valueOf(rand));
		log.info("用户输入的验证码："+code);
		if(StringUtils.isEmpty(rand)){
			super.print(response, false);
			return null;
		}
		//取得页面传递来的验证码值
		//String code = request.getParameter("code");
		if(StringUtils.isEmpty(code)){
			super.print(response, false);
			return null;
		}
		//都存在
		super.print(response, rand.equalsIgnoreCase(code));
		return null;
	}
	
	@Override
	public String getFileUploadDir() {
		return null;
	}

}

其中定义的父类，只是做了返回输出以及读取文件等操作

public abstract class AbstractAction {
    public void print(HttpServletResponse response, Object value) {
		try {
			response.setCharacterEncoding("UTF-8");
			response.getWriter().print(value);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

前端提交代码，请求相应的控制器

$("#myform").validate({
		debug : true, // 取消表单的提交操作
		submitHandler : function(form) {
			form.submit(); // 提交表单
		},
		errorPlacement : function(error, element) {
			$("#" + $(element).attr("id").replace(".", "\\.") + "Msg").append(error);
		},
		highlight : function(element, errorClass) {
			$(element).fadeOut(1,function() {
				$(element).fadeIn(1, function() {
					$("#" + $(element).attr("id").replace(".","\\.") + "Div").attr("class","form-group has-error");
				});

			})
		},
		unhighlight : function(element, errorClass) {
			$(element).fadeOut(1,function() {
				$(element).fadeIn(1,function() {
						$("#" + $(element).attr("id").replace(".","\\.") + "Div").attr("class","form-group has-success");
				});
			})
		},
		errorClass : "text-danger",
		rules : {
			"mid" : {
				required : true 
			},
			"password" : { 
				required : true
			},
			"code" : {
				required : true ,
				remote : {
					url : "checkRandAndCode.action", // 后台处理程序
					type : "post", // 数据发送方式
					dataType : "html", // 接受数据格式
					data : { // 要传递的数据
						code : function() {
							return $("#code").val();
						}
					},
					dataFilter : function(data, type) {
						if (data.trim() == "true") {
							return true;
						} else { 
							return false;
						}
					}
				}
			}
		}
	});

上述js代码，只需要采用其中的code部分即可，主要实现输入的code和session(有时间限制)中保存的code相对比(忽略大小写问题)。

javaWeb开发------调用验证码插件Kaptcha

猜你喜欢