(十一) - 验证码
使用验证码需要引入Google的kaptcha组件来实现
导入kaptcah依赖:
... <!--Kaptcha 验证码依赖 前面已导过servlet-api需排除--> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> <exclusions> <exclusion> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> </exclusion> </exclusions> </dependency> </dependencies>
创建 kaptcha 的 servlet:
... <!--验证码组件--> <servlet> <servlet-name>cap</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.char.length</param-name> <param-value>4</param-value> </init-param> <init-param> <!--字符内容范围--> <param-name>kaptcha.textproducer.char.string</param-name> <param-value>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</param-value> </init-param> <init-param> <!--验证码底色, 用RGB数值指定--> <param-name>kaptcha.background.clear.to</param-name> <param-value>211,229,237</param-value> </init-param> <init-param> <!--把验证码的码值存放在session中, 相当于 session.setAttribute("captcha","验证码")--> <param-name>kaptcha.session.key</param-name> <param-value>captcha</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>cap</servlet-name> <url-pattern>/captcha</url-pattern> </servlet-mapping> ...
此时, 可以通过访问此 servlet 来获取到验证码图片:
创建 KeptchaController.java:(通过 realCap.equalsIgnoreCase(captcha) 可以设置不检验大小写)
@RestController @RequestMapping(value="/kaptcha", produces="text/html; charset=UTF-8") public class KaptchaController { @RequestMapping(value="/test1", produces="text/html; charset=UTF-8") public String test1(String captcha, HttpSession session){ //比对 String realCap = (String)session.getAttribute("captcha"); if (realCap.equals(captcha)){ return "验证码校验通过"; } return "验证码校验未通过"; } }
创建 captcha.jsp:
<body> <form action="${pageContext.request.contextPath}/kaptcha/test1"> <img id="i" src="${pageContext.request.contextPath}/captcha" style="width: 100px" onclick="refresh();"> <input type="text" name="captcha"> <br> <input type="submit" value="提交"> </form> <script> function refresh() { var i = document.getElementById("i"); /** * 有时候发送请求，浏览器会直接读取缓存数据，不会去请求后台数据，比如http://localhost:8080/test/login/index, * 请求一次之后，再次发送请求的时候，由于url请求没有发生变化，浏览器会自动读取缓存。这一点会给开发带来一些麻烦。 * 添加时间戳参数使得每次请求地址都不一样, 防止浏览器缓存 */ i.src="${pageContext.request.contextPath}/captcha?" + new Date().getTime() } </script> </body>
访问页面及返回:
------------------------------------------------------------------------------------------------
