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

验证码Kaptcha的使用「建议收藏」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.显示效果

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

7.遇到的问题

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

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

后来试了很多方法,最后发现在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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150379.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号