java+html实现验证码

java+html实现验证码

最近项目微信端扫出了几个中危安全漏洞，其中有一个暴力破解账号密码的漏洞，给出的建议是加一个验证码。在百度上搜了很久都没搜到完整能用的，在这里分享一个简单完整能用的~

1.jar包准备

<dependency>  
	    <!-- google kaptcha-->
	    <groupId>com.github.penggle</groupId>  
	    <artifactId>kaptcha</artifactId>  
	    <version>2.3.2</version>  
	<exclusions>
		<exclusion>
			<artifactId>javax.servlet-api</artifactId>
			<groupId>javax.servlet</groupId>
		</exclusion>
	</exclusions>
</dependency>

这里我如果不导servlet包的话项目启动会报错找不到class，可以根据自己的项目选择需不需要javax.servlet。kaptcha包是必须的。测试可以正常下载，附地址：http://maven.aliyun.com/nexus/#welcome

2.spring bean的配置.

<!-- google kaptcha的相关配置-->
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
	<property name="config"> 
		<bean class="com.google.code.kaptcha.util.Config">
			<constructor-arg>
				<props>
				<!-- 是否有边框 可选yes 或者 no -->
				<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.textproducer.font.size">45</prop>
				<!-- 验证码图片的宽度 默认200 -->
				<prop key="kaptcha.image.width">125</prop>
				<!-- 验证码图片的高度 默认50 -->
				<prop key="kaptcha.image.height">60</prop>
				<!-- 验证码文本字符长度  默认为5 -->
				<prop key="kaptcha.textproducer.char.length">4</prop>
				<!-- 验证码文本字体样式  默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)  -->
				<prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
				</props>
			</constructor-arg>
		</bean>
	</property>
</bean>		

验证码的样式可以自己在bean里配置。

3.controller层的代码

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;

import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
 
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;

/**
	      *             
	      *                获取验证码图片
	      * @author         晴天
	      * @param         request
	      * @param         response
	      * @return
	      * @throws         IOException
	      * Created        2018年9月12日 上午10:34:28
	      */
	     @RequestMapping("/captcha/getCaptchaCode")
	     public ModelAndView getCaptchaCode(HttpServletRequest request, HttpServletResponse response) throws IOException{
	         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;
	     }

/**
	      *             
	      *                前端输入的验证码与生成的对比
	      * @author         晴天
	      * @param         request
	      * @param         response
	      * @param         captchaCode
	      * @return
	      * @throws         IOException
	      * Created        2018年9月12日 上午10:34:28
	      */
		 @RequestMapping("checkCaptchaCode")
		 @ResponseBody
         public String checkCaptchaCode(HttpServletRequest request, HttpServletResponse response , @RequestParam("captchaCode") String captchaCode){
            System.out.println("页面输入验证码===="+captchaCode);
            response.setCharacterEncoding("UTF-8");
			response.setHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control", "no-cache");
			//直接从session中获取生成的验证码内容
			String generateCode =(String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
			String result = "";
			if(generateCode.equals(captchaCode)){
				result = "验证成功";
			}else{
				result = "验证失败";
			}
			return result;
         }

每次生成验证码都会把内容存入session，后台可以直接取出值和前台对比，很方便。

4.前端代码

<body>
生成的验证码：<img id="changeCaptcha" src="http://value-weixin/captcha/getCaptchaCode.htm"> <a href="javascript:changeCaptcha()">看不清，换一张</a>
<br>
<br>
请输入验证码：<input id="captchaCode" type="text"> <input type="button" value="提交验证" onclick="checkCaptcha()">
</body>

<script type="text/javascript">
//获取验证码图片
function changeCaptcha(){
 $("#changeCaptcha").attr("src","http://value-weixin/captcha/getCaptchaCode.htm");
}

 function checkCaptcha(){
     var captchaCode = $("#captchaCode").val();
     $.ajax({
         type:'post',
         async : false,
         url:'http://value-weixin/captcha/checkCaptchaCode',
         data:{"captchaCode" : captchaCode},
         success:function(data){
             alert(data);
         }
     });
 }

</script>

路径src以自己的项目路径为准

5.效果图

6.个人建议
建议在前台ajax返回结果处调用一次方法重新生成验证码，后台验证码验证之后调用生成验证码文本的代码重新生成新的验证码。以保证每个验证码用一次就被销毁掉。
以上