Spring Boot 整合 Kaptcha 验证码使用

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

# 1.maven依赖 #

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

# 2.Kaptcha配置类 #

import java.util.Properties;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    import com.google.code.kaptcha.impl.DefaultKaptcha;
    import com.google.code.kaptcha.util.Config;
    
    /**
     * Kaptcha配置类
     * @author Administrator
     *
     */
    @Configuration
    public class kaptchaConfig {
        @Bean(name="captchaProducer")
        public DefaultKaptcha getKaptchaBean(){
            DefaultKaptcha defaultKaptcha=new DefaultKaptcha();
            Properties properties=new Properties();
            properties.setProperty("kaptcha.border", "yes");
            properties.setProperty("kaptcha.border.color", "105,179,90");
            properties.setProperty("kaptcha.textproducer.font.color", "blue");
            properties.setProperty("kaptcha.image.width", "125");
            properties.setProperty("kaptcha.image.height", "45");
            properties.setProperty("kaptcha.session.key", "code");
            properties.setProperty("kaptcha.textproducer.char.length", "4");
            properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
            Config config=new Config(properties);
            defaultKaptcha.setConfig(config);
            return defaultKaptcha;
        }
    }

# 3.KaptchaController #

import java.awt.image.BufferedImage;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.google.code.kaptcha.Constants;
    import com.google.code.kaptcha.Producer;
    
    @Controller
    public class KaptchaController {
    	@Autowired
    	private Producer captchaProducer;
    	
    	/**
    	 * 生成验证码
    	 * @param request
    	 * @param response
    	 * @throws Exception
    	 */
    	@GetMapping("/getKaptchaImage")
    	public void 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();
    		//生成的验证码存入session
    		request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
    		BufferedImage bi = captchaProducer.createImage(capText);
    		ServletOutputStream out = response.getOutputStream();
    		ImageIO.write(bi, "jpg", out);
    		try {
    			out.flush();
    		} finally {
    			out.close();
    		}
    	}
    	
    	/**
    	 * 验证码校验实例
    	 * @param inputCode
    	 * @param request
    	 * @param model
    	 * @return
    	 */
    	@RequestMapping("/verify")
    	public String verifyCode(String inputCode,HttpServletRequest request,Model model) {
    		 //...
    	    String view ="success";
    	    if(inputCode==null) {
    	    	return view;
    	    }
    	    //验证码
    	    String tips = "";
    	    HttpSession httpSession = request.getSession();
    	    //取出验证码
    	    String kaptcha = (String) httpSession.getAttribute(Constants.KAPTCHA_SESSION_KEY);
    	    if(!kaptcha.equals(inputCode)) {
    	        tips = "验证码有误";
    	        model.addAttribute("tips", tips);		
    	    }else {
    	    	tips = "验证码正确";
    	        model.addAttribute("tips", tips);
    	    }
    	    //...
    	    return view;
    	}
    }

# 4.页面嵌入片段success.html #

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>验证码校验页面</title>
    </head>
    
    <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">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript">
    function flushCode(){
    	var timestamp = new Date().getTime();
    	$('#kaptcha').attr("src","/getKaptchaImage?"+timestamp);
    }
    </script>
    <body>
    <div class="form-group">
        <div style="margin: 10% auto auto 40%;width: 300px">
    	<form action="#" th:action="@{/verify}" method="post">
    	    <input type="text" name="inputCode" class="form-control" placeholder="验证码" style="width: 100px;float: left;" required="required">
    	    <a href="#" onclick="flushCode()"><i>看不清楚</i></a>
    	    <img id="kaptcha" alt="待加载..." src="/" th:src="@{/getKaptchaImage}"/>
    	    
    	    <div class="form-group">
    			 <label for="exampleInputPassword1" th:text="${tips}"></label>
    	    </div>
    	        <button type="submit" class="btn btn-default">校验</button>
    	</form>
    	</div>
    </div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5NTc2NDU_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5NTc2NDU_size_16_color_FFFFFF_t_70]: /images/20220301/f2853d368c3347f59a00b1a6dffcfe85.png