集成图片验证码Kaptcha-完成登录验证功能

下面展示的是用SpringBoot集成Kaptcha，当然用其他框架也是一样的。

导入Kaptcha

导入pom.xml，下面得到二选一，建议用github的，比google的快一点

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

<dependency>
    <groupId>com.google.code.kaptcha</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3</version>
</dependency>

编写配置类

import com.google.code.kaptcha.Producer;
import com.google.code.kaptcha.impl.DefaultKaptcha;

import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

@Configuration
public class KaptchaConfig {

    @Bean
    public Producer kaptchaProducer(){
        Properties properties = new Properties();
        properties.setProperty("kaptcah.image.width","100");
        properties.setProperty("kaptcah.image.heigh","40");
        properties.setProperty("kaptcah.textproducer.font.size","32");
        properties.setProperty("kaptcah.textproducer.font.color","0,0,0");
        properties.setProperty("kaptcah.textproducer.char.string","0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        properties.setProperty("kaptcah.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;
    }

}

在controller层调用方法

在controller层写

package com.kyw.controller;

import com.google.code.kaptcha.Producer;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;


//登录注册
@Controller
@RequestMapping("/login")
public class LoginController {


    private static final Logger logger = LoggerFactory.getLogger(LoginController.class);

    @Autowired
    private Producer kaptchaProducer;

    /**
     * 生成验证码
     * @param response
     * @param session
     */
    @RequestMapping(value = "/kaptcha",method = RequestMethod.GET)
    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());
        }
    }


}

效果

图片样式可以更具下面的配置表进行修改

访问http://localhost:8081/login/kaptcha

Kaptcha的配置表

常量	描述	默认值
kaptcha.border	图片是否有边框	默认true
kaptcha.border.color	边框颜色
kaptcha.image.width	验证码图片宽	默认200
kaptcha.image.height	验证码图片高	默认50
kaptcha.textproducer.font.size	验证码文本字符大小	默认为40
kaptcha.session.key	session key KAPTCHA_SESSION_KEY
kaptcha.textproducer.char.length	验证码文本字符长度	默认为5
kaptcha.textproducer.font.names	验证码文本字体样式	默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
kaptcha.obscurificator.impl	图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
kaptcha.textproducer.impl	验证码文本生成规则
kaptcha.textproducer.char.space	验证码文本字符间距	默认为2
kaptcha.noise.color	验证码干扰颜色	默认为Color.BLACK
kaptcha.noise.impl	干扰实现类 com.google.code.kaptcha.impl.NoNoise
kaptcha.background.impl	背景实现类	com.google.code.kaptcha.impl.DefaultBackground
kaptcha.producer.impl	图片实现类 com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl	文本实现类 com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string	文本集合
kaptcha.background.clear.from	背景颜色渐变，开始颜色
kaptcha.background.clear.to	背景颜色渐变， 结束颜色
kaptcha.session.date	session date KAPTCHA_SESSION_DATE

验证码集成到登录功能

前端

简单的引入，因为后端的接口已经写好了，访问那个接口就会传回图片，所以前端直接在 img里面写上后端的路径就行了，这里前端用的是Thymeleaf模板

在你的Login.html里面加上下面的代码

刷新验证码怎么做？

其实就是重新再访问一次这个路径就行了，那么直接做刷新也行，但是这样不好，会刷新整个网页，我们要的是局部刷新，也就是只把图片那块刷新。

给a标签加一个方法，点击a标签就执行下面js的方法，让其用jquer去改掉img标签的src值，就能做到刷新验证码。

防止浏览器偷懒

如果你将路径改成原来的 /login/kaptcha 理论上应该是浏览器会刷新页面，因为我们又发送了一次请求，但是实际上浏览器会偷懒，浏览器觉得你在请求一个静态资源，而且路径时一样的，就不访问了，所以我们做的时候，给url后面拼接一个 “ ？p=Math.random” 这样每次访问的请求就不一样了，就能防止浏览器偷懒

<input type="text" class="text" name="Kaptcha" placeholder="验证码" required="">
<div>
    <img th:src="@{/login/kaptcha}" id="kaptchaImg">
    <a href="javascript:refresh_kaptcha()">刷新验证码</a>
</div>

js

function refresh_kaptcha(){
    $("#kaptchaImg").attr("src","/login/kaptcha?p="+Math.random())
}

后端

后端就是验证一下这个验证码对不对，然后发送前端验证的结果。