Google Kaptcha 实现登录验证码（SSM 和 SpringBoot）

骑猪看日落 2021-06-26 16:06 508阅读 0赞

**目录**

一、效果图：

二、导入 jar 包

三、SSM 通过 Kaptcha 简单实现验证码

四、SpringBoot 通过 Kaptcha 简单实现验证码

五、Kaptcha 属性表

六、关注

--------------------

# 一、效果图： #

![70][]

# 二、导入 jar 包 #

1.由于这是大神写好封装起来的一个框架，所有我们使用前得先下载相关的 jar 包。

第一种：maven

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

第二种：lib

打开链接：[https://mvnrepository.com/artifact/com.github.penggle/kaptcha][https_mvnrepository.com_artifact_com.github.penggle_kaptcha]

![70 1][]

![70 2][]

# 三、SSM 通过 Kaptcha 简单实现验证码 #

直接在 web.xml 里面直接配置。

验证码的一些样式都是通过配置来实现的，下面是我自己使用的一个demo，如果需要更改字体颜色还有字体大小什么的等，可以自己根据注释来修改。不然直接复制粘贴也行。由于配置比较简单，不作过多解释，直接上代码。

<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        
        
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>135</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345975</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>43</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>black</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        
        <init-param>
            <param-name>kaptcha.textproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

3.前端验证码的显示实现

function changeVerifyCode(img){
    	img.src="../Kaptcha?" + Math.floor(Math.random()*100);
    }

解释：

验证码图片的链接 src 中的 "../Kaptcha"，这里的“Kaptcha”是要与刚刚 web.xml 中的 url-pattern 配置的值一样的，并非随便写的。

4.后端进行验证码的输入验证

实现思路：我是把验证码的验证单独写成一个静态类，然后在控制层里面直接调用就行。

验证码静态类：

public class CodeUtil {
        public static boolean checkVerifyCode(HttpServletRequest request){
            String verifyCodeExpected = (String)request.getSession().getAttribute(
                    com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
            //这里相当于 request.getParameter("verifyCodeActual");
            String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
            if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)){
                return false;
            }
            return true;
        }
    }

控制层调用代码：

if(!CodeUtil.checkVerifyCode(request)){
    	modelMap.put("success", false);
    	modelMap.put("errMsg", "输入了错误的验证码");
    	return modelMap;
    }	modelMap.put("success", false);
    	modelMap.put("errMsg", "输入了错误的验证码");
    	return modelMap;
    }

if 里面验证码不通过（错误）的时候，我自己做的一些处理，可以根据自己的实际情况进行修改。

SSM 环境下 Kaptcha 的使用就介绍完了。

# 四、SpringBoot 通过 Kaptcha 简单实现验证码 #

思路：将 xml 的形势转化成代码实现。

package com.example.demo.config;
    
    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 KaptchaController {
        @Bean(name="captchaProducer")
        public DefaultKaptcha getKaptchaBean(){
            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.image.width", "125");
            properties.setProperty("kaptcha.image.height", "45");
            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;
        }
    }

编写一个 controller 类。

package com.example.demo.controller;
    
    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.GetMapping;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.awt.image.BufferedImage;
    
    
    @Controller
    public class ChaController {
        @Autowired
        private Producer captchaProducer;
        @GetMapping("/getKaptchaImage")
        public void getKaptchaImage(HttpServletResponse response,HttpSession session) throws Exception {
    
            response.setDateHeader("Expires", 0);
    
            // Set standard HTTP/1.1 no-cache headers.
            response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
            // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
            response.addHeader("Cache-Control", "post-check=0, pre-check=0");
            // Set standard HTTP/1.0 no-cache header.
            response.setHeader("Pragma", "no-cache");
            // return a jpeg
            response.setContentType("image/jpeg");
            // create the text for the image
            String capText = captchaProducer.createText();
            // store the text in the session
            //request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
            //将验证码存到session
            session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
            // create the image with the text
            BufferedImage bi = captchaProducer.createImage(capText);
            ServletOutputStream out = response.getOutputStream();
            // write the data out
            ImageIO.write(bi, "jpg", out);
            try {
                out.flush();
            } finally {
                out.close();
            }
        }
    }

前端代码：

至于点击切换验证码还有后台如何接受验证，跟前面 SSM 的使用方法一样，这里就不再赘述。

我们可以直接启动 springboot 的项目，在浏览器上直接访问获取验证码的接口。

[http://localhost:8080/getKaptchaImage][http_localhost_8080_getKaptchaImage]

就能在浏览器上看到验证码的图片了，说明配置是成功的。

![70 3][]

# 五、Kaptcha 属性表 #

![70 4][]

![70 5][]

![70 6][]

![70 7][]

# 六、关注 #

希望这篇博客，对你有帮助。

更多干活关注我的微信公众号：

![70 8][]

[70]: /images/20210626/3f6be82fcfa34b93ae2508d04ef2f156.png
[https_mvnrepository.com_artifact_com.github.penggle_kaptcha]: https://mvnrepository.com/artifact/com.github.penggle/kaptcha
[70 1]: /images/20210626/dfcc2352259a426eb8686f1506ae9e3c.png
[70 2]: /images/20210626/38df9bd43dbc479a9d9c5a7d9fe74795.png
[http_localhost_8080_getKaptchaImage]: http://localhost:8080/getKaptchaImage
[70 3]: /images/20210626/96ea863258fd46159c810a46fbd86d75.png
[70 4]: /images/20210626/48fc314a847445ecb5dee2913bfd634a.png
[70 5]: /images/20210626/4582e717aa2a4973bf486be3a5f2b5b3.png
[70 6]: /images/20210626/89c6fdafe79f4a0bbc42964e74b81d09.png
[70 7]: /images/20210626/ae9979e970f74bd29a1a57e2157c92ac.png
[70 8]: /images/20210626/4288d68f8c464f14acddd0ae54ec9ae6.png