kaptchaCode(验证码)

Posted 2020-10-10 此时的人生

1.springMVC-servlet.xml配置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">yes</prop>  
                    <!-- 设置边框颜色-->
                    <prop key="kaptcha.border.color">105,179,90</prop> 
                    <!-- 图片宽度 --> 
                    <prop key="kaptcha.image.width">160</prop>  
                    <!-- 图片高度 -->
                    <prop key="kaptcha.image.height">50</prop>  
                    <prop key="kaptcha.session.key">code</prop>  
                    <!-- 设置字体颜色 -->
                    <prop key="kaptcha.textproducer.font.color">red</prop> 
                    <!-- 设置字体大小 --> 
                    <prop key="kaptcha.textproducer.font.size">35</prop>  
                    <!-- 文字价格 -->
                    <prop key="kaptcha.textproducer.char.space">5</prop>  
                     <!-- 设置字体个数 -->  
                    <prop key="kaptcha.textproducer.char.length">6</prop>  
                    <!-- 配置中文--> 
                    <!-- <prop key="kaptcha.textproducer.impl">com.google.code.kaptcha.text.impl.ChineseTextProducer</prop> -->
                    <!-- 设置字体样式 --> 
                    <prop key="kaptcha.textproducer.font.names">彩云,宋体,楷体,微软雅黑</prop>  
                </props>  
            </constructor-arg>  
        </bean>  
    </property>  
</bean> 

2.控制类VerifyCodeController.java

package com.shenqz.controller;  
  
import java.awt.image.BufferedImage;  
  

import javax.imageio.ImageIO;  
import javax.servlet.ServletOutputStream;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  

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.ResponseBody;
import org.springframework.web.servlet.ModelAndView;  

import com.google.code.kaptcha.Constants;  
import com.google.code.kaptcha.Producer; 
  
/** 
 * 随机验证码控制层 
 *  
 * 使用kaptcha-2.3.2.jar支持 
 *  
 * @author shenqz
 *  
 */  
@Controller  
public class VerifyCodeController {  
    
    private Producer captchaProducer = null; 
    
    @Autowired  
    public void setCaptchaProducer(Producer captchaProducer) {  
        this.captchaProducer = captchaProducer;  
    }
    
    @RequestMapping("captcha-image.do")  
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {  
        // 禁止服务器端缓存  
        response.setDateHeader("Expires", 0);
        // 设置标准的 HTTP/1.1 no-cache headers.  
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");  
        // 设置IE扩展 HTTP/1.1 no-cache headers (use addHeader).  
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        // 设置标准 HTTP/1.0 不缓存图片  
        response.setHeader("Pragma", "no-cache");
        //返回一个 jpeg 图片，默认是text/html(输出文档的MIMI类型)  
        response.setContentType("image/jpeg");
        //为图片创建文本  
        String capText = captchaProducer.createText();
        // 将文本保存在session中，这里就使用包中的静态变量吧  
        request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);  
          
        BufferedImage bi = captchaProducer.createImage(capText); // 创建带有文本的图片  
        ServletOutputStream out = response.getOutputStream();  
        // 图片数据输出  
        ImageIO.write(bi, "jpg", out);  
        try {  
            out.flush();  
        } finally {  
            out.close();  
        }  
  
        System.out.println("Session 验证码是：" + request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY));  
        return null;  
    }  
    
    @RequestMapping("checkCode.do")  
    @ResponseBody
    public String checkCode(HttpServletRequest request)  {  
        //获取用户输入的验证码  
        /*String submitCode = WebUtils.getCleanParam(request,"j_code"); */ 
          
        //从session中获取系统生成的验证码  
        String kaptchaCode = request.getParameter("kaptchaCode");
        String kaptchaExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);   
          
        System.out.println("用户输入的验证码是："+kaptchaCode+",系统生成的验证码："+kaptchaExpected);  
        //进行比较  
        if(!kaptchaCode.isEmpty() && kaptchaCode.equalsIgnoreCase(kaptchaExpected)){  
            return "true";
        }else {  
            return "false";  
        }  
        
    }


    
}  

3.jsp页面index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script> 
<script type="text/javascript">  
         $(function(){  //生成验证码           
            $(\'#kaptchaImage\').click(function () {    
                $(this).hide().attr(\'src\', \'captcha-image.do?\' + Math.floor(Math.random()*100) ).fadeIn(); 
            });        
         
            $(\'#submitBtn\').click(function(){  
                $.post(\'checkCode.do?kaptchaCode=\'+$(\'#kaptchaCode\').val(),function(data){  
                    if (data==\'true\'){  
                        window.location.href="captchaSuccess.jsp";
                    }else{  
                        alert("验证码错误!");      
                        return false;  
                    }  
                });  
            });  
        });    
        window.onbeforeunload = function(){    
            //关闭窗口时自动退出    
            if(event.clientX>360&&event.clientY<0||event.altKey){       
                alert(parent.document.location);    
            }    
        };          
        function changeCode() {  //刷新  
            $(\'#kaptchaImage\').hide().attr(\'src\', \'captcha-image.do?\' + Math.floor(Math.random()*100) ).fadeIn();    
            event.cancelBubble=true;    
        } 
        
</script>
</head>
    <body>
            <table> 
                <tr>  
                    <td>验证码:<input type="text" name="kaptchaCode" id="kaptchaCode" value="" /></td>  
                    <td align="right">
                        <img src="captcha-image.do" height="25px" width="100px" id="kaptchaImage"/> 
                        <a href="#" onclick="changeCode()">看不清?换一张</a>   
                        <input type="button" value="验证" id="submitBtn"/>
                    </td>
                </tr>  
            </table>
    </body>
</html>

4.页面效果

5.相关jar

kaptcha-2.3.2.jar