maven_SSM项目如何实现验证码功能

验证码的作用

防止恶意注册，自动化程序批量注册。防止暴力破解。

1、这里我们使用goole的验证码生成器

由于直接在maven中引入依赖，没有找到。所以只能直接去下载jar包了。

链接：https://pan.baidu.com/s/1KANhJKI4sQCfkiroTVr0WA?pwd=29iv 
提取码：29iv 
这里是我下载好的，kaptcha-2.3.2.jar
下载好之后，将它添加到本地仓库

mvn install:install-file -Dfile=${下载jar包路径} -DgroupId=com.google.code.kaptcha -DartifactId=kaptcha -Dversion=2.3.2 -Dpackaging=jar

参考：一个Maven实现的验证码模块_Zachary1994的博客-CSDN博客

添加到本地仓库后，我们就可以在pom.xml中引入依赖了：

 2、接下来就是配置了

applicationContext.xml

    <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> 
        <property name="config"> 
            <bean class="com.google.code.kaptcha.util.Config">
                <constructor-arg>   
                    <props> 
                        <prop key="kaptcha.border">noprop>    
                        <prop key="kaptcha.image.width">200prop>
                        <prop key="kaptcha.image.height">50prop>
                        <prop key="kaptcha.textproducer.char.string">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890prop>
                        <prop key="kaptcha.textproducer.char.length">4prop>
                        <prop key="kaptcha.textproducer.font.size">40prop>
                        <prop key="kaptcha.textproducer.font.color">blackprop>
                        <prop key="kaptcha.textproducer.char.space">5prop>
                        <prop key="kaptcha.noise.color">blackprop>
                    props>
                constructor-arg>
            bean>
        property>
    bean>

springmvc的基础配置，前端控制器等就不说了

然后写controller

@Controller
public class CaptchaController {
    @Autowired
    private Producer captchaProducer;
    @GetMapping("/captcha")
    public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // 生成验证码文本
        String captchaText = captchaProducer.createText();
 
        // 将验证码文本存储在 Session中
        HttpSession session = request.getSession();
        session.setAttribute("captcha", captchaText);
 
        // 生成验证码图片
        BufferedImage captchaImage = captchaProducer.createImage(captchaText);
 
        // 将验证码图片输出到响应
        ServletOutputStream outputStream = response.getOutputStream();
        //该方法将验证码图像以JPG格式写入输出流
        ImageIO.write(captchaImage, "jpg", outputStream);
        outputStream.flush();
        outputStream.close();
    }
 
    @RequestMapping("/verification")
    @ResponseBody
    public String verification(String verification,HttpSession session){
        String captcha = (String) session.getAttribute("captcha");
//        System.out.println(captcha+"_"+verification);
        if(!verification.equals(captcha)){
            return "false";
        }else{
            return "true";
        }
    }
}

一个方法是生成验证码并相应到客户端，一个方法是后台验证(这里前端我是使用的ajax) 

前端

<div class="form-row">
        <input type="text" id="verification" name="verification" required><span class="verification-icon">span>
        <img src="${pageContext.request.contextPath}/captcha" alt="验证码" id="ka"/><img src="${pageContext.request.contextPath}/status/images/reset.png" id="reset" alt="刷新" title="刷新"/>
div>

 这里使用img标签的src属性直接请求controller将验证码显示。后面是一个刷新图片，要实现刷新验证码功能，这里使用JQuery为它绑定点击事件，通过更新src属性实现刷新

    // 获取刷新图片元素
    let resetImage = $("#reset");
    // 绑定点击事件
    resetImage.on("click", function() {
        refreshCaptcha();
    });
    // 刷新验证码函数
    function refreshCaptcha() {
        // 获取验证码图片元素
        let captchaImage = $("#ka");
        // 生成新的验证码URL
        let captchaUrl = contextPath + "/captcha?" + new Date().getTime();
        // 更新验证码图片的src属性
        captchaImage.attr("src", captchaUrl);
    }

至于验证码验证，我上面controller已经写好了验证方法，我是在验证码文本框失去焦点时使用ajax请求对验证码进行验证。这里可以通过自己的想法去调整更改。