kaptcha验证码插件的使用

简介: kaptcha验证码插件的使用

在SpringMVC的HelloWorld基础下,加入jar


11.png


修改web.xml,添加一个servlet


    <!-- kaptcha -->
  <servlet>
    <servlet-name>Kaptcha</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Kaptcha</servlet-name>
    <url-pattern>/kaptcha.jpg</url-pattern>
  </servlet-mapping>
kaptcha.jpg</url-pattern>
  </servlet-mapping>


在ioc容器中加入验证码的Bean


   <!-- 验证码的Bean -->
  <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
    <property name="config">
      <bean class="com.google.code.kaptcha.util.Config">
        <constructor-arg type="java.util.Properties">
          <props>
            <prop key="kaptcha.image.width">100</prop>
            <prop key="kaptcha.image.height">50</prop>
            <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>
            <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop>
            <prop key="kaptcha.textproducer.char.length">4</prop>
          </props>
        </constructor-arg>
      </bean>
    </property>
  </bean>


编写Controller,注意:把上面加入的Bean注入到controller中


package controller;
import org.springframework.stereotype.Controller;
import java.awt.image.BufferedImage;  
import javax.imageio.ImageIO;  
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.servlet.ModelAndView;  
import com.google.code.kaptcha.Constants;  
import com.google.code.kaptcha.Producer;
@Controller
public class YanZhengMaController {
  @Autowired  
  private Producer captchaProducer;
  //提交表单后验证的逻辑过程
  @RequestMapping("/kaptcha.action")
  public String kaptchaSuccess(String checkCode,HttpServletRequest request){
    //从前台获得验证码框中的数据
    String username=checkCode;
    //从session中获得正确的验证码的值
    String str = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
    //比较是否相同(相同怎么样,不相同怎么样,我这只是简单的输出,相不相同都跳转的succees.jsp中)
    System.out.println(username+"---------"+str);
    return "success";
  }
   //生成验证码的handler
   @RequestMapping("/kaptcha.jpg")  
   //这个requestMapping中的值应该和web.xml中servlet中拦截的url相同,和jsp中表单中显示验证码图片的src相同
      public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {  
          response.setDateHeader("Expires", 0);  
          // Set standard HTTP/1.1 no-cache headers.  
          response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");  
          // Set IE extended HTTP/1.1 no-cache headers (use addHeader).  
          response.addHeader("Cache-Control", "post-check=0, pre-check=0");  
          // Set standard HTTP/1.0 no-cache header.  
          response.setHeader("Pragma", "no-cache");  
          // return a jpeg  
          response.setContentType("image/jpeg");  
          // create the text for the image  
          String capText = captchaProducer.createText();  
          // store the text in the session ,把验证码的值存在session中
          request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);  
          // create the image with the text  
          BufferedImage bi = captchaProducer.createImage(capText);  
          ServletOutputStream out = response.getOutputStream();  
          // write the data out  
          ImageIO.write(bi, "jpg", out);  
          try {  
              out.flush();  
          } finally {  
              out.close();  
          }  
          return null;  
      }  
  /**
   * @return the captchaProducer
   */
  public Producer getCaptchaProducer() {
    return captchaProducer;
  }
  /**
   * @param captchaProducer the captchaProducer to set
   */
  public void setCaptchaProducer(Producer captchaProducer) {
    this.captchaProducer = captchaProducer;
  }
}


编写index.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){//页面一加载后执行的函数
  //给刷新按钮绑定事件,url后面加个参数防止缓存
    $('#kaptchaImage').click(function () {
        $("#kaptcha").attr('src', 'kaptcha.jpg?' + Math.floor(Math.random()*100) );
    })
});
</script>
</head>
<body>
  <form action="kaptcha.action" method="post">
    <input type="text" name="checkCode">
    <img src="kaptcha.jpg" id="kaptcha">
    <input type="button"  id="kaptchaImage"  value="刷新">
    <input type="submit" value="提交">
</form>
</body>
</html>


结果


12.png


13.png

目录
相关文章
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
95 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
11月前
|
JavaScript
|
前端开发
CheckCode.js 前端验证码插件
CheckCode.js 前端验证码插件
403 0
CheckCode.js 前端验证码插件
|
前端开发 数据可视化 JavaScript
从零开发一款轻量级滑动验证码插件
之前一直在分享 低代码 和 可视化 的文章,其中涉及到很多有意思的知识点和设计思想,今天继续和大家分享一款非常有趣且实用的前端实战项目——从零基于 react + canvas 实现一个滑动验证码,并将其发布到 npm 上供他人使用。当然如果大家更喜欢 vue 的开发方式,也不用担心,文中的设计思想和思路都是通用的,如果大家想学习如何封装 vue 组件并发布到 npm 上,也可以参考我之前的文章: 从零到一教你基于vue开发一个组件库。
723 0
|
前端开发 JavaScript
jQuery验证码插件 Ajax Fancy Capcha
http://www.oschina.net/p/ajax+fancy+capcha
716 0
|
3月前
|
存储 NoSQL 数据库
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
这篇文章讲述了在分布式微服务系统中添加用户注册和登录功能的过程,重点介绍了用户注册时通过远程服务调用第三方服务获取短信验证码、使用Redis进行验证码校验、对密码进行MD5加密后存储到数据库,以及用户登录时的远程服务调用和密码匹配校验的实现细节。
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
|
1月前
|
Java
Java 登录输入的验证码
Java 登录输入的验证码
26 1
|
1月前
|
C#
C# 图形验证码实现登录校验代码
C# 图形验证码实现登录校验代码
76 2