kaptcha验证码组件使用简介解析

Kaptcha是一个基于SimpleCaptcha的验证码开源项目。

官网地址:http://code.google.com/p/kaptcha/

kaptcha的使用比较方便,只需添加jar包依赖之后简单地配置就可以使用了。kaptcha所有配置都可以通过web.xml来完成,如果你的项目中使用了Spring MVC,那么则有另外的一种方式来实现。

一、简单的jsp-servlet项目

1.添加jar包依赖

如果你使用maven来统一管理jar包,则在工程的pom.xml中添加dependency

<!-- kaptcha -->
<dependency>
  <groupId>com.google.code.kaptcha</groupId>
  <artifactId>kaptcha</artifactId>
  <version>2.3.2</version>
</dependency> 

如果是非maven管理的项目,则直接在官网下载kaptcha的jar包,然后添加到项目lib库中,下载地址:

http://code.google.com/p/kaptcha/downloads/list

2.配置web.xml

上面说了,kaptcha都是在web.xml中配置,我们必须在web.xml中配置kaptcha的servlet,具体如下:

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

其中servlet的url-pattern可以自定义。

kaptcha所有的参数都有默认的配置,如果我们不显示配置的话,会采取默认的配置。

如果要显示配置kaptcha,在配置kaptcha对应的Servlet时,在init-param增加响应的参数配置即可。示例如下:

<servlet>
  <servlet-name>Kaptcha</servlet-name>
  <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
  <init-param>
    <param-name>kaptcha.image.width</param-name>
    <param-value>200</param-value>
    <description>Width in pixels of the kaptcha image.</description>
  </init-param>
  <init-param>
    <param-name>kaptcha.image.height</param-name>
    <param-value>50</param-value>
    <description>Height in pixels of the kaptcha image.</description>
  </init-param>
  <init-param>
    <param-name>kaptcha.textproducer.char.length</param-name>
    <param-value>4</param-value>
    <description>The number of characters to display.</description>
  </init-param>
  <init-param>
    <param-name>kaptcha.noise.impl</param-name>
    <param-value>com.google.code.kaptcha.impl.NoNoise</param-value>
    <description>The noise producer.</description>
  </init-param>
</servlet> 

具体的配置参数参见:http://code.google.com/p/kaptcha/wiki/ConfigParameters

3.页面调用

<form action="submit.action">
  <input type="text" name="kaptcha" value="" /><img src="kaptcha.jpg" />
</form> 

4.在submit的action方法中进行验证码校验

//从session中取出servlet生成的验证码text值
String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
//获取用户页面输入的验证码
String kaptchaReceived = request.getParameter("kaptcha");
//校验验证码是否正确
if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)){
  setError("kaptcha", "Invalid validation code.");
} 

注:确保JDK设置了 -Djava.awt.headless=true

5.实现页面验证码刷新

<img src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清,点击换一张" />
<script type="text/javascript">
  $(function() {
    $('#kaptchaImage').click(function() {$(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100));});
  });
</script>
<br /><small>看不清,点击换一张</small> 

注:为了避免浏览器的缓存,可以在验证码请求url后添加随机数

二、Spring mvc项目中使用kaptcha

1.添加captchaProducer bean定义

<!-- 配置kaptcha验证码 -->
<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> 

2.生成验证码的Controller

import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
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;
/**
 * ClassName: CaptchaImageCreateController <br/>
 * Function: 生成验证码Controller. <br/>
 * date: 2013-12-10 上午11:37:42 <br/>
 *
 * @author chenzhou1025@126.com
 */
@Controller
public class CaptchaImageCreateController {
  private Producer captchaProducer = null;
  @Autowired
  public void setCaptchaProducer(Producer captchaProducer){
    this.captchaProducer = captchaProducer;
  }
  @RequestMapping("/kaptcha.jpg")
  public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{
    // Set to expire far in the past.
    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
    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;
  }
} 

3.校验用户输入的Controller

/**
 * ClassName: LoginController <br/>
 * Function: 登录Controller. <br/>
 * date: 2013-12-10 上午11:41:43 <br/>
 *
 * @author chenzhou1025@126.com
 */
