SSM开发笔记4-3验证码

最新推荐文章于 2024-08-31 16:31:32 发布

Kasey_L

最新推荐文章于 2024-08-31 16:31:32 发布

阅读量222

点赞数

CC 4.0 BY-SA版权

文章标签： java

本文链接：https://blog.csdn.net/Kasey_L/article/details/105081258

本文详细介绍如何使用Kaptcha工具类生成图片验证码，包括引入依赖、配置参数、前端展示及后端验证流程，以及如何处理文件上传问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

验证码：图片的形式，这样不可进行复制，可做到防呆

一、引入kaptcha工具类

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

二、定义kaptcha及其映射（web.xml）

<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>ACDEFHKPRSTWX345679</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>

三、引用

// src就指向了web.xml中servlet-name
<div class="item-content">
	<div>
		<div>验证码</div>
		<input id="j_captcha" placeholder="验证码">
		<div >
			<img id="captcha_img" alt="点击更换" title="点击更换"
				onclick="changeVerifyCode(this)" src="../Kaptcha" />
		</div>
	</div>
</div>

四、点击更换的方法

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

每次刷新页面自动更换验证码,给img定义一个ID，$(’#captcha_img’).click();

五、验证验证码是否填写正确

1、前端将验证码传入后台

// 获取表单里输入的验证码
var verifyCodeActual = $('#j_captcha').val();
if (!verifyCodeActual) {
	$.toast('请输入验证码！');
	return;
}
formData.append('verifyCodeActual', verifyCodeActual);

2、获取验证码图片中的内容及用户输入的内容

package com.imooc.o2o.util;

import javax.servlet.http.HttpServletRequest;

public class CodeUtil {
	/**
	 * 检查验证码是否和预期相符
	 * 
	 * @param request
	 * @return
	 */
	public static boolean checkVerifyCode(HttpServletRequest request) {
	    // 图片中验证码，从会话中获取
		String verifyCodeExpected = (String) request.getSession()
				.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		// 输入的验证码	verifyCodeActual前端传值的名称对应	
		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
		if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
			return false;
		}
		return true;
	}
}

3、需要用到验证码的地方进行引用

if (!CodeUtil.checkVerifyCode(request)) {
	modelMap.put("success", false);
	modelMap.put("errMsg", "输入了错误的验证码");
	return modelMap;
}

六、当发现上传的内容并没有被接收的情况，需要检查一下spring-web.xml中配置是否配置了文件上传解析器

1、commons-fileupload对应的jar要引入

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.2</version>
</dependency>

2、文件上传解析器

<!-- 文件上传解析器 -->
<bean id="multipartResolver"
	class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<property name="defaultEncoding" value="utf-8"></property>
	<!-- 1024 * 1024 * 20 = 20M -->
	<property name="maxUploadSize" value="20971520"></property>
	<property name="maxInMemorySize" value="20971520"></property>
</bean>