验证码的使用
- 前言
- 一、验证码jar包
- 二、谷歌验证码Kaptcha的使用
- 1.在web.xml文件中配置用于生成验证码的Serclet程序
- 2.在表单中使用img标签显示并使用
- 3.获取服务器验证码和客户端进行比较
- 4.切换验证码
- 总结
前言
在许多项目中都会涉及到登陆注册，而我们日常的注册除了用户名和密码，为了安全，验证码也是一项注册的判断前提，今天小编就总结总结验证码的使用。希望对大家有所帮助！
一、验证码jar包
我使用的是谷歌验证码，源码以及相应的方法和类都被封装成jar包，我们只需下载导入即可。
二、谷歌验证码Kaptcha的使用
1.在web.xml文件中配置用于生成验证码的Serclet程序
<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>
在Servlet程序中，KaptchaServlet是jar包中自带的SErvlet程序。所以我们不需要在src包中重写它。
2.在表单中使用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属性值就是KaptchaServlet程序的路径地址。
显示的图片如下：
3.获取服务器验证码和客户端进行比较
@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("请不要重复提交表单"); }}
通过动态获取服务器验证码，与客户端验证码进行比较。
4.切换验证码
完成了以上三步，验证码基本上已经完成了。但是还有一个小细节需要大家注意的，就是浏览器在访问同一个请求地址时，如果不刷新页面的话，那么服务器访问的都是同一个地址。
由于浏览器的缓存机制，所以会出现点击验证码就只能够刷新一次，而在实际情况下，我们是可以通过点击验证码页面刷新验证码的，而且是无限次的。所以下面我们要对验证码代码进行优化。
我们可以使用javaScript对验证码进行绑定一个单击事件。通过在请求地址后添加一个时间元素来使得每次验证码的刷新请求都不同，这样就可以解决上述问题。
javaScript代码如下:
// 给验证码的图片，绑定单击事件
$("#code_img").click(function () { // 在事件响应的 function 函数中有一个 this 对象。//这个 this 对象，是当前正在响应事件的 dom 对象// src 属性表示验证码 img 标签的 图片路径。它可读，可写// alert(this.src); this.src = "${basePath}kaptcha.jpg?d=" + new Date(); });
