java下使用kaptcha生成验证码

程序员文章站 2024-03-07 22:33:45

kaptcha是一个简单好用的验证码生成工具，通过配置，可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码...

kaptcha是一个简单好用的验证码生成工具，通过配置，可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验。

一、搭建测试环境

1.1、创建web测试项目

　　新建一个web项目，并将kaptcha-2.3.2.jar放在项目的web-inf/lib目录下，如下图所示：

　　 java下使用kaptcha生成验证码

1.2、在web.xml文件配置生成验证码的kaptchaservlet

kaptchaservlet的详细配置如下：

<?xml version="1.0" encoding="utf-8"?>
<web-app version="2.5" 
 xmlns="http://java.sun.com/xml/ns/javaee" 
 xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" 
 xsi:schemalocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <welcome-file-list>
 <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 
 <!-- kaptcha验证码配置 -->
 <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>
 <!-- 映射的url -->
 <servlet-mapping>
 <servlet-name>kaptcha</servlet-name>
 <url-pattern>/kaptcha.jpg</url-pattern>
 </servlet-mapping>
</web-app>

1.3、显示生成的验证码

在页面index.jsp显示验证码

<%@ page language="java" pageencoding="utf-8"%>
<!doctype html>
<html>
 <head>
 <title>显示kaptchaservlet生成的验证码</title>
 <script type="text/javascript" src="${pagecontext.request.contextpath}/js/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 //点击切换验证码
 function changeverifycode(){
 $("#yzmimg").attr("src","kaptcha.jpg?"+math.floor(math.random()*100));
 }
 
 //提交
 function dosubmit() {
 var verifycodevalue = $("#verifycode").val();
 if(verifycodevalue.replace(/\s/g,"") == "") {
 alert("请输入验证码");
 }else {
 //提交前先异步检查验证码是否输入正确
 var verifyurl = "${pagecontext.request.contextpath}/servlet/verifyservlet?verifycode="+verifycodevalue;
 $.ajax({
  type:"get",
  url:verifyurl,
  success:function(returndata){
  if(returndata!="y") {
  alert("请输入正确的验证码！");
  }else {
  //验证码正确，进行提交操作
  alert("验证码输入正确，提交表单");
  }
  },
  error:function(e){
  alert(e);
  }
 });
 }
 }
 </script>
 </head>
 
 <body>
 <form>
 <table>
 <tr>
 <td> 
  请输入验证码：
 </td>
 <td>
  <input type="text" name="verifycode" id="verifycode">
  <img src="kaptcha.jpg" onclick="changeverifycode()" id="yzmimg" style="cursor: pointer;">
  <a href="javascript:void(0)" onclick="changeverifycode()">看不清，换一张</a>
 </td>
 </tr>
 <tr>
 <td> 
   
 </td>
 <td>
  <input type="button" value="提交" onclick="dosubmit()">
 </td>
 </tr>
 </table>
 </form> 
 </body>
</html>

运行效果如下图所示：

　　 java下使用kaptcha生成验证码

1.4、在服务器端验证提交的验证码

　　用户在form表单中提交了验证码之后，我们会在服务器端进行验证，编写一个verifyservlet，代码如下：

/**
 * 
 */
package me.gacl.web.controller;

import java.io.ioexception;
import java.io.printwriter;

import javax.servlet.servletexception;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;

public class verifyservlet extends httpservlet {

 
 public void doget(httpservletrequest request, httpservletresponse response)
 throws servletexception, ioexception {

 response.setcontenttype("text/html;charaset=utf-8");
 response.setheader("pragma", "no-cache");
 response.setheader("cache-control", "no-cache");
 printwriter out = null;
 try {
 //响应数据
 string resultdata;
 //获取传过来的验证码
 string verifycode = request.getparameter("verifycode");
 system.out.println("verifycode----"+verifycode);
 if(verifycode=="") {
 resultdata = "n";
 }else {
 //获取kaptcha生成存放在session中的验证码
 string kaptchavalue = (string) request.getsession().getattribute(com.google.code.kaptcha.constants.kaptcha_session_key);
 //比较输入的验证码和实际生成的验证码是否相同
 if(kaptchavalue == null || kaptchavalue == ""||!verifycode.equalsignorecase(kaptchavalue)) {
  resultdata = "n";
 }else {
  resultdata = "y";
 }
 }
 out = response.getwriter();
 out.write(resultdata);
 out.flush();
 }catch(exception e) {
 e.printstacktrace();
 }finally {
 if(out != null) {
 out.close();
 }
 }
 }
}

在web.xml中注册verifyservlet

<!-- 检查验证码是否输入正确 -->
 <servlet>
 <servlet-name>verifyservlet</servlet-name>
 <servlet-class>me.gacl.web.controller.verifyservlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>verifyservlet</servlet-name>
 <url-pattern>/servlet/verifyservlet</url-pattern>
 </servlet-mapping>

　　运行结果如下：

　　1、验证码不输入

java下使用kaptcha生成验证码