谷歌验证码kaptcha使用(包括前端获取解析)

迷南。 2023-10-13 13:28 35阅读 0赞

## 1.后端 ##

基于springboot开发。

**包结构**

![d62ab0d28860448581b98c0da172b45e.png][]

**1.导入依赖**

<dependency>
    			<groupId>com.github.axet</groupId>
    			<artifactId>kaptcha</artifactId>
    			<version>0.0.9</version>
    		</dependency>

**2.配置类**

@Configuration
    public class CaptchaConfig {
        @Bean
        public DefaultKaptcha defaultKaptcha(){
            // 验证码生成器
            DefaultKaptcha captcha = new DefaultKaptcha();
            // 配置
            Properties properties = new Properties();
            //是否有边框
            properties.setProperty("kaptcha.border", "yes");
            //设置边框颜色
            properties.setProperty("kaptcha.border.color", "105,179,90");
            //边框粗细度，默认为1
            // properties.setProperty("kaptcha.border.thickness","1");
            //验证码
            properties.setProperty("kaptcha.session.key","code");
            //验证码文本字符颜色 默认为黑色
            properties.setProperty("kaptcha.textproducer.font.color", "blue");
            //设置字体样式
            properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
            //字体大小，默认40
            properties.setProperty("kaptcha.textproducer.font.size", "30");
            //验证码文本字符内容范围 默认为abced2345678gfynmnpwx
            // properties.setProperty("kaptcha.textproducer.char.string", "");
            //字符长度，默认为5
            properties.setProperty("kaptcha.textproducer.char.length", "4");
            //字符间距 默认为2
            properties.setProperty("kaptcha.textproducer.char.space", "4");
            //验证码图片宽度 默认为200
            properties.setProperty("kaptcha.image.width", "100");
            //验证码图片高度 默认为40
            properties.setProperty("kaptcha.image.height", "40");
            Config config = new Config(properties);
            captcha.setConfig(config);
            return captcha;
    
        }
    }

**3.controller**

@RestController
    public class CaptchaController {
    
        @Autowired
        private DefaultKaptcha defaultKaptcha;
        
        @GetMapping(value = "/captcha",produces = "image/jpeg")
        public void getCaptcha(HttpServletRequest request, HttpServletResponse response){
            // 定义response输出类型为image/jpeg类型
            response.setDateHeader("Expires", 0);
            // Set standard HTTP/1.1 no-cache headers.
            response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
            // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
            response.addHeader("Cache-Control", "post-check=0, pre-check=0");
            // Set standard HTTP/1.0 no-cache header.
            response.setHeader("Pragma", "no-cache");
            // return a jpeg
            response.setContentType("image/jpeg");
    
            //-------------------生成验证码 begin --------------------------
            //获取验证码文本内容
            String text = defaultKaptcha.createText();
            //将验证码文本内容放入session
            request.getSession().setAttribute("captcha",text);
            // 创建验证码图像
            BufferedImage image = defaultKaptcha.createImage(text);
            ServletOutputStream outputStream = null;
            try {
                outputStream = response.getOutputStream();
                //输出流输出图片，格式为jpg
                ImageIO.write(image,"jpg",outputStream);
                outputStream.flush();
            } catch (IOException e) {
                e.printStackTrace();
            }finally {
                if (null!=outputStream){
                    try {
                        outputStream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    
    }

### 2.前端 ###

基于 **vue** 和 **axios,**这里只展示请求部分，如何拿到**后端验证码图片的src路径**。

**axios请求api**

// 获取验证码
    export function getCaptcha(){
        return request({
            method:"get",
            url: "/captcha",
            responseType:"blob" // 指定响应类型为二进制数据
        })
    }

**根据请求api发起请求拿数据**

import {getCaptcha} from "@/api/login.js"
    
     // 获取验证码
        getCaptcha(){
          getCaptcha().then((resp)=>{
            const imgData = resp.data; // 拿到图片的二进制数据
            const imgSrc = URL.createObjectURL(new Blob([imgData],{type:'image/png'})) // 将二进制转换成url路径
            this.captcha = imgSrc;   
          })
        },

[d62ab0d28860448581b98c0da172b45e.png]: https://img-blog.csdnimg.cn/d62ab0d28860448581b98c0da172b45e.png