kaptcha實現驗證碼功能

阿新 • • 發佈：2020-12-26

最近看到一個使用kaptcha實現驗證碼的案例，因此記錄一下
1.建立一個Springboot專案，在pom.xml裡面匯入如下依賴

        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

2.新建一個Config包，在包下編寫如下配置類

@Configuration
public class KaptchaConfig {

         @Bean
     public Producer kaptchaProducer(){
         Properties properties = new Properties();
          properties.setProperty("kaptcha.image.width","100");
          properties.setProperty("kaptcha.image.height","40" 
);
               // 設定字型大小
          properties.setProperty("kaptcha.textproducer.font.size","32");
                  // 設定字型顏色
             properties.setProperty("kaptcha.textproducer.font.color","black");
           properties.setProperty("kaptcha.textproducer.char.string" 
,"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ");
               // 擷取4個字元
           properties.setProperty("kaptcha.textproducer.char.length","4");
              // 設定影象干擾，防止機器人暴力破解
           properties.setProperty("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");

         DefaultKaptcha kaptcha = new DefaultKaptcha();
         Config config = new Config(properties);
           kaptcha.setConfig(config);
           return kaptcha;
     }

3.編寫一個Controller,使用如下程式碼實現在瀏覽器載入驗證碼

                         // 生成驗證碼
                 @GetMapping("/kaptcha")
              public void getKaptcha(HttpServletResponse response, HttpSession session){
                    // 生成驗證碼
                     String text = kaptchaProduer.createText();
                         // 生成圖片
                     BufferedImage image = kaptchaProduer.createImage(text);
                        // 將驗證碼存入Session
                     session.setAttribute("kaptcha",text);

                        //將圖片輸出給瀏覽器
                     try {
                         response.setContentType("image/png");
                         OutputStream os = response.getOutputStream();
                         ImageIO.write(image,"png",os);
                     } catch (IOException e) {
                         logger.error("響應驗證碼失敗"+e.getMessage());
                     }
                 }

4.使用thymeleaf模板來載入驗證碼

               <div class="form-group row mt-4">
  			 		<label for="verifycode" class="col-sm-2 col-form-label text-right">驗證碼:</label>
  					<div class="col-sm-6">
  						<input type="text" th:class="|form-control ${codeMsg!=null?'is-invalid':''}|" name="code" id="verifycode" placeholder="請輸入驗證碼!">
  						<div class="invalid-feedback" th:text="${codeMsg}">
  							驗證碼不正確!
  						</div>
  					</div>
  					<div class="col-sm-4">
  						<img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
  						<a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">重新整理驗證碼</a>
  					</div>
  				</div>

 <script th:src="@{/js/jquery-3.3.1.min.js}" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script th:src="@{/js/global.js}"></script>

  <script>
  	function refresh_kaptcha() {
          let path = "/kaptcha?p="+ Math.random();
  		$("#kaptcha").attr("src",path);
  	}
  </script>