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中的驗證碼
   　}