首页 前端知识 Hutool图形验证码的使用——Spring和Vue前后端交互实现验证码登录

Hutool图形验证码的使用——Spring和Vue前后端交互实现验证码登录

2024-06-04 10:06:52 前端知识 前端哥 60 166 我要收藏

目录

前言

一、Hutool简介

二、后端操作

1、安装依赖

2、图形验证码接口

3、登录接口

三、前端操作

1、请求头与响应头的配置

2、验证码的显示

2.1 Blob格式是什么

2.2 URL.createObjectURL()方法

四、总结 


前言

  图形验证码在阻止恶意程序进行大量非法操作有着较为广泛的应用,同时,作为一种全自动的图灵测试,图形验证码确保只有人类才能完成指定任务,从而区分合法用户和机器模拟的请求。那么,如何在自己的项目中实现一个图形验证码呢?如何利用前后端的交互实现一个需要图形验证码的场景呢?下面,我将利用Hutool工具来实现登录过程中的图形验证码场景。最终效果如下图所示:

Hutool官方文档:https://loolly_admin.oschina.io/hutool-site/docs/#/

一、Hutool简介

  Hutool是一个针对Java开发人员设计的小而全的Java工具类库,其目标是通过提供一系列静态方法封装常用API,以简化日常编程工作,降低开发者的学习成本,并显著提升开发效率。Hutool在设计上追求简洁、易用和高效,使得Java开发者可以更专注于业务逻辑的实现,而不是花费大量时间处理基础功能的编码。Hutool的主要特点包括:

  • 静态方法封装:提供了大量的静态方法,方便直接调用,无需实例化对象。
  • 广泛的功能覆盖:包含了日期时间处理、字符串操作、集合工具、文件操作、HTTP客户端、IO流操作、加密解密、数学计算、反射工具、线程与并发工具、验证码生成等多个模块,几乎涵盖了Java开发中常见的各种底层代码需求。
  • 函数式语言般的优雅:通过精简的API接口设计,使得使用Hutool进行开发时可以像函数式语言那样便捷、流畅。
  • 降低学习成本:整合了大量常用功能,减少了开发者对众多第三方库的学习负担,尤其是对于小型项目或解决小问题时,可以直接依赖Hutool完成任务。

  验证码功能位于cn.hutool.captcha包中,下面将介绍如何使用其提供的验证码功能。 后端采用的是Springboot,前端采用的是Vue2。

二、后端操作

1、安装依赖

  在正式写代码之前,需要导入我们的Hutool工具。如果项目是采用Maven进行构建的,可以在pom.xml文件中添加以下几行配置信息:

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.26</version>
</dependency>

  如果项目是利用Gradlle进行构建的,可以在其配置文件中添加如下信息,这里的版本可以根据自己的需求选择:

implementation 'cn.hutool:hutool-all:5.8.26'

  博主的项目是基于Gradle构建的,以下是我的依赖配置情况:

2、图形验证码接口

   将依赖导入进来后,便可以开始写我们的Java代码了,下面是一个在Controller层写的生成图形验证码的例子:

 private final static String SESSION_KEY = "captcha";    // 验证码session key 
   
    //获取图形验证码
    @GetMapping("/captcha")
    public void generateCaptcha(HttpServletResponse response) throws Exception {
        // 创建一个线型验证码实例
        LineCaptcha captcha = CaptchaUtil.createLineCaptcha(100, 40, 4,40); // 宽度、高度、字符和干扰线数量可自定义

        // 设置验证码内容和输出到http响应
        String code = captcha.getCode(); // 获取验证码文本内容
        captcha.write(response.getOutputStream()); // 输出图片到浏览器

        //将验证码内容存入响应头中
        response.setHeader(SESSION_KEY, code);//这里的SESSION_KEY是我在前面自定义的一个常量字符串

    }

  在这里,我将验证码内容存入到了响应头中,目的是前端请求到验证码后,可以在响应体的响应头中拿到验证码对应的文本内容,将文本内容携带到下一次请求的请求头当中,后端再从请求头中拿到文本内容,与前端用户输入的验证码进行比较,以此判断用户输入的验证码是否正确。

  下面,我们可以在浏览器输入相应的后端地址进行测试,如果能得到验证码,说明这一步成功了!

  除了线型验证码实例,还有圆圈、扭曲等实例,大家可以参照官方文档。下面是CaptchaUtil这个工具类中的一些方法,大家在书写代码的时候可以跳到这个类中查看相应的注释信息,更好地理解方法的用途以及如何使用。

3、登录接口

  接下来,需要实现用户登录接口,校验用户填写的验证码是否正确,以下是在Controller层写的一个登录接口示例:

/**
 * 后台登录dto
 */
