ssm中使用kaptcha验证码

最新推荐文章于 2022-11-06 16:16:25 发布

上对下心

最新推荐文章于 2022-11-06 16:16:25 发布

阅读量991

点赞数 2

文章标签： ssm kaptcha验证码

本文链接：https://blog.csdn.net/qq_41921914/article/details/89737300

版权

ssm中使用kaptcha验证码

1.引入依赖

 <!-- 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>
        <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.前端使用

项目目录结构

$C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1556680801105.png$

jsp页面编写

<html>
<body>

<input type="text" placeholder="code">
<div>
    <img alt="点击更换" title="点击更换"
         onclick="changeVerifyCode(this)" src="/Kaptcha"/>
</div>
</body>


<script type="text/javascript">
    function changeVerifyCode(img) {
        img.src = "/Kaptcha?" + Math.floor(Math.random() * 100);
    }
</script>
</html>

注意img标签中的src 要对应web.xml中配置的Kaptcha的 Kaptcha，而且路径不要错了

同样的js代码中的src也不要错了，当然src根据自己的项目来定。

4.后台验证

1.获取input的框输入的字符，然后通过ajax传到后台处理

2.后台对输入的验证码和实际的验证码做个比较，如果一致，则返回success，否则，返回false 给前台。

jsp页面

<%@ page contentType="text/html; charset=UTF-8"  %>
<html>
<body>
<form >
    <div>
<input id="j_captcha"  type="text" placeholder="code">
    </div>
<div>
    <img  id="captcha_img" alt="点击更换" title="点击更换"
         οnclick="changeVerifyCode(this)" src="/Kaptcha"/>
</div>
    <div>
        <a href="#" id="submit" οnclick="submitForm()" >SUBMIT</a>
    </div>
</form>
</body>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    function changeVerifyCode(img) {
        img.src = "/Kaptcha?" + Math.floor(Math.random() * 100);
    }

  function submitForm() {
      var formData=new FormData;
      var verifyCodeActual = $('#j_captcha').val();
      if (!verifyCodeActual) {
          alert('请输入验证码！');
          return;
      }
      formData.append('verifyCodeActual', verifyCodeActual);
      $.ajax({
          url:'/index/Kaptcha',
          type:'POST',
          data:formData,
          contentType:false,
          processData:false,
          cache:false,
          success:function (data) {
              if(data.success){
                  alert('SUCCESS!');
              }else {
                  alert('ERROR！'+data.errMsg);
              }
              // 点击验证码图片的时候，注册码会改变
              $('#captcha_img').click();
          }
      });
  }


</script>
</html>

controller

@Controller
@RequestMapping(value = "/index")
public class indexTest {

    @RequestMapping(value = "/Kaptcha",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> Kaptchatest(HttpServletRequest request){
        Map<String,Object> modelMap=new HashMap<String, Object>();
        if (!CodeUtil.checkVerifyCode(request)) {
            modelMap.put("success", false);
            modelMap.put("errMsg", "输入了错误的验证码");
            return modelMap;
        }else {
            modelMap.put("success", true);
            return modelMap;
        }

    }
}

CodeUtil工具类

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;
	}
}

上对下心

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
ssm中使用kaptcha验证码

ssm中使用kaptcha验证码1.引入依赖  <dependency> <groupId>com.github.penggle</groupId> <artifactI...
复制链接

扫一扫