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

news2024/11/20 22:39:00

验证码的作用

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

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

<!--Kaptcha 配置-->
    <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> <!--定义bean-->
        <property name="config"> <!--设置bean属性config-->
            <bean class="com.google.code.kaptcha.util.Config"><!--定义Config的bean，它是kaptcha的配置类-->
                <constructor-arg>   <!--设置`Config`bean的构造参数-->
                    <props> <!--定义一个属性列表，包含多个属性键值对-->
                        <prop key="kaptcha.border">no</prop>    <!--设置验证码图片的边框是否显示-->
                        <prop key="kaptcha.image.width">200</prop><!--设置验证码图片的宽度-->
                        <prop key="kaptcha.image.height">50</prop><!--设置验证码图片的高度-->
                        <prop key="kaptcha.textproducer.char.string">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</prop><!--设置验证码字符的取值范围-->
                        <prop key="kaptcha.textproducer.char.length">4</prop><!--设置验证码的字符长度-->
                        <prop key="kaptcha.textproducer.font.size">40</prop><!--设置验证码文字的字体大小-->
                        <prop key="kaptcha.textproducer.font.color">black</prop><!--设置验证码文字的字体颜色-->
                        <prop key="kaptcha.textproducer.char.space">5</prop><!--设置验证码字符之间的间距-->
                        <prop key="kaptcha.noise.color">black</prop><!--设置验证码干扰线的颜色-->
                    </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);
    }