@Data
public class BackStageLoginDTO {
    private String account;     //账号
    private String password;    //密码
    private String code;        //验证码
}
  @Autowired
  LoginService loginService;

  //管理后台登录接口
  @PostMapping("/backstage/login")
  public Result<BackstageLoginInfo> backstageLogin(@RequestBody BackStageLoginDTO json, HttpServletRequest request) throws Exception {
      String captcha = request.getHeader(SESSION_KEY);//获取请求头中正确的验证码
      String code = json.getCode();//用户输入的验证码
      VerifyLegality.verifyStrIsEmpty(code, "请输入验证码!");//这个是我自己实现的用于校验一个字符串是否为空的方法。如果为空,则抛出“请输入验证码!”的异常。大家可以忽略这个。
      //不区分大小写进行校验
      if (!code.equalsIgnoreCase(captcha)) {
          throw new Exception("验证码错误");
      }
      BackstageLoginInfo data = loginService.backstageLogin(json);//调用登录逻辑
      return Result.success(data);
  }

  在这里,我们从请求头中获取正确的验证码信息,然后与用户输入的验证码进行校验;校验通过则执行接下来的登录逻辑,否则不进行登录。

三、前端操作

1、请求头与响应头的配置

   在创建的axios实例中添加相应的配置信息,配置获取验证码或者携带验证码的信息。

2、验证码的显示

  首先,写出前端的请求方法,需要返还的数据形式,具体如下图所示:

  接下来,在相应的登录界面导入这个请求方法,将请求到的二进制数据转换成临时的url进行渲染即可,具体如下图所示:

2.1 Blob格式是什么

  Blob(Binary Large Object)是一种数据格式,它代表不可变的原始二进制数据。在JavaScript和许多数据库系统中,Blob对象用于存储和处理任意类型的二进制数据,包括但不限于图像、音频、视频和其他非文本文件内容。在JavaScript环境中,Blob对象是一个内置的数据类型,可以用来表示一个无法直接读取或修改内部结构的二进制数据块。你可以创建Blob对象来封装从网络请求得到的数据流、用户上传的文件内容、或者由字符串、ArrayBuffer等转换而来的内容。

  Blob对象的核心特征:

  1. 不可变性:一旦创建,就不能更改其内容。
  2. 多用途:可用于任何类型的二进制数据,如图片、音频、视频或其他自定义二进制格式。
  3. MIME类型标识:可以通过type属性指定Blob对象所包含数据的MIME类型,帮助浏览器或其他处理程序理解数据的格式。
  4. 构造方式灵活:可以通过构造函数接收一个数组参数,该数组可以是ArrayBuffer、ArrayBufferView、Blob、DOMString等对象,以及一个描述这些数据的配置对象(如MIME类型)。

  例如,在JavaScript中创建一个简单的文本Blob对象:

var text = "Hello, World!";
var blob = new Blob([text], { type: "text/plain;charset=utf-8" });

  这个Blob对象现在就包含了“Hello, World!”文本,并且指定了MIME类型为"text/plain",这样当通过URL.createObjectURL()方法将其转化为一个URL时,浏览器会知道这是一个纯文本文件。

2.2 URL.createObjectURL()方法

  URL.createObjectURL() 是一个 JavaScript Web API 方法,它允许开发者基于给定的对象(通常是 Blob 或 File 类型)创建一个指向该对象的 URL。这个方法由全局构造函数 URL 的静态方法提供,返回一个 DOMString 类型的值,这个值代表了一个唯一的、临时的 URL,可以直接用在 <img><video><audio> 等标签的 src 属性上,或者通过 XMLHttpRequest 上传到服务器。

使用场景:

  • 图片预览:用户选择文件后,可以通过此方法生成一个可以立即显示在页面上的图片预览链接。
  • 文件操作:无需将大文件完整加载到内存中,就可以进行下载、预览或其他操作。

基本语法:

var blob = new Blob( /* content */, {type: "mime-type"});
var objectURL = URL.createObjectURL(blob);

  当调用 URL.createObjectURL(blob) 时,浏览器会在内部为指定的 Blob 对象创建一个指向其内容的本地URL,这个URL是不可跨域访问的,并且只在当前文档上下文中有效,也就是说,当文档卸载或执行 URL.revokeObjectURL() 来释放资源时,这个URL就不再可用。

重要提示

  • 创建的URL是暂时性的,为了防止内存泄漏,不再需要使用该URL时,应调用 URL.revokeObjectURL(objectURL) 来释放与之关联的内存资源。
  • 这个方法对于处理用户选择的文件尤其有用,例如从 <input type="file"> 控件中选择的图片或文档。

  总结起来,URL.createObjectURL() 是一种方便的方式,用于在不直接读取或转移二进制数据的情况下,通过URL引用和操作这些数据。

四、总结 

  路漫漫其修远兮,吾将上下而求索。 文章篇幅较长,感谢您能看到这里,博主水平有限,难免存在有不足的地方,欢迎各位大佬指出。让我们一起朝更好的方向努力前进吧!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10707.html
评论
发布的文章

js-jquery页面跳转集合

2024-06-08 22:06:13

echarts柱状图数据过多

2024-06-08 22:06:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!