kaptcha 图片验证码

素颜马尾好姑娘i 2024-04-01 11:37 81阅读 0赞

### 引入依赖 ###

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

### controller层–编写验证码 ###

@Controller
    public class VerifyCodeController {
        
        private final Producer producer;
    
        @Autowired
        public VerifyCodeController(Producer producer) {
        
            this.producer = producer;
        }
    
        @RequestMapping("/vc.jpg")
        public void verifyCode(HttpServletResponse response, HttpSession session) throws IOException {
        
            //1.生成验证码
            String verifyCode = producer.createText();
            //2.保存到中 session
            session.setAttribute("kaptcha", verifyCode);
            //3.生成图片
            BufferedImage bi = producer.createImage(verifyCode);
            //4.响应图片
            response.setContentType("image/png");
            ServletOutputStream os = response.getOutputStream();
            ImageIO.write(bi, "jpg", os);
        }
    }

### 配置类–设置验证码样式 ###

@Configuration
    public class KaptchaConfig {
        
    
        @Bean
        public Producer kaptcha() {
        
            Properties properties = new Properties();
            //1.验证码宽度
            properties.setProperty("kaptcha.image.width", "150");
            //2.验证码高度
            properties.setProperty("kaptcha.image.height", "50");
            //3.验证码字符串
            properties.setProperty("kaptcha.textproducer.char.string", "0123456789");
            //4.验证码长度
            properties.setProperty("kaptcha.textproducer.char.length", "4");
            Config config = new Config(properties);
            DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
            defaultKaptcha.setConfig(config);
            return defaultKaptcha;
        }
    }

### HTML代码 ###

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
    </head>
    <body>
    <h1>用户登录</h1>
    <form method="post" th:action="@{/doLogin}">
        用户名: <input name="uname" type="text"> <br>
        密码: <input name="passwd" type="text"> <br>
        验证码: <input name="kaptcha" type="text"> <img alt="" th:src="@{/vc.jpg}"> <br>
        <input type="submit" value="登录">
    </form>
    
    </body>
    </html>

### 页面样式 ###

![在这里插入图片描述][71a821dab2d64d458a468bdf28733fa4.png]

### 登录时比较 ###

//2.取出输入的验证码与 session 中验证码进行比较
    String sessionVerifyCode = (String) request.getSession().getAttribute("kaptcha");

结束！！！！

--------------------

会在意你长相的，只有你自己。  《被讨厌的勇气》

[71a821dab2d64d458a468bdf28733fa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a62457337dd140039ba2a68992e87489.png