How to implement verification code with SpringBoot+kaptcha

1. Basic usage

kaptcha is a very old verification code generation tool. How old is it? Dating back to 2006.

After so many years, not only is it not lonely but it is still being used by many people, which shows its vitality and is worthy of our study.

For convenience, we will create a Spring Boot project to demonstrate its usage.

First create a new Spring Boot project, and then add kaptcha dependencies, as follows:

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

Next we only need to provide a Bean to configure Kaptcha, as follows:

@Configuration
public class KaptchaConfig {
    @Bean(name = "captchaProducer")
    public DefaultKaptcha getKaptchaBean() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 是否有边框 默认为true 我们可以自己设置yes，no
        properties.setProperty(KAPTCHA_BORDER, "yes");
        // 验证码文本字符颜色 默认为Color.BLACK
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "black");
        // 验证码图片宽度 默认为200
        properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
        // 验证码图片高度 默认为50
        properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
        // 验证码文本字符大小 默认为40
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "38");
        // KAPTCHA_SESSION_KEY
        properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");
        // 验证码文本字符长度 默认为5
        properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "4");
        // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
        // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
        properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL, "com.google.code.kaptcha.impl.ShadowGimpy");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

## Configure each attribute value of the verification code image in #DefaultKaptcha. The meaning of each attribute is commented in the code, so I won’t say more.

Next we return the verification code image in the interface, as follows:

@Autowired
DefaultKaptcha defaultKaptcha;
@GetMapping("/img")
public void getKaptcha(HttpServletResponse resp) throws IOException {
    String text = defaultKaptcha.createText();
    BufferedImage image = defaultKaptcha.createImage(text);
    ImageIO.write(image, "jpg", resp.getOutputStream());
}

Here I write the image to the front end in the form of IO stream, of course it can also be converted into a Base64 The string returned to the front end is also OK.

Wait, something seems to be missing!

We did not store the generated verification code text into the session, so it would not be possible to verify when logging in. Some friends may say, isn’t this simple? Isn’t it enough to just save it in the interface?

NONONO!

Look, when we configure the DefaultKaptcha bean, there is such a line of code

properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");, this line of code means that it will automatically The generated verification code text is stored in the session, and the KEY of the session is kaptchaCode. However, in actual testing, you will find that the above code does not store the text generated by the verification code into the session.

The reason is that the Kaptcha tool actually provides a Servlet that generates verification code images. If we directly use the verification code Servlet it provides, then the above configuration will take effect. In Spring Boot, if you want to To configure the Servlet provided by Kaptcha, the method is as follows:

@Bean
ServletRegistrationBean<HttpServlet> kaptchaServlet() {
    ServletRegistrationBean<HttpServlet> bean = new ServletRegistrationBean<>();
    bean.setServlet(new KaptchaServlet());
    bean.addUrlMappings("/img");
    Properties properties = new Properties();
    // 是否有边框 默认为true 我们可以自己设置yes，no
    properties.setProperty(KAPTCHA_BORDER, "yes");
    // 验证码文本字符颜色 默认为Color.BLACK
    properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "black");
    // 验证码图片宽度 默认为200
    properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
    // 验证码图片高度 默认为50
    properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
    // 验证码文本字符大小 默认为40
    properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "38");
    // KAPTCHA_SESSION_KEY
    properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");
    // 验证码文本字符长度 默认为5
    properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "4");
    // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
    properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
    // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
    properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL, "com.google.code.kaptcha.impl.ShadowGimpy");
    Map<String, String> map = new HashMap<String,String>((Map)properties);
    bean.setInitParameters(map);
    return bean;
}

After the project is started, directly access

/img to see the verification code image, and the text of the verification code will also be automatically saved. Enter the session. When the user logs in, the text content of the verification code can be obtained through session.getAttribute("kaptchaCode").

However, many times, the content returned by the verification code interface is relatively rich, which may not only be pictures, but also other information. Therefore, directly configuring a Servlet cannot meet our requirements. We can only write the verification code interface ourselves. If we write it ourselves, we have to save the verification code image into the session ourselves, then

properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, " kaptchaCode"); The configuration is actually useless and you don’t need to add it.

2. Customize the verification code text

Of course, we can also customize the verification code text. We only need to provide an implementation class of the verification code text, as follows:

public class KaptchaTextCreator extends DefaultTextCreator {
    private static final String[] CNUMBERS = "0,1,2,3,4,5,6,7,8,9,10".split(",");

    @Override
    public String getText() {
        Integer result = 0;
        Random random = new Random();
        int x = random.nextInt(10);
        int y = random.nextInt(10);
        StringBuilder suChinese = new StringBuilder();
        int randomoperands = (int) Math.round(Math.random() * 2);
        if (randomoperands == 0) {
            result = x * y;
            suChinese.append(CNUMBERS[x]);
            suChinese.append("*");
            suChinese.append(CNUMBERS[y]);
        } else if (randomoperands == 1) {
            if (!(x == 0) && y % x == 0) {
                result = y / x;
                suChinese.append(CNUMBERS[y]);
                suChinese.append("/");
                suChinese.append(CNUMBERS[x]);
            } else {
                result = x + y;
                suChinese.append(CNUMBERS[x]);
                suChinese.append("+");
                suChinese.append(CNUMBERS[y]);
            }
        } else if (randomoperands == 2) {
            if (x >= y) {
                result = x - y;
                suChinese.append(CNUMBERS[x]);
                suChinese.append("-");
                suChinese.append(CNUMBERS[y]);
            } else {
                result = y - x;
                suChinese.append(CNUMBERS[y]);
                suChinese.append("-");
                suChinese.append(CNUMBERS[x]);
            }
        } else {
            result = x + y;
            suChinese.append(CNUMBERS[x]);
            suChinese.append("+");
            suChinese.append(CNUMBERS[y]);
        }
        suChinese.append("=?@" + result);
        return suChinese.toString();
    }
}

This code is not difficult to understand. The generated verification code text is similar to a string like

1 1=?@2.

In the future, @ will be used as the dividing line, the string content in front of @ will be drawn on the picture, the content after @ will be stored in the session, and compared with the content uploaded by the user.

Of course, we also need to add the following attributes when configuring the verification code to modify the providing class of the verification code text:

properties.setProperty(KAPTCHA_TEXTPRODUCER_IMPL, "org.javaboy.tienchin.framework.config.KaptchaTextCreator");

After the configuration is completed, this verification code will be used directly in the interface in the future That's it. When using it, pay attention to splitting the generated verification code text and processing it. Part of it is used for drawing and part of it is used to save it in the session.

The above is the detailed content of How to implement verification code with SpringBoot+kaptcha. For more information, please follow other related articles on the PHP Chinese website!