验证码Kaptcha的使用「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

引言

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)
	@ResponseBody
	private 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>