kaptcha验证码使用配置

傷城~ 2022-03-06 16:33 686阅读 0赞

效果图：

![20130430223135004][]

1.  首先加入 kaptcha的jar包在工程中kaptcha-2.3.2.jar和kaptcha-2.3.2-jdk14.jar

2. 配置web.xml：对kaptcha的参数进行配置：

<servlet>
    		
    		<servlet-name>Kaptcha</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.textproducer.font.names</param-name>
    			<param-value>宋体,楷体,微软雅黑</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>90</param-value>
    		</init-param>
    		
    		<init-param>
    			<param-name>kaptcha.textproducer.char.string</param-name>
    			<param-value>abcdefghigkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ2345679</param-value>
    		</init-param>
    		
    		<init-param>
    			<param-name>kaptcha.image.height</param-name>
    			<param-value>40</param-value>
    		</init-param>
    		
    		<init-param>
    			<param-name>kaptcha.textproducer.font.size</param-name>
    			<param-value>30</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.background.clear.from</param-name>
    			<param-value>green</param-value>
    		</init-param>
    		
    		<init-param>
    			<param-name>kaptcha.background.clear.to</param-name>
    			<param-value>white</param-value>
    		</init-param>
    		
    		<init-param>
    			<param-name>kaptcha.noise.impl</param-name>
    			<param-value>com.google.code.kaptcha.impl.NoNoise </param-value>
    		</init-param>
    		
    		<init-param>
                <param-name>kaptcha.obscurificator.impl</param-name>
                <param-value>com.google.code.kaptcha.impl.ShadowGimpy</param-value>
            </init-param>
    	</servlet>
    	
    	<servlet-mapping>
    		<servlet-name>Kaptcha</servlet-name>
    		<url-pattern>/Kaptcha.jpg</url-pattern>
    	</servlet-mapping>

3. jsp页面展示：

初始化提交提交表单

$('#dialog_login_loginForm').form({
    					url : "${pageContext.request.contextPath}/userAction!login.action",
    					success : function(data) {
    						var obj = jQuery.parseJSON(data);
    						if (obj.success) {
    							$.messager.show({
    								title : '提示',
    								msg : obj.msg,
    							});
    							loginDialog.dialog('close');
    						}else{
    							$.messager.show({
    								title : '提示',
    								msg : obj.msg,
    								iconCls:'icon-no',
    							});
    						}
    					}
    				});

验证验证码：

//判断验证码输入是否正确
    function checkVerifyCode(){
    	$.ajax({
    		url : "${pageContext.request.contextPath}/userAction!checkVerifyCode.action?verifyCode="+$('#verifyCode').val(),
    		success : function(data) {
    			var obj = jQuery.parseJSON(data);
    			if (obj.success) {
    				$('#dialog_login_loginForm').submit();
    			}else{
    				$.messager.show({
    					title : '提示',
    					msg : obj.msg,
    					iconCls:'icon-no',
    				});
    			}
    		}
    	});

Action处理验证：

public void checkVerifyCode(){
    		
    		Json j = new Json();
    		//获取传过来的验证码
    	    String verifyCode =ServletActionContext.getRequest().getParameter("verifyCode");
    		 //获取kaptcha生成存放在session中的验证码
            String kaptchaValue = (String) ServletActionContext.getRequest().getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
            //比较输入的验证码和实际生成的验证码是否相同
            if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) {
                j.setMsg("输入的验证码不正确！");
            }else {
            	j.setSuccess(true);
            }	
            super.writeJson(j);
    	}

[20130430223135004]: /images/20220302/085d1e63456c42248b3344ca02fb1aba.png