网站生成验证码功能实现

我们使用kaptcha工具来生成验证码

//1 导入kaptcha包
<dependency>
			<groupId>com.github.penggle</groupId>
			<artifactId>kaptcha</artifactId>
			<version>2.3.2</version>
</dependency>


//2 写一个配置类 因为这个工具没有被spring管理，我们要自己写配置，然后将配置类加载到spring容器，然后容器就可以对它进行初始化
@Configuration
public class KaptchaConfig {

    @Bean //实例化它的核心接口
    public Producer kaptchaProducer() {
    //实例化properties
        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;
    }

//3 在controller层完善逻辑 生成一个动态的可以刷新 改变验证码的html页面
@Controller
public class LoginController  {
//需要打印日志
private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
    
    @Autowired //注入工具
    private Producer kaptchaProducer;
     @RequestMapping(path = "/kaptcha", method = RequestMethod.GET)
    //跨请求，敏感数据用session
    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());
        }
    }
}




//5 编写静态页面的js使其能够动态刷新验证码
<a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
<!-- jquery实现 改变图片的路径 后面加的随机数是使得页面刷新 -->
<script>
		function refresh_kaptcha() {
			var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();
			<!--改变图片的访问路径-->
			$("#kaptcha").attr("src", path);
		}
	</script>

总结：实现验证码功能，先写一个可以刷新验证码的页面，然后再使用jquery，将需要使用验证码功能的地方绑定到这个页面