kaptcha 验证码技术

最新推荐文章于 2024-07-04 21:47:05 发布

懒企鹅

最新推荐文章于 2024-07-04 21:47:05 发布

阅读量4.4k

点赞数

文章标签：验证码

本文链接：https://blog.csdn.net/qq_24949727/article/details/53785993

版权

1、添加依赖：

		<dependency>
		    <groupId>com.github.penggle</groupId>
		    <artifactId>kaptcha</artifactId>
		    <version>2.3.2</version>
		</dependency>

2、配置web.xml

	<servlet>  
	    <servlet-name>Kaptcha</servlet-name>  
	    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>  
	</servlet>  
	<servlet-mapping>  
	    <servlet-name>Kaptcha</servlet-name>  
	    <url-pattern>/kaptcha.jpg</url-pattern> 
	</servlet-mapping>

3、applicationContext:

	<!-- 验证码 -->
	<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">36</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>

4、 Controller

@Controller  
@RequestMapping("/code")  
public class CaptchaController {  
      
    @Autowired  
    private Producer captchaProducer = null;  
  
    @RequestMapping(value = "/captcha-image")  
    public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {  
        HttpSession session = request.getSession();  
        response.setDateHeader("Expires", 0);  
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");  
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");  
        response.setHeader("Pragma", "no-cache");  
        response.setContentType("image/jpeg");  
        
        String capText = captchaProducer.createText();  
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);  
        System.out.println("验证码: " + capText ); 
        BufferedImage bi = captchaProducer.createImage(capText);  
        ServletOutputStream out = response.getOutputStream();  
        ImageIO.write(bi, "jpg", out);  
        try {  
            out.flush();  
        } finally {  
            out.close();  
        }  
        return null;  
    }  
    
    
    @RequestMapping(value = "/captchaVerify",method=RequestMethod.POST)  
    @ResponseBody
    public Map<String,Object> captchaVerify( String kaptchaCode,HttpServletRequest request, HttpServletResponse response) throws Exception {  
    	Map<String,Object> result=new HashMap<>();
    	HttpSession session = request.getSession();  
    	String code = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY); 
    	System.out.println("kaptchaCode:"+kaptchaCode+"  ;code:"+code);
    	if(StringUtils.isNotBlank(kaptchaCode)&&kaptchaCode.equalsIgnoreCase(code)){
    		result.put("isOK", "OK");
    	}else{
    		result.put("isOK", "WRONG");
    	}
    	return result;
    }  
}

5.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ddd</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script type="text/javascript"> 
$(function(){
	//debugger;//生成验证码         
    $('#kaptchaImage').click(function () {  
    $(this).hide().attr('src', 'code/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn(); }); 
	$("#commitBtn").click(function () {
		var kaptchaCode=$("#kaptchaCode").val().trim();
		console.log(JSON.stringify(kaptchaCode));
		if(kaptchaCode!=""){
			$.ajax({
				type:"POST",
				url:"code/captchaVerify",
				data:{"kaptchaCode":kaptchaCode},
				dataType: "json",
				success:function(data){
					console.log(JSON.stringify(data));
					if(data.isOK=="OK"){
						alert("验证码OK");
					}else{
						alert("验证码WRONG");
					}
				}
			});
		}
	});
});   

  		  
function changeCode() {  //刷新
    $('#kaptchaImage').hide().attr('src', 'code/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn();  
}  
</script> 
<body class="easyui-layout">


<div class="form-group">  
   <label>验证码 </label> 
   <input name="j_code" type="text" id="kaptchaCode" maxlength="4" class="form-control" />
   <br/> 
   <img src="   "  id="kaptchaImage"  style="margin-bottom: -3px"/>       
   <a href="#" οnclick="changeCode()">看不清?换一张</a>  
</div>
    
<div>
<button id="commitBtn" >提交</button>
</div>
</body>
</html>