谷歌图片验证码的使用图文详解附源码

谷歌kaptcha图片验证码的使用

一、演示素材的准备

二、详细演示

1. 打开Eclipse，新建一个动态web工程，我的基本上都是默认设置，没有改；

2. 将kaptcha-2.3.2.jar拷贝到刚刚创建的web工程下的lib目录下；

3. web.xml配置文件中去配置生成验证码的Servlet访问地址；

4. 谷歌kaptcha有一些参数配置，参考aptcha详细参数说明文档，可以做更多的配置；

例如：配置验证码图片是否有边框，限定验证码内容的取值、长度等，很多。

在web.xml中的配置示例如下：

5. 编写一个jsp测试页面，例如index.jsp

这里的form里面的action值是：LoginServlet，也就是我们接下来要编写的处理请求的Servelt的访问路径；

Img标签里面src的值是：kaptcha.jpg，也就是我们在 web.xml里面配置的KaptchaServlet那个地方的访问路径。

6. 编写一个Servlet程序处理验证码；

在src目录下新建一个 包，然后创建一个Servlet，继承自HttpServlet，目录如下：

在这个LoginServlet.java文件中，写核心的处理代码，其实，也非常简单，我们编写doPost()方法为例吧！

doPost()方法是重写HttpServlet的doPost()方法，里面添加我们自己的业务代码。

下面的代码示例，是做准备工作，获取用户提交过来的相关参数，已经处理中文乱码问题。

接下来就是关于验证码的一些代码，Kaptcha会把产生的验证码放到session，通过一个常量命名。

7. 测试

将工程运行到服务器上面    右键工程名 ---> Run As  --->  Run on Server

因为web.xml里面默认的配置欢迎页面有index.jsp，所以我们运行后会在浏览器中看到如下效果：

此时验证码已经使用成功了，输入正确的验证码，会验证通过；输入错误的验证码，则验证通不过。

8. 改进

有几个地方需要注意：

(1) . 防止用户重复提交，我们需要在服务器端代码里面，获取session里面存放的验证码内容之后，删除session里面的验证码。前面的代码示例里面已经写过，这里强调一下。

(2) . 中文乱码问题。

主要是设置request和response来解决。也就是针对请求的乱码进行解决，针对响应的乱码进行解决，上面的代码中也是写过。强调一点，代码写在处理数据之前。

(3) . 点击图片验证码刷新

这时候，我们用到jQuery，所以，引入jQuery库，我们新建一个js文件夹到WebContent目录下，在这个js文件夹里面存放我们的js文件。

在我们编写的index.jsp页面中先导入jQuery文件，然后，添加点击验证码图片的响应事件，达到刷新验证码的效果。代码如下：

至此，我们的整个验证码的使用就成功了，整个示例的目录结构如下：