引言

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

1.引入Maven依赖

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency> 

2.编写Servlet

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

<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.color</param-name><param-value>red</param-value></init-param><!-- 图片宽度 --><init-param><param-name>kaptcha.image.width</param-name><param-value>135</param-value></init-param><!-- 使用哪些字符生成验证码 --><init-param><param-name>kaptcha.textproducer.char.string</param-name><param-value>ACDEFHKPRSTWX345678</param-value></init-param><!-- 图片高度 --><init-param><param-name>kaptcha.image.height</param-name><param-value>50</param-value></init-param><!-- 字体大小 --><init-param><param-name>kaptcha.textproducer.font.size</param-name><param-value>43</param-value></init-param><!-- 干扰线的颜色 --><init-param><param-name>kaptcha.noise.color</param-name><param-value>black</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.textproducer.font.names</param-name><param-value>Arial</param-value></init-param></servlet><servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/Kaptcha</url-pattern></servlet-mapping><servlet>

3.添加验证码控件

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

<!-- 验证码（避免重复提交） kaptcha --><li><div class="item-content"><div class="item-inner"><div class="item-title label">验证码</div><input type="text" id="j-kaptcha" placeholder="验证码"><div class="item-input"><img id="kaptcha-img" alt="点击更换" title="点击更换"οnclick="changeVerifyCode(this)" src="../Kaptcha" /></div></div></div></li>

对应的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)@ResponseBodyprivate Map<String, Object> registerShop(HttpServletRequest request) {Map<String, Object> modelMap = new HashMap<String, Object>();/*进行验证码比对，并将比对结果返回给前端*/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仓库镜像

<mirrors><!-- mirror| Specifies a repository mirror site to use instead of a given repository. The repository that| this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used| for inheritance and direct lookup purposes, and must be unique across the set of mirrors.|--><mirror><id>nexus-aliyun</id><mirrorOf>*</mirrorOf><name>Nexus aliyun</name><url>http://maven.aliyun.com/nexus/content/groups/public</url></mirror></mirrors>