Spring Boot 整合 Kaptcha 验证码使用

小灰灰 2022-03-01 09:06 298阅读 0赞

1.maven依赖

  1. <!-- 验证码-->
  2. <dependency>
  3. <groupId>com.github.penggle</groupId>
  4. <artifactId>kaptcha</artifactId>
  5. <version>2.3.2</version>
  6. </dependency>

2.Kaptcha配置类

  1. import java.util.Properties;
  2. import org.springframework.context.annotation.Bean;
  3. import org.springframework.context.annotation.Configuration;
  4. import com.google.code.kaptcha.impl.DefaultKaptcha;
  5. import com.google.code.kaptcha.util.Config;
  6. /**
  7. * Kaptcha配置类
  8. * @author Administrator
  9. *
  10. */
  11. @Configuration
  12. public class kaptchaConfig {
  13. @Bean(name="captchaProducer")
  14. public DefaultKaptcha getKaptchaBean(){
  15. DefaultKaptcha defaultKaptcha=new DefaultKaptcha();
  16. Properties properties=new Properties();
  17. properties.setProperty("kaptcha.border", "yes");
  18. properties.setProperty("kaptcha.border.color", "105,179,90");
  19. properties.setProperty("kaptcha.textproducer.font.color", "blue");
  20. properties.setProperty("kaptcha.image.width", "125");
  21. properties.setProperty("kaptcha.image.height", "45");
  22. properties.setProperty("kaptcha.session.key", "code");
  23. properties.setProperty("kaptcha.textproducer.char.length", "4");
  24. properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
  25. Config config=new Config(properties);
  26. defaultKaptcha.setConfig(config);
  27. return defaultKaptcha;
  28. }
  29. }

3.KaptchaController

  1. import java.awt.image.BufferedImage;
  2. import javax.imageio.ImageIO;
  3. import javax.servlet.ServletOutputStream;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import javax.servlet.http.HttpSession;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.ui.Model;
  10. import org.springframework.web.bind.annotation.GetMapping;
  11. import org.springframework.web.bind.annotation.RequestMapping;
  12. import com.google.code.kaptcha.Constants;
  13. import com.google.code.kaptcha.Producer;
  14. @Controller
  15. public class KaptchaController {
  16. @Autowired
  17. private Producer captchaProducer;
  18. /**
  19. * 生成验证码
  20. * @param request
  21. * @param response
  22. * @throws Exception
  23. */
  24. @GetMapping("/getKaptchaImage")
  25. public void getKaptchaImage(HttpServletRequest request,
  26. HttpServletResponse response) throws Exception {
  27. response.setDateHeader("Expires", 0);
  28. response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
  29. response.addHeader("Cache-Control", "post-check=0, pre-check=0");
  30. response.setHeader("Pragma", "no-cache");
  31. response.setContentType("image/jpeg");
  32. String capText = captchaProducer.createText();
  33. //生成的验证码存入session
  34. request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
  35. BufferedImage bi = captchaProducer.createImage(capText);
  36. ServletOutputStream out = response.getOutputStream();
  37. ImageIO.write(bi, "jpg", out);
  38. try {
  39. out.flush();
  40. } finally {
  41. out.close();
  42. }
  43. }
  44. /**
  45. * 验证码校验实例
  46. * @param inputCode
  47. * @param request
  48. * @param model
  49. * @return
  50. */
  51. @RequestMapping("/verify")
  52. public String verifyCode(String inputCode,HttpServletRequest request,Model model) {
  53. //...
  54. String view ="success";
  55. if(inputCode==null) {
  56. return view;
  57. }
  58. //验证码
  59. String tips = "";
  60. HttpSession httpSession = request.getSession();
  61. //取出验证码
  62. String kaptcha = (String) httpSession.getAttribute(Constants.KAPTCHA_SESSION_KEY);
  63. if(!kaptcha.equals(inputCode)) {
  64. tips = "验证码有误";
  65. model.addAttribute("tips", tips);
  66. }else {
  67. tips = "验证码正确";
  68. model.addAttribute("tips", tips);
  69. }
  70. //...
  71. return view;
  72. }
  73. }

4.页面嵌入片段success.html

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>验证码校验页面</title>
  6. </head>
  7. <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  9. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  10. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  11. <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  12. <script type="text/javascript">
  13. function flushCode(){
  14. var timestamp = new Date().getTime();
  15. $('#kaptcha').attr("src","/getKaptchaImage?"+timestamp);
  16. }
  17. </script>
  18. <body>
  19. <div class="form-group">
  20. <div style="margin: 10% auto auto 40%;width: 300px">
  21. <form action="#" th:action="@{/verify}" method="post">
  22. <input type="text" name="inputCode" class="form-control" placeholder="验证码" style="width: 100px;float: left;" required="required">
  23. <a href="#" onclick="flushCode()"><i>看不清楚</i></a>
  24. <img id="kaptcha" alt="待加载..." src="/" th:src="@{/getKaptchaImage}"/>
  25. <div class="form-group">
  26. <label for="exampleInputPassword1" th:text="${tips}"></label>
  27. </div>
  28. <button type="submit" class="btn btn-default">校验</button>
  29. </form>
  30. </div>
  31. </div>
  32. </body>
  33. </html>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5NTc2NDU_size_16_color_FFFFFF_t_70

发表评论

表情:
评论列表 (有 0 条评论,298人围观)

还没有评论,来说两句吧...

相关阅读