Kaptcha 是google以前维护的一个开源的验证码生成工具类库,后来google公司放弃了,现在用的 Kaptcha 版本都是由 GitHub上进行维护的版本了。虽然由GitHub托管了,但是可以看到里面的很多的包结构都是有google的。
虽说现在前端完成的功能越来越全面了,有很多不同类型的机器验证,但是作为一个后端开发还是有必要学一学如何使用Servlet 生成 验证码。
1. 使用Maven 导入需要的jar包依赖
如果项目不是Maven的,那么可以通过这个下载链接下载相应的 jar 包 点此下载 密码:980c
<!-- 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
Kaptcha 的主要配置都是要依赖于 web.xml 进行完成的,要配置相应的验证码显示效果就需要修改相应的配置参数。
可以先直接将下面这一段先拷贝进去,后面会介绍每一个参数的具体含义以及具体的使用方法。
<servlet>
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<!-- 是否有边框 -->
<init-param>
<param-name>kaptcha.border</param-name>
<param-value>no</param-value>
</init-param>
<!-- 字体颜色 -->
<init-param>
<param-name>kaptcha.textproducer.font.color</param-name>
<param-value>black</param-value>
</init-param>
<!-- 图片宽度 -->
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>150</param-value>
</init-param>
<!-- 使用哪些字符生成验证码 -->
<init-param>
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>ACDEFHKPRSTWX345678</param-value>
</init-param>
<!-- 图片高度 -->
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>50</param-value>
</init-param>
<!-- 字体大小 -->
<init-param>
<param-name>kaptcha.textproducer.font.size</param-name>
<param-value>35</param-value>
</init-param>
<!-- 干扰线的颜色 -->
<init-param>
<param-name>kaptcha.noise.color</param-name>
<param-value>white</param-value>
</init-param>
<!-- 字符的个数 -->
<init-param>
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>4</param-value>
</init-param>
<!-- 字体 -->
<init-param>
<param-name>kaptcha.textproducer.font.names</param-name>
<param-value>Arial</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/Kaptcha</url-pattern>
</servlet-mapping>
3. 前端显示代码
后端的业务完成了就要开始前端的显示了。
这里使用了
<html>
<head>
<%--后面实现点击切换验证码的时候用到了jq --%>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>login</title>
</head>
<body>
<form action="loginServlet" method="post">
账户:<input type="text" name="usernaem"><br>
密码:<input type="password" name="password"><br>
<%--验证码输入框--%>
<input class="verifyInput" name="verifyInput" placeholder="请输入验证码">
<%--验证码图片显示标签,验证码将在这里显示,并为图片绑定点击事件,点击切换下一张图片--%>
<%--src="Kaptcha" 表示请求项目的 一个Servlet ---> Kaptcha ,注意这个路径的问题--%>
<img class="verifyCode" onclick="change()" src="Kaptcha">
<input type="submit" value="登录">
</form>
<script>
function change() {
//带上一个时间戳,表示当前图片的唯一性。
var src = " Kaptcha?" + new Date().getTime();
// 将返回的图片路径返回并设置好。
$('.verifyCode').attr("src", src);
}
</script>
</body>
</html>
4. 将前端输入的验证码进行校验
前端输入验证码后是需要后端对验证码的一致性进行校验的。这个时候需要 处理表单提交的 Servlet 中进行逻辑判断。
String verifyInput = req.getParameter("verifyInput"); // 得到前端输入的验证码的值,
// 使用 Kaptcha 生成验证码后会自动的使用 Session 保存到私有空间里面。此时,可以看API文档,得知Session 的 key值为:om.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY 。可以直接通过这个key 值取得相应的,Session 的 value 值。然后对验证码进行判断。处理逻辑。
String kaptchaExpected = (String) req.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
if (!verifyInput.equalsIgnoreCase(kaptchaExpected)){
resp.getWriter().println("<h3>验证码错误</h3>");
return;
}
5. Kaptcha 使用文档
验证码图片的具体配置需要在 web.xml 中进行配置,示例格式如下:
<!-- 是否有边框 -->
<init-param>
<param-name>kaptcha.border</param-name>
<param-value>no</param-value>
</init-param>
kaptcha.border : 是需要配置的类型,
no : 是需要配置的类型的具体的值。
取得Session 的值:
有什么疑问可以私信
日有所思,日有所进。
学而不思则罔,思而不学则殆。