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

文章目录

• • 1. 编写 Kaptcha 配置类
  • • 环境准备
    • 配置类设置
    • • ==@Configuration==
      • ==@Bean==
      • ==Producer接口==
      • ==DefaultKaptcha==
      • ==Config==
      • ==Properties==
  • 2. 生成验证码的请求
  • • 设计思路
    • 生成动态验证码的请求设计
    • • 传入参数
      • 主逻辑
      • • ==response.setContentType("image/png")==
        • ==ImageIO.write==
    • 测试结果
  • 3. jQuery实现jsp动态刷新
  • • jQuery函数声明
    • • ==avascript:refresh_kaptcha()==
    • jQuery函数定义
    • • ==var path==
      • ==$("#kaptcha")==
      • ==attr("src", path)==
    • 测试结果

参考牛客网高级项目教程

1. 编写 Kaptcha 配置类

环境准备

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

<dependency><groupId>com.github.pengglegroupId><artifactId>kaptchaartifactId><version>2.3.2version>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 {@Beanpublic 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>
  

测试结果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！