利用Kaptcha实现验证码的功能

Myth丶恋晨 2022-03-01 16:36 200阅读 0赞

### kaptcha实现验证码的原理：kaptcha工作的原理是调用com.google.code.kaptcha.servlet.KaptchaServlet，生成一个图片。同时将生成的验证码字符串放到 HttpSession中，具体的实现步骤如下： ###

*   *  1.导入kaptcha相关的jar包，maven项目的话在pom.xml文件中添加一下配置：
     *  2.在web.xml文件中配置验证码的样式以及URL映射：
     *  3.在前端页面中显示验证码：
     *  4.完善changeVerifyCode（this）js的函数实现点击更换验证码的功能：
     *  完成上述代码后已经可以在前端页面中看到后台所发送过去的验证码，但还无法判断该验证码与用户所输入的是否一致：
     *  5.编写JS获得用户在文本框中所输入的验证码并以JSON形式发送到后台：
     *  ６.在后台判断两验证码是否一致：
     *  以上便是利用kaptcha实现验证码的完整步骤

## 1.导入kaptcha相关的jar包，maven项目的话在pom.xml文件中添加一下配置： ##

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

## 2.在web.xml文件中配置验证码的样式以及URL映射： ##

<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.在前端页面中显示验证码： ##

<li>
    							<div class="item-content">
    								<div class="item-media">
    									<i class="icon icon-form-email"></i>
    								</div>
    								<div class="item-inner">
    									<label for="j_captcha" class="item-title label">验证码</label> <input
    										id="j_captcha" name="j_captcha" type="text"
    										class="form-control in" placeholder="验证码" />
    									<div class="item-input">
    										<img id="captcha_img" alt="点击更换" title="点击更换"
    											onclick="changeVerifyCode(this)" src="../Kaptcha" />
    									</div>
    								</div>
    							</div>
    						</li>

## 4.完善changeVerifyCode（this）js的函数实现点击更换验证码的功能： ##

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

## 完成上述代码后已经可以在前端页面中看到后台所发送过去的验证码，但还无法判断该验证码与用户所输入的是否一致： ##

## 5.编写JS获得用户在文本框中所输入的验证码并以JSON形式发送到后台： ##

## ６.在后台判断两验证码是否一致： ##

public static boolean checkVerifyCode(HttpServletRequest request) {
            // 从HttpSession中获得后台所生成的验证码
            String verifyCodeExpected = (String) request.getSession().getAttribute(
                    com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
            // 获得用户输入的验证码
            String verifyCodeActual = HttpServletRequestUtil.getString(request,
                    "verifyCodeActual");
            if (verifyCodeActual == null
                    || !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) {
                return false;
            }
            return true;
        }
    
    /**
         * @Title: getString   
         * @Description: 从request域中获取指定的Key的值并转换成字符串形式
         * @param: @param request
         * @param: @param key
         * @param: @return      
         * @return: String      
         * @throws
         */
        public static String getString(HttpServletRequest request, String key) {
            try {
                String result = request.getParameter(key);
                if (result != null) {
                    // 去掉左右两则的空格
                    result = result.trim();
                }
                /*判断result是否为空，一般将result写在equals后面，"" 写在前面，
                                         否则result为空的话将会报错*/
                if ("".equals(result))
                    result = null;
                return result;
            } catch (Exception e) {
                return null;
            }
    
        }

## 以上便是利用kaptcha实现验证码的完整步骤 ##