验证码

jiezi

5 年前

在后台写一个进行验证码验证，防止请求过快。

实现方法: 在后台生产验证码并保存到 session 当中, 将生成的验证码图片返回给前台, 接收前台回传的数据时, 对验证码进行验证，如果正确则进行下一步操作并清除 session 里存储的验证码, 如果错误返回失败信息。

参考链接

kaptcha 是一个非常实用的验证码生成工具。有了它，你可以生成各种样式的验证码，因为它是可配置的。kaptcha 工作的原理是调用 com.google.code.kaptcha.servlet.KaptchaServlet，生成一个图片

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

配置默认的 kaptcha 属性和获取:

@Component
public class VerificationCodeConfig {

    @Bean
    public DefaultKaptcha getDefaultKaptcha() {DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.setProperty("kaptcha.textproducer.char.string", "123456789");// 验证码字符范围
        properties.setProperty("kaptcha.border.color", "245,248,249");// 图片边框颜色
        properties.setProperty("kaptcha.textproducer.font.color", "black");// 字体颜色
        properties.setProperty("kaptcha.textproducer.char.space", "2");// 文字间隔
        properties.setProperty("kaptcha.image.width", "125");// 图片宽度
        properties.setProperty("kaptcha.image.height", "45");// 图片高度
        properties.setProperty("kaptcha.textproducer.char.length", "4");// 长度
        properties.setProperty("kaptcha.textproducer.font.names", "宋体, 楷体, 微软雅黑");// 字体
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

用配置的 defaultKaptcha 对象生成验证码和验证码图片，将验证码写入 session 中，将验证码图片转化为字节流写入 response 中, 前台就能获取到这个图片了.

@Autowired
DefaultKaptcha defaultKaptcha;
@Autowired
HttpSession httpSession;

    @Override
    public void createVerificationCode(HttpServletResponse httpServletResponse,HandleVerificationCode handleVerificationCode) throws IOException {byte[] captchaChallengeAsJpeg = null;
        ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
        // 生产验证码字符串并保存到 session 中
        String createText = defaultKaptcha.createText();
        // 使用生产的验证码字符串返回一个 BufferedImage 对象并转为 byte 写入到 byte 数组中
        BufferedImage challenge = defaultKaptcha.createImage(createText);
        ImageIO.write(challenge, "jpg", jpegOutputStream);
        captchaChallengeAsJpeg = jpegOutputStream.toByteArray();
        httpSession.setAttribute(VERIFICATION_CODE_SESSION_KEY, codeText);
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/jpeg");
        ServletOutputStream responseOutputStream = null;
        try {responseOutputStream = httpServletResponse.getOutputStream();
               responseOutputStream.write(captchaChallengeAsJpeg);
               responseOutputStream.flush();
               responseOutputStream.close();} catch (IOException e) {httpServletResponse.setStatus(HttpServletResponse.SC_NOT_FOUND);
            }
    }

用 img 标签获取图片就行了，每一次获取的图片都不一样.

<img src="api/CheckRecord/verificationCode" onclick="this.src='api/CheckRecord/verificationCode'">

验证码

目标

配置 kaptcha

导入 kaptcha 依赖:

生成验证码

获取验证码