问答平台（2），生成验证码

Kaptcha

- 导入jar包；
- 编写Kaptcha配置类；
- 生成随机字符，生成图片。

---

Kaptcha 配置类

// KaptchaConfig.java
@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.java
@RequestMapping(path = "/kaptcha", method = RequestMethod.GET)
public void getKpatcha(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());
    }
}

---

页面

<!-- 后端代码完成后，需要修改前端代码配合。 -->
<!-- login.html -->
<!-- 内容 -->
<div class="form-group row mt-4">
    <label for="verifycode" class="col-sm-2 col-form-label text-right">验证码:</label>
    <div class="col-sm-6">
        <input type="text" th:class="|form-control ${codeMsg!=null?'is-invalid':''}|"
                id="verifycode" name="code" placeholder="请输入验证码!">
        <div class="invalid-feedback" th:text="${codeMsg}">
            验证码不正确!
        </div>
    </div>
    <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>
</div>
<!-- js -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script>
    function refresh_kaptcha() {
        var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();
        $("#kaptcha").attr("src", path);
    }
</script>

// global.js
var CONTEXT_PATH = "";
// var CONTEXT_PATH = "/community";

---

参考资料

• https://code.google.com/archive/p/kaptcha