其他分享
首页 > 其他分享> > 仿牛客网社区项目(六)验证码

仿牛客网社区项目(六)验证码

作者:互联网

验证码功能

Kaptcha

一、导入依赖

生成验证码

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

二、编写配置类

然后进行配置,在KaptchaConfig里, 其中NoNoise是为了避免机器人破解

@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", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        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;
    }
}

三、业务实现

然后在LoginController里编写

    @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 {
            ServletOutputStream outputStream = response.getOutputStream();
            ImageIO.write(image, "png", outputStream);
        } catch (IOException e) {
            logger.error("响应验证码失败:" + e.getMessage());
        }
    }

最后修改登录页面

<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>

因为每次都要重新刷新激活码,所以把地址给了个名字叫kaptcha,然后用js编写refresh_kaptcha方法,因为浏览器认为你在访问一个静态资源,相同的路径,就不刷新, 所以需要带一个随机数骗过浏览器

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

CONTEXT_PATH是指在global.js申明的

var CONTEXT_PATH = "/community";

标签:仿牛,textproducer,kaptcha,image,验证码,客网,setProperty,properties
来源: https://www.cnblogs.com/nevererror/p/16210293.html