Comment implémenter le code de vérification avec SpringBoot+kaptcha

1. Utilisation de base

kaptcha est un très ancien outil de génération de code de vérification. Quel âge a-t-il ? Datant de 2006.

Après tant d'années, non seulement il n'est pas solitaire mais il est toujours utilisé par de nombreuses personnes, ce qui montre sa vitalité et mérite notre étude.

Pour plus de commodité, nous créerons un projet Spring Boot pour démontrer son utilisation.

Créez d'abord un nouveau projet Spring Boot, puis ajoutez la dépendance kaptcha, comme suit :

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

Ensuite, il suffit de fournir un Bean pour configurer Kaptcha, comme suit :

@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;
    }
}

Configurez chaque valeur d'attribut du code de vérification image dans DefaultKaptcha. La signification de chaque attribut est commentée dans le code, je n’en dirai donc pas plus.

Ensuite, nous renvoyons l'image du code de vérification dans l'interface, comme suit :

@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());
}

Ici, j'écris l'image sur le front-end sous la forme d'un flux IO. Bien sûr, elle peut également être convertie en chaîne Base64 et renvoyée. l'avant. La même chose est vraie, OK.

Attendez, il semble manquer quelque chose !

Nous n'avons pas stocké le texte du code de vérification généré dans la session, il ne serait donc pas possible de le vérifier lors de la connexion. Certains amis diront peut-être : n'est-ce pas simple ? Ne suffit-il pas de simplement l'enregistrer dans l'interface ?

NONONON !

Regardez, lorsque nous configurons le bean DefaultKaptcha, il y a une ligne de code properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode"); Cette ligne de code signifie que la vérification générée sera automatiquement le code. le texte est stocké dans la session et la CLÉ de la session est kaptchaCode. Cependant, lors de tests réels, vous constaterez que le code ci-dessus ne stocke pas le texte généré par le code de vérification dans la session. properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");，这行代码的意思就是说会自动将生成的验证码文本存入到 session 中，并且 session 的 KEY 是 kaptchaCode。但是在实际测试中，大家会发现上面的代码并不会将验证码生成的文本存入到 session 中。

原因在于 Kaptcha 工具实际上自己提供了一个生成验证码图片的 Servlet，如果我们直接使用它自己提供的验证码 Servlet，那么上面这个配置才会生效，在 Spring Boot 中，如果想要配置 Kaptcha 自己提供的 Servlet，方式如下：

@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;
}

项目启动后，直接访问 /img 就能看到验证码图片，此时验证码的文本也会自动存入到 session 中。当用户登录的时候，通过 session.getAttribute("kaptchaCode") 就可以获取到验证码的文本内容。

然而很多时候，验证码接口返回的内容都是比较丰富的，可能不仅仅是图片，还有其他信息。所以我们直接配一个 Servlet 并不能满足我们的要求，只能自己写验证码的接口，自己写的话，就要自己把验证码图片存到 session 中去，那么 properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode"); 配置其实就没用了，可以不用加。

2. 自定义验证码文本

当然，我们也可以自定义验证码文本，只需要提供一个验证码文本的实现类即可，如下：

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();
    }
}

这段代码并不难理解，生成的验证码文本类似于 1+1=?@2

La raison est que l'outil Kaptcha fournit en fait un servlet qui génère des images de code de vérification. Si nous utilisons directement le servlet de code de vérification qu'il fournit, alors la configuration ci-dessus prendra effet dans Spring Boot, si vous souhaitez configurer Kaptcha lui-même. à condition que le servlet soit le suivant :

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

Après le démarrage du projet, vous pouvez voir l'image du code de vérification en accédant directement à /img. À ce moment, le texte du code de vérification sera également automatiquement stocké. dans la séance. Lorsque l'utilisateur se connecte, le contenu textuel du code de vérification peut être obtenu via session.getAttribute("kaptchaCode").

Cependant, il arrive souvent que le contenu renvoyé par l'interface du code de vérification soit relativement riche, il peut s'agir non seulement d'images, mais également d'autres informations. Par conséquent, configurer directement un servlet ne peut pas répondre à nos exigences. Nous ne pouvons écrire l'interface du code de vérification que nous-mêmes. Si nous l'écrivons nous-mêmes, nous devons enregistrer nous-mêmes l'image du code de vérification dans la session, puis properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, " kaptchaCode"); La configuration est en fait inutile et vous n'avez pas besoin de l'ajouter.

2. Personnaliser le texte du code de vérification🎜🎜Bien sûr, nous pouvons également personnaliser le texte du code de vérification. Il nous suffit de fournir une classe d'implémentation du texte du code de vérification, comme suit : 🎜rrreee🎜Ce code n'est pas difficile à comprendre. .Le texte du code de vérification généré est similaire à une chaîne comme 1+1=?@2. 🎜🎜À l'avenir, nous utiliserons @ comme ligne de démarcation, dessinerons le contenu de la chaîne devant @ sur l'image, enregistrerons le contenu après @ dans la session et le comparerons avec le contenu téléchargé par l'utilisateur. 🎜🎜Bien sûr, nous devons également ajouter les attributs suivants lors de la configuration du code de vérification pour modifier la classe fournissant le texte du code de vérification : 🎜rrreee🎜Une fois la configuration terminée, vous pouvez utiliser ce code de vérification directement dans l'interface du futur Lorsque vous l'utilisez, faites attention à Le texte du code de vérification généré est divisé et traité, une partie est utilisée pour le dessin et une partie est utilisée pour l'enregistrer dans la session. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!