谷歌kaptcha图片验证码

谷歌kaptcha图片验证码的使用

1.导入jar包

<dependency>
    <groupId>com.github.pengglegroupId>
    <artifactId>kaptchaartifactId>
    <version>2.3.2version>
dependency>

2.在web.xml文件中去配置生成验证码的Servlet程序

  <servlet>
    <servlet-name>kapthchaservlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServletservlet-class>
  servlet>
  <servlet-mapping>
    <servlet-name>kapthchaservlet-name>
    <url-pattern>/kapthcha.jpgurl-pattern>
  servlet-mapping>

3.在表单中使用img图片显示验证码

<form action="/01_servlet_war/htmlServlet" method="get">
    用户名：<input type="text" name="username" value="${cookie.username.value}"> <br>
    验证码：<input type="text" name="code" style="width: 100px;">
    <img src="/01_servlet_war/kapthcha.jpg" style="width: 100px; height: 30px;"><br>
    <input type="submit" value="登录">
form>

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

步骤一：获取Session中的验证码
步骤二：删除session中的验证码
步骤三：获取我们输入的值
步骤四：比较判断

import static com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY;
...
    @Override
    protected void service(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");
        // 我们输入的验证码
        if (token.equals(code)) {
            System.out.println("登录成功");
        } else {
            System.out.println("登录失败");
        }
    }

5.点击验证码切换图片

使用jquery的click事件来完成此功能

    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script>
        $(function() {
            $("#code_img").click(function (){
                 this.src="/01_servlet_war/kapthcha.jpg?d="+new Date();
            });
        })
    </script>

为啥后面要加个d呢?