基于 springBoot 和Google Kaptcha 验证码组件

后端生成验证码

导入依赖

1
2
3
4
5
<dependency>
	<groupId>com.github.penggle</groupId>
	<artifactId>kaptcha</artifactId>
	<version>2.3.2</version>
</dependency>

编写Kaptcha配置类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.nowcoder.community.config;

import com.google.code.kaptcha.Producer;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

@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", "0,0,0");
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYAZ");
        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;
    }

}

生成随机字符、生成图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@RequestMapping(path = "/kaptcha", method = RequestMethod.GET)
public void getKaptcha(HttpServletResponse response, HttpSession session) {
    // 生成验证码
    String text = kaptchaProducer.createText();
    BufferedImage image = kaptchaProducer.createImage(text);

    // 将验证码存入session
    session.setAttribute("kaptcha", text);

    // 将突图片输出给浏览器
    response.setContentType("image/png");
    try {
        OutputStream os = response.getOutputStream();
        ImageIO.write(image, "png", os);
    } catch (IOException e) {
        logger.error("响应验证码失败:" + e.getMessage());
    }
}

运行项目直接访问

前端整合验证码(使用了tymeleaf模板)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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':''}|"
								   id="verifycode" name="code" 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>		

<!--  p参数主要是因为某些浏览器比较智能，检测到访问静态资源且路径不变的话，便不去访问-->

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

此时验证码可以自动刷新

服务端校验验证码（账号密码校验省去了）

1
2
3
4
5
6
7
8
9
@RequestMapping(path = "/login", method = RequestMethod.POST)
public String login(String username, String password, String code, boolean rememberme,
                    Model model, HttpSession session, HttpServletResponse response) {
    // 检查验证码
    String kaptcha = (String) session.getAttribute("kaptcha");
    if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)) {
        model.addAttribute("codeMsg", "验证码不正确!");
        return "/site/login";
    }