在后台写一个进行验证码验证,防止请求过快。
实现方法:在后台生产验证码并保存到session当中,将生成的验证码图片返回给前台,接收前台回传的数据时,对验证码进行验证,如果正确则进行下一步操作并清除session里存储的验证码,如果错误返回失败信息。
参考链接
kaptcha 是一个非常实用的验证码生成工具。有了它,你可以生成各种样式的验证码,因为它是可配置的。kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.KaptchaServlet,生成一个图片
//pom.xml <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
配置默认的kaptcha属性和获取:
@Component public class VerificationCodeConfig { @Bean public DefaultKaptcha getDefaultKaptcha() { DefaultKaptcha defaultKaptcha = new DefaultKaptcha(); Properties properties = new Properties(); properties.setProperty("kaptcha.textproducer.char.string", "123456789");//验证码字符范围 properties.setProperty("kaptcha.border.color", "245,248,249");//图片边框颜色 properties.setProperty("kaptcha.textproducer.font.color", "black");//字体颜色 properties.setProperty("kaptcha.textproducer.char.space", "2");//文字间隔 properties.setProperty("kaptcha.image.width", "125");//图片宽度 properties.setProperty("kaptcha.image.height", "45");//图片高度 properties.setProperty("kaptcha.textproducer.char.length", "4");//长度 properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");//字体 Config config = new Config(properties); defaultKaptcha.setConfig(config); return defaultKaptcha; } }
用配置的defaultKaptcha对象生成验证码和验证码图片,将验证码写入session中,将验证码图片转化为字节流写入response中,前台就能获取到这个图片了.
@Autowired DefaultKaptcha defaultKaptcha; @Autowired HttpSession httpSession; @Override public void createVerificationCode(HttpServletResponse httpServletResponse,HandleVerificationCode handleVerificationCode) throws IOException { byte[] captchaChallengeAsJpeg = null; ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream(); // 生产验证码字符串并保存到session中 String createText = defaultKaptcha.createText(); // 使用生产的验证码字符串返回一个BufferedImage对象并转为byte写入到byte数组中 BufferedImage challenge = defaultKaptcha.createImage(createText); ImageIO.write(challenge, "jpg", jpegOutputStream); captchaChallengeAsJpeg = jpegOutputStream.toByteArray(); httpSession.setAttribute(VERIFICATION_CODE_SESSION_KEY, codeText); httpServletResponse.setHeader("Cache-Control", "no-store"); httpServletResponse.setHeader("Pragma", "no-cache"); httpServletResponse.setDateHeader("Expires", 0); httpServletResponse.setContentType("image/jpeg"); ServletOutputStream responseOutputStream = null; try { responseOutputStream = httpServletResponse.getOutputStream(); responseOutputStream.write(captchaChallengeAsJpeg); responseOutputStream.flush(); responseOutputStream.close(); } catch (IOException e) { httpServletResponse.setStatus(HttpServletResponse.SC_NOT_FOUND); } }
用img标签获取图片就行了,每一次获取的图片都不一样.
<img src="api/CheckRecord/verificationCode" onclick="this.src='api/CheckRecord/verificationCode'">