工具及其技术:

• vscode(对,不用idea 也能开发得特别爽)
• spring boot 2.0
• kapcha

1.添加依赖:

在pom.xml中输入依赖:

<!-- kaptcha验证码 -->
        <dependency>
        <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

2. 通过配置类来 配置kaptcha

首先,新建kaptcha的config类:

import java.util.Properties;
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;

@Configuration
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha getDefaultKaptcha(){
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        
        properties.setProperty("kaptcha.border", "yes");
        properties.setProperty("kaptcha.border.color", "105,179,90");
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        properties.setProperty("kaptcha.textproducer.char.space", "5");
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        properties.setProperty("kaptcha.session.key", "code");
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

}

注意:

• 要用@Configuration注解来注册这个配置文件
• defaultKaptcha 这个kaptcha类的实例在spring 周期中为单例模式,注意命名(需要在conrtoller中用同名变量去获得该bean的实例)

然后新建kaptchacontroller,用来得到验证码图片:

//KaptchaController.java
import java.awt.image.BufferedImage;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class KaptchaContorller {

   @Autowired
   private Producer defaultKaptcha = null;

   @RequestMapping("/kaptcha")
   public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) {
       HttpSession session = request.getSession();
       response.setDateHeader("Expires", 0);

       // 告诉浏览器不要缓存,防止生成同样的验证码图片
       response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
       response.addHeader("Cache-Control", "post-check=0, pre-check=0");
       response.setHeader("Pragma", "no-cache");

       // 返回信息为jpg
       response.setContentType("image/jpeg");

       // 生成验证码
       String capText = defaultKaptcha.createText();

       // 将验证码生成的文字保存到session 中,等待比对
       session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
       BufferedImage bufferedImage = defaultKaptcha.createImage(capText);
       // 将图片写到response中返回s
       try {

           ServletOutputStream outputStream = response.getOutputStream();
           ImageIO.write(bufferedImage, "jpg", outputStream);
           outputStream.flush();
           outputStream.close();
       } catch (Exception e) {

           e.printStackTrace();
       }
   }

}

注意事项:

@Autowired
    private Producer defaultKaptcha = null;

• Producer的变量名必须是kaptchaconfig.java中defaultKaptcha的实例名字;
• 每次在生成验证码的时候,将验证码的内容写入到session中,然后下次判断输入验证码是否正确的时候可以用session指定key来获取判断

生成验证码图片效果:

image

3. 验证码校验

在controller 中,我们只需要拿出session中的验证码值,跟post上来的结果做一遍比较,即可:

  @RequestMapping(value = "/login")
    public String login(HttpServletRequest request){
        //获取生成的验证码
        String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        String inputCode = request.getParameter("kaptchaString");
        if(inputCode==null){
            return "error";
        }
        if(inputCode.equals(verifyCodeExpected)){
            return "OK";
        }else{
            return "Error";
        }
    }

    @RequestMapping("/")
    public String index(){
        return "forward:/index.html";
    }

//index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试kaptcha</title>
    <script type="text/javascript">
        function refresh() {
            document.getElementById('kaptchaimg').src="/kaptcha";
        }
    </script>
</head>
<body>
<form action="/login" method="POST">
    验证码:  <input type="text" placeholder="请输入验证码" name="kaptchaString">
    <div class="item-input">
        <img id="kaptchaimg" 
             onclick="refresh()" src="/kaptcha" />
    </div>
    <input type="submit" value="submit" />
</form>

</body>
</html>