java项目实战之验证码kaptcha的使用

古城微笑少年丶 2023-05-22 08:46 3阅读 0赞

（1）在maven的配置文件pom.xml中添加依赖

<dependency>
        	<groupId>com.github.penggle</groupId>
    	<artifactId>kaptcha</artifactId>
    	<version>2.3.2</version>
    </dependency>

（2）在web的配置文件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>

（3）html中的写法

（4）点击更换验证码的实现changeVerifyCode(this)

在js中写入

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

（5）将获取到的验证码传入到后台，首先通过标签id获取值，然后将这个值封装到formData中，传入到后台

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

（6）在后端写一个工具类，看输入的验证码是否正确

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);
    		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
    		if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
    			return false;
    		}
    		return true;
    	}
    }

（7）工具类的使用

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

（8）现在出现一个问题就是验证码错误，需要在引入一些流和文件上传的类库

在pom.xml中加入

Pom.xml
    	<dependency>
    		<groupId>commons-fileupload</groupId>
    		<artifactId>commons-fileupload</artifactId>
    		<version>1.3.2</version>
    	</dependency>

在web.xml中加入