JavaWeb篇-谷歌验证码的使用

╰+攻爆jí腚メ 2021-06-10 20:40 516阅读 0赞

# 谷歌验证码的使用 #

**引入**  
表单的重复提交会导致数据库多次插入相同数据，当加入验证码是可以避免此类事情的发生

> 表单重复提交有三种常见的情况：  
> 一：提交完表单。服务器使用请求转来进行页面跳转。这个时候，用户按下功能键 F5，就会发起最后一次的请求。  
> 造成表单重复提交问题。解决方法：使用重定向来进行跳转  
> 二：用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败，  
> 就会着急，然后多点了几次提交操作，也会造成表单重复提交。  
> 三：用户正常提交服务器。服务器也没有延迟，但是提交完成后，用户回退浏览器。重新提交。也会造成表单重复  
> 提交。

问题解决原理:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70]  
使用方法  
1、导入谷歌验证码的 jar 包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 1]  
2、在 web.xml 中去配置用于生成验证码的 Servlet 程序

<servlet>
            <servlet-name>KaptchaServlet</servlet-name>
            <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>KaptchaServlet</servlet-name>
            <url-pattern>/kaptcha.jpg</url-pattern>
        </servlet-mapping>

3、在表单中使用 img 标签去显示验证码图片并使用

4、在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用

// 获取 Session 中的验证码
            String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
            // 删除 Session 中的验证码
            req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);
    			...
          
    // 2、检查 验证码是否正确 === 写死,
            if (token!=null&&token.equalsIgnoreCase(code)) { }
    //

切换验证码:当验证码图片看不清时可点击图片切换

// 给验证码的图片，绑定单击事件
                $("#code_img").click(function () { 
                    // 在事件响应的function函数中有一个this对象。这个this对象，是当前正在响应事件的dom对象
                    // src属性表示验证码img标签的 图片路径。它可读，可写
                    // alert(this.src);
                    this.src = "${basePath}kaptcha.jpg?d=" + new Date();
                });

> 注：路径后面一定要加new Date()  
> 因为有写浏览器如果访问相同的地址会去缓存中查找，就刷新不了验证码了所以要加new Data（）使其访问地址不同，能刷新出验证码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70]: /images/20210516/732c67f1107b43f791f361c6f683188f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 1]: /images/20210516/76b6033daed44169b27cd299623b2239.png