4-12 **引入kaptcha实现验证码

一、前端编写

1、进入网址，引入依赖

https://mvnrepository.com/artifact/com.github.penggle/kaptcha/2.3.2

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

2、在web.xml 编写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>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中编写验证码

红框中的名字是web.xml中servlet的名字

4、编写changeVerifyCode()方法

由于验证码功能有很多地方可能用到，所以单独写一个JS

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

5、在HTML中引入common.js

<script type="text/javascript" src='../resources/js/common/common.js' charset="utf-8"></script>

6、shopoperation.js中编写

点击提交后更换验证码,通过click 调用changeVerifyCode()方法

---

二、后端验证输入验证码是否正确

1、在util包下编写工具类

/**
 * 判断验证码是否符合预期
 * @author shawn
 *
 */
public class CodeUtil {
	public static boolean checkVerifyCode(HttpServletRequest request) {
		//实际的验证码
		String verifyCodeExcepted = (String)request.getSession().getAttribute(
				com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		//输入的验证码
		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
		if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExcepted)) {
			return false;
		}
		return true;
	}
}

2、在ShopManagementController引入验证码工具类

3、通过modelMap传到前端

扫描二维码关注公众号，回复： 6025724 查看本文章