谷歌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呢?