如何使用谷歌验证码 kaptcha，详细使用步骤

一、谷歌验证码 kaptcha 使用步骤如下：

1、导入谷歌验证码的 jar 包 kaptcha-2.3.2.jar

        需要 kaptcha-2.3.2.jar的朋友可以查看我上传的资源领取，或者留言

2、在 web.xml 中去配置用于生成验证码的 Servlet 程序

<servlet>
    <servlet-name>KaptchaServlet</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> </servlet>

<servlet-mapping> 
    <servlet-name>KaptchaServlet</servlet-name> 
    <url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>

3、在表单中使用 img 标签去显示验证码图片并使用它
 

<form action="http://localhost:8080/tmp/registServlet" method="get"> 
用户名：<input type="text" name="username" > <br>
验证码：<input type="text" style="width: 80px;" name="code"> <img src="http://localhost:8080/tmp/kaptcha.jpg" alt="" style="width: 100px; height: 28px;"> <br> 
<input type="submit" value="登录"> </form>

主要就是这句话：

<img src="http://localhost:8080/tmp/kaptcha.jpg" alt="" style="width: 100px; height: 28px;"> 

4、在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用。

@Override 
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获 取 Session 中 的 验 证 码 String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
 // 删 除 Session 中 的 验 证 码 req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);
String code = req.getParameter("code");
 // 获 取 用 户 名 
String username = req.getParameter("username");
if (token != null && token.equalsIgnoreCase(code)) {
 System.out.println("保存到数据库：" + username);
 resp.sendRedirect(req.getContextPath() + "/ok.jsp");
 } else {
 System.out.println("请不要重复提交表单");
}
}

5、通过前面的设置我们基本上可以使用验证码了，但是出现一个问题，就是点击验证码的图片无法刷新，需要我们点击浏览器的刷新按钮，才能切换验证码。

对于这种情况，我们需要给验证码的标签添加点击事件。

//给 验 证 码 的 图 片 ， 绑 定 单 击 事 件 
$("#code_img").click(function () { 
// 在 事 件 响 应 的 function 函 数 中 有 一 个 this对 象 。 这 个 this对 象 ， 是 当 前 正 在 响 应 事 件 的 dom对 象
// src属 性 表 示 验 证 码 img标 签 的 图 片 路 径 。 它 可 读 ， 可 写
this.src = "${basePath}kaptcha.jpg?d=" + new Date(); 
});

tips：

// src属 性 表 示 验 证 码 img标 签 的 图 片 路 径 。 它 可 读 ， 可 写
你可以使用：alert(this.src);   查看一下src到底是什么

如果你还有什么不清楚的地方，欢迎留言。