谷歌kaptcha图片验证码

谷歌kaptcha图片验证码的使用

1.导入jar包

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha --> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>

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

<servlet> <servlet-name>kapthcha</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>kapthcha</servlet-name> <url-pattern>/kapthcha.jpg</url-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呢?