Spring Boot 整合 Kaptcha 验证码使用

最新推荐文章于 2024-04-14 06:11:08 发布

墨韵风轻

最新推荐文章于 2024-04-14 06:11:08 发布

阅读量444

点赞数 1

分类专栏： JAVA springboot spring 文章标签： kaptcha

本文链接：https://blog.youkuaiyun.com/u010957645/article/details/88734825

版权

springboot 同时被 3 个专栏收录

15 篇文章

订阅专栏

JAVA

12 篇文章

订阅专栏

spring

5 篇文章

订阅专栏

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>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<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>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<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>