@Controller
@RequestMapping("/login")
public class LoginController {
	/**
	 * loginCheck:ajax异步校验登录请求. <br/>
	 *
	 * @author chenzhou1025@126.com
	 * @param request
	 * @param username 用户名
	 * @param password 密码
	 * @param kaptchaReceived 验证码
	 * @return 校验结果
	 * @since 2013-12-10
	 */
	@RequestMapping(value = "check", method = RequestMethod.POST)
	@ResponseBody
	public String loginCheck(HttpServletRequest request,
			@RequestParam(value = "username", required = true) String username,
			@RequestParam(value = "password", required = true) String password,
			@RequestParam(value = "kaptcha", required = true) String kaptchaReceived){
		//用户输入的验证码的值
		String kaptchaExpected = (String) request.getSession().getAttribute(
				com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		//校验验证码是否正确
		if (kaptchaReceived == null || !kaptchaReceived.equals(kaptchaExpected)) {
			return "kaptcha_error";//返回验证码错误
		}
		//校验用户名密码
		// ……
		// ……
		return "success"; //校验通过返回成功
	}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • java实现短信验证码5分钟有效时间

    本文实例为大家分享了java实现短信验证码5分钟有效时间,供大家参考,具体内容如下 实现一个发送短信验证码的请求,要求5分钟之内重复请求,返回同一个验证码. 网上可找到几种方案: 如,存储数据库或缓存中.实现起来比较麻烦,舍弃: 另一种方式即本例,使用session存储.其他方式,暂未进一步了解. 实现步骤: (springmvc) 1.controller中,获取session对象,取code,取不到新生成,并存储session中: 2.单手机号发送量,判断并 +1 记入数据库: 3.Time

  • Java实现滑动验证码的示例代码

    最近滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低.当然到目前为止,没有绝对的安全验证,只是不断增加攻击者的绕过成本. 接下来分析下滑动验证码的核心流程: 后端随机生成抠图和带有抠图阴影的背景图片,后台保存随机抠图位置坐标 前端实现滑动交互,将抠图拼在抠图阴影之上,获取到用户滑动距离值,比如以下示例 前端将用户滑动距离值传入后端,后端校验误差是否在容许范围内. 这里单纯校验用户滑动距离是最基本的校验,出于更高的安全考

  • java下使用kaptcha生成验证码

    kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等.下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验. 一.搭建测试环境 1.1.创建Web测试项目 新建一个Web项目,并将kaptcha-2.3.2.jar放在项目的WEB-INF/lib目录下,如下图所示: 1.2.在web.xml文件配置生成验证码的KaptchaServlet KaptchaServlet的详细配置如下: <?xml version="1

  • java验证码组件kaptcha使用方法

    使用方法: 项目中导入kaptcha-2.3.jar包在web.xml里面新增:  复制代码 代码如下: <!-- 登陆验证码Kaptcha -->    <servlet>        <servlet-name>Kaptcha</servlet-name>        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>   

  • Java发送邮箱验证码、session校验功能

    本篇主要描述"发送邮箱验证码.session校验"相关前(html\js)后(java)台代码,业务逻辑示例,闲话少诉,直接上代码. 1.引入的jar包是mail-1.4.jar 2.java底层发送邮箱方法 public boolean sendEMail(Map<String, Object> map) { log.info("電子郵件接口執行開始!"); String from = Cache.getInstance().getParamsCons

  • javaWeb使用Kaptcha组件生成验证码

    javaWeb之使用Kaptcha组件使用验证码 web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="htt

  • JAVA实现利用第三方平台发送短信验证码

    前段时间自己做的一个小项目中,涉及到用短信验证码登录.注册的问题,之前没涉及过这一块,看了别人的博客其实也是似懂非懂的,现在就将自己做的利用第三方短信平台来发送验证码这个功能记下来. 本文以注册为例,在SpringMVC+Spring+Mybatis框架的基础上完成该短信验证码功能. 发送短信验证码的原理是:随机生成一个6位数字,将该6位数字保存到session当中,客户端通过sessionid判断对应的session,用户输入的验证码再与session记录的验证码进行比较. 为了防止有广告嫌疑

  • kaptcha验证码组件使用简介解析

    Kaptcha是一个基于SimpleCaptcha的验证码开源项目. 官网地址:http://code.google.com/p/kaptcha/ kaptcha的使用比较方便,只需添加jar包依赖之后简单地配置就可以使用了.kaptcha所有配置都可以通过web.xml来完成,如果你的项目中使用了Spring MVC,那么则有另外的一种方式来实现. 一.简单的jsp-servlet项目 1.添加jar包依赖 如果你使用maven来统一管理jar包,则在工程的pom.xml中添加dependen

  • spring整合kaptcha验证码的实现

    kaptcha简介: kaptcha是一个很有用的验证码生成工具,由于它有许多可配置项,所以用它可以简单快捷的生成各式各样的验证码. 开发工具及使用的核心技术: 1.eclipse 2.mybatis 3.spring 4.springmvc 5.kaptcha 本文将介绍kaptcha两种使用方式: 方式一:在 spring-kaptcha.xml 中配置 方式二:在 web.xml 中配置 正式开始: 一.搭骨架 1.添加依赖: <!-- 验证码 --> <dependency>

  • springboot整合kaptcha验证码的示例代码

    前言: 关于kaptcha简介以及spring整合kaptcha,我在另一篇文章中已详细讲解,请参考:spring整合kaptcha验证码. 本文将介绍springboot整合kaptcha的两种方式. 开发工具及技术: 1.idea 2017 2.springboot 2.0.2 3.kaptcha 正式开始: 方式一:通过kaptcha.xml配置 1.用idea新建一个spring Initializr 2.添加kaptcha的依赖: <!-- kaptcha验证码 --> <de

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • kaptcha验证码使用方法详解

    本文为大家分享了kaptcha验证码的使用方法,供大家参考,具体内容如下 1.首先在pom.xml文件中导入Maven依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency> 2.在web.xml文件中配置一个servl

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    做成之后就 是这个样子 接下来上代码 创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • 基于vue的验证码组件的示例代码

    最近在自己写页面,模仿思否论坛,然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的,而且大多都是基于后端的,于是自己手写一个. 演示 分析验证码组件 分析验证码功能 随机出现的数字大小写字母 (基础功能) 不同的数字或者字母有不同的颜色 (功能优化) 不同的数字或者字母有不同的字体大写 (功能优化) 不同的数字或者字母有不同的边距 (功能优化) 不同的数字或者字母有不同的倾斜角度 (功能优化) 更多功能优化... 分析组件功能 可以设置生成验证码的长度 (基本功能) 可以设置

  • SpringBoot集成kaptcha验证码

    本文实例为大家分享了SpringBoot集成kaptcha验证码的具体代码,供大家参考,具体内容如下 1.kaptcha相关介绍 Kaptcha是一个基于SimpleCaptcha的验证码开源项目. 2.集成方案 ①pom.xml中配置依赖 <!-- 验证码--> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> &l

  • vue随机验证码组件的封装实现

    本文实例为大家分享了vue随机验证码组件的具体代码,供大家参考,具体内容如下 由于工作需要自己做了一个验证码组件,灵活性不高,但是可以用,代码也不太复杂 <template> <div style="display: flex;justify-content: start;align-items: center;border-radius: 4px"> <canvas style="" :width="contentWidth

随机推荐