验证码Kaptcha的使用

引言

Kaptcha是一个非常实用的验证码生成工具，可以通过配置生成多样化的验证码。以图片的形式显示，从而无法进行复制粘贴。

1.引入Maven依赖

		
		    com.github.penggle
		    kaptcha
		    2.3.2
		 

2.编写Servlet

接着我们需要在web.xml中编写一个servlet，该servlet的作用就是去生成一个验证码，主要指指定了验证码的样式，字体等等

  	Kaptcha
  	com.google.code.kaptcha.servlet.KaptchaServlet
  	
  	
  		kaptcha.border
  		no
  	
  	
  	
  		kaptcha.textproducer.font.color
  		red
  	
  	
  	
  		kaptcha.image.width
  		135
  	
  	
  	
  		kaptcha.textproducer.char.string
  		ACDEFHKPRSTWX345678
  	
  	
  	
  		kaptcha.image.height
  		50
  	
  	
  	
  		kaptcha.textproducer.font.size
  		43
  	
  	
  	
  		kaptcha.noise.color
  		black
  	
  	
  	
  		kaptcha.textproducer.char.length
  		4
  	
  	
  	
  		kaptcha.textproducer.font.names
  		Arial
  	
  
  
  	Kaptcha
  	/Kaptcha
  
  

3.添加验证码控件

接着我们需要在前端html页面里添加验证码控件，同时设置点击验证码更新的设置

        

          

            

              
验证码
              
              

                
              
            
          
        

对应的Javascript中

function changeVerifyCode(img) {
	img.src="../Kaptcha?" + Math.floor(Math.random()*100);
}

4.Javascript的编写

此部分的作用是接收前端的数据，并将其传输到后台中去

var verifyCodeActual = $('#j-kaptcha').val();
			if(!verifyCodeActual) {
				$.toast('请输入验证码');
				return;
			}
			formData.append('verifyCodeActual', verifyCodeActual);
			$.ajax({
				url: registerShopUrl,
				type: 'POST',
				data: formData,
				contentType: false,
				processData: false,
				cache: false,
				success: function(data) {
					if(data.success) {
						$.toast('提交成功！');
					}else {
						$.toast('提交失败！' + data.errMsg);
					}
					$('kaptcha-img').click();
				}
			});

5.后台的完善

@RequestMapping(value = "/registershop", method = RequestMethod.POST)
	@ResponseBody
	private Map registerShop(HttpServletRequest request) {
		Map modelMap = new HashMap();
		/*进行验证码比对，并将比对结果返回给前端*/
		if(!CodeUtil.checkVerifyCode(request)) {
			modelMap.put("success", false);
			modelMap.put("errMsg", "验证码错误");
			return modelMap;
		}

其中，考虑到验证码部分可能后面还会用到，故将其设置为公共类

public class CodeUtil {
	public static boolean checkVerifyCode(HttpServletRequest request) {
		String verifyCodeExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
		if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
			return false;
		}
		return true;
	}}

6.显示效果

7.遇到的问题

当然在开始引入kaptcha的jar包时，出现下载失败的情况，也就是如下情况

后来试了很多方法，最后发现在settings.xml的文件中增加镜像是一种比较好的方式，当时选择的是阿里云的Maven仓库镜像

    
    
      nexus-aliyun
      *
      Nexus aliyun
      http://maven.aliyun.com/nexus/content/groups/public