SpringMVC整合谷歌captcha实现登录验证码

1. 加入在pom.xml中加入captcha依赖

   <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
           <dependency>
               <groupId>com.github.penggle</groupId>
               <artifactId>kaptcha</artifactId>
               <version>2.3.2</version>
           </dependency>

2. 在SpringMVC配置文件中配置captcha

   <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
           <property name="config">
               <bean class="com.google.code.kaptcha.util.Config">
                   <constructor-arg>
                       <props>
                           <prop key="kaptcha.border">no</prop>
                           <prop key="kaptcha.textproducer.font.size">45</prop>
                           <prop key="kaptcha.textproducer.font.color">blue</prop>
                           <prop key="kaptcha.textproducer.char.length">4</prop>
                           <prop key="kaptcha.session.key">code</prop>
                       </props>
                   </constructor-arg>
               </bean>
           </property>
       </bean>

    

3. 编写生成验证码类

   @RestController
   public class CaptchaController {
   
       private Producer producer = null;
   
       private final Producer captchaProducer;
       @Autowired
       private JedisCacheClient redis;
   
       @Autowired
       public CaptchaController(Producer captchaProducer) {
           this.captchaProducer = captchaProducer;
       }
   
       @RequestMapping(value = "captcha")
       public String getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
           response.setDateHeader("Expires", 0);
           response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
           response.addHeader("Cache-Control", "post-check=0, pre-check=0");
           response.setHeader("Pragma", "no-cache");
           response.setContentType("image/jpeg");
   
           String capText = captchaProducer.createText();
           redis.expire(capText,capText,60); //我这里是将验证码放入到reids中,key和value一致,时间为60s
           BufferedImage bi = captchaProducer.createImage(capText);
           ServletOutputStream out = response.getOutputStream();
           ImageIO.write(bi, "jpg", out);
   
           try {
               out.flush();
           } finally {
               out.close();
           }
           return null;
       }
   }

    

4. 在前端页面加在验证码

   <input id="CODE" name="logcode" class="text"
          style="color: #000000 !important; width: 100px; position:absolute; z-index:100;" value="";
          type="text" placeholder="请输入验证码">
   <img id="codeImg" alt="" src="/captcha" style="float: left;width:150px; margin-left: 170px; height: 45px;"> //点击如偏可刷新验证码

    

5. 获取用户输入到验证码框的值

   var code = document.getElementById("CODE").value;

    

6. 验证redis中的验证码和用户提交的是否一致

   String s = jedisCacheClient.get(code); //根据用户提交的验证码从redis中获取,如果获取到,说明用户输入正确,如果获取不到,说明输入错误或者时间超过了60s
    if (s != null && s.equalsIgnoreCase(code)) {
        jedisCacheClient.del(code); //验证通过,删除redis中的验证码
   　}