项目1在线交流平台-2.开发交流社区注册登录模块-4.使用谷歌Kaptcha发送验证码

参考牛客网高级项目教程

1. 编写 Kaptcha 配置类

环境准备

• 导入kaptcha包，由于没有spring关连的包，需要自己配置到spring中

<!--	注册码配置-->
		<dependency>
			<groupId>com.github.penggle</groupId>
			<artifactId>kaptcha</artifactId>
			<version>2.3.2</version>
		</dependency>

配置类设置

@Configuration

• 声明是配置类，能够被Spring识别
• 用于指定当前类是一个 spring 配置类， 当创建容器时会从该类上加载注解。 获取容器时需要使用

@Bean

作用:

• 该注解只能写在方法上，表明使用此方法创建一个对象，并且放入 spring 容器。
• 用此方法==可以将其他jar包中的类注入到IOC容器中==
• 相当于注册的bean，

属性:

• name：给当前@Bean 注解方法创建的对象指定一个名称(即 bean 的 id）。
• 如果不指定，这里的返回值就Bean的类型，方法名就是默认的bean的id！

细节:

• 当我们使用注解配置方法时，如果方法有参数，spring框架会去容器中查找有没有可用的bean对象。
  • 使用方法

• 查找的方式和Autowired注解的作用是一样的

Producer接口

• 主要实现这个接口，实现两个方法
  • 创建验证码文本字符串 createText()
  • 根据字符串创建验证码图片 createImage(String var1)

package com.google.code.kaptcha;

import java.awt.image.BufferedImage;

public interface Producer {
    // 根据字符串创建验证码图片
    BufferedImage createImage(String var1);
	// 创建验证码字符串
    String createText();
}

DefaultKaptcha

• Producer的实现类，目的是实例化这个实现类
• 也实现了Configurable接口，即可以通过读取配置，去设置这个实现类

Config

• Kaptcha的一个工具类，用来读取配置文件里的内容

Properties

• 配置类，可以在配置文件中定义key，value
• 也可以直接实例化配置类，在配置类中设置key，value，方便起见，本例采用此种方式

@Configuration
public class KaptchaConfig {
    @Bean
    public Producer kaptchaProducer() {
        // 配置类，相当于配置文件的作用
        Properties properties = new Properties();
        properties.setProperty("kaptcha.image.width", "100");
        properties.setProperty("kaptcha.image.height", "40");
        properties.setProperty("kaptcha.textproducer.font.size", "32");
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"); // 验证码字符串所有字符集
        properties.setProperty("kaptcha.textproducer.char.length", "4"); // 字符串个数
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise"); // 验证码的干扰方式：无

        // 实例化Producer的实现类
        DefaultKaptcha kaptcha = new DefaultKaptcha();
        Config config = new Config(properties); // 读取配置文件内容
        kaptcha.setConfig(config); // 用配置类去设置实现类
        return kaptcha; // 返回生成验证码的实现类
    }
}

2. 生成验证码的请求

设计思路

• 为设计动态刷新验证码，设计一个请求，专门生成随机字符串、图片

  • 即，每次访问这个请求，服务器都会给浏览器生成一个新的验证码，实现动态刷新效果
  • 直接将字符串、图片写给浏览器

• 然后将这个请求应用到登录表单页面中

  • 每次点击登录，都会重新刷新验证码
  • 或者在登录页面，点击刷新按钮，也可动态刷新验证码，需要用到jQuery实现动态JSP页面

生成动态验证码的请求设计

传入参数

• response,要用response向浏览器写验证码
• session，因要在登录页面需要输入验证码验证，且验证码信息敏感，存入session中

主逻辑

• 将生成验证码的接口注入

  @Autowired
  Producer kaptchaProducer;
  

• 生成验证码

• 将验证码存入session中

• 将服务器中生成的图片直接输出写给浏览器

response.setContentType(“image/png”)

• 写入前，先设置响应格式

ImageIO.write

• 向浏览器直接写入图片的工具类，ImageIO.write(image, “png”, os);

• OutputStream，用字节流写图片更好

/** 生成验证码图片网页*/
@RequestMapping(path = "/kaptcha", method = RequestMethod.GET)
public void getKaptcha(HttpServletResponse response, HttpSession session) {
    // 生成验证码
    String text = kaptchaProducer.createText();
    BufferedImage image = kaptchaProducer.createImage(text);
    
    // 将验证码存入session中
    session.setAttribute("kaptcha", text);
    
    // 将服务器中生成的图片直接输出写给浏览器
    response.setContentType("image/png");
    try {
        OutputStream os = response.getOutputStream();
        ImageIO.write(image, "png", os);
    } catch (IOException e) {
        logger.error("响应验证码失败：" + e.getMessage());
    }
}

测试结果

3. jQuery实现jsp动态刷新

JavaScript 和查询（Query）

jQuery函数声明

avascript:refresh_kaptcha()

• 只要点击刷新验证码，会走jQuery定义的函数

<div class="col-sm-4">
   <img th:src="@{/kaptcha}" style="width:100px;height:40px;" class="mr-2"/>
   <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
</div>

jQuery函数定义

var path

• JavaScript 语法，定义变量，路径拼接
  • 将项目路径名在global.js文件内定义为全局变量，方便今后维护
    • var CONTEXT_PATH = “/community”;
  • 由于要改变的路径url地址与原地址相同，且是静态图片，浏览器会误以为无需重新加载访问
    • 为解决这个问题，对浏览器作善意的引导，将路径名后面添加随机参数，不影响访问，也不同于原url

$("#kaptcha")

• id属性选择器，根据id属性查询标签对象

  • 扩展：常见选择器：
    • $(“#id 属性值”); id 选择器， 根据 id 查询标签对象
    • $(“标签名”); 标签名选择器， 根据指定的标签名查询标签对象
    • $(“.class 属性值”); 类型选择器， 可以根据 class 属性查询标签对象
    • *选择器： 表示任意的， 所有的元素
    • selector1， selector2 组合选择器： 合并选择器 1， 选择器 2 的结果并返回

  <div class="col-sm-4">
     <img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
     <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
  </div>
  

attr(“src”, path)

• attr(a, b) 方法，设置属性的值，将a的值设置为b

• 从而实现每次点击，将访问路径更新的操作

  • 扩展：
    • attr() 可以设置和获取属性的值， 不推荐操作 checked、 readOnly、 selected、 disabled 等等
      • attr 方法还可以操作非标准的属性。 比如自定义属性： abc,bbj
    • prop() 可以设置和获取属性的值,只推荐操作 checked、 readOnly、 selected、 disabled 等

  <script>
     function refresh_kaptcha() {
        var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();
        $("#kaptcha").attr("src", path);
     }
  </script>
  

测试结果