验证码案例

news2025/1/10 14:06:42

目录

前言

一、Hutool工具介绍

1.1 Maven 

1.2 介绍

1.3 实现类 

二、验证码案例

2.1 需求

2.2 约定前后端交互接口

2.2.1 需求分析

2.2.2 接口定义

2.3 后端生成验证码

2.4 前端接收验证码图片

2.5 后端校验验证码

2.6  前端校验验证码

2.7 后端完整代码 

前言

        验证码实现方式很多，可以前端实现，也可以后端实现，网上也有比较多的插件或者工具包可以使用，咱们选择使用Hutool提供的小工具来实现。

一、Hutool工具介绍

        Hutool是一个Java工具包类库，对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装，组成各种Util工具类。Hutool官网：https://hutool.cn/

1.1 Maven 

如果你想在项目中使用Hutool中的某个模块，在项目的pom.xml的dependencies中加入以下内容：

<dependency>
    <groupId>cn.hutool</groupId>
	<artifactId>hutool-captcha</artifactId>
	<version>5.8.22</version>
</dependency>

1.2 介绍

验证码功能位于cn.hutool.captcha包中，核心接口为ICaptcha，此接口定义了以下方法：

  • createCode 创建验证码，实现类需同时生成随机验证码字符串和验证码图片
  • getCode 获取验证码的文字内容
  • verify 验证验证码是否正确，建议忽略大小写
  • write 将验证码图片写出到目标流中

其中write方法只有一个OutputStream，ICaptcha实现类可以根据这个方法封装写出到文件等方法。

AbstractCaptcha为一个ICaptcha抽象实现类，此类实现了验证码文本生成、非大小写敏感的验证、写出到流和文件等方法，通过继承此抽象类只需实现createImage方法定义图形生成规则即可。 

1.3 实现类 

LineCaptcha线段干扰的验证码

贴栗子：

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.core.lang.Console;

public class LineCaptchaTest {
    public static void main(String[] args) {
        //定义图形验证码的长和宽
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
        //图形验证码写出，可以写出到文件，也可以写出到流
        lineCaptcha.write("d:/line.png");
        //输出code
        Console.log(lineCaptcha.getCode());
        //验证图形验证码的有效性，返回boolean值
        lineCaptcha.verify("1234");

        //重新生成验证码
        lineCaptcha.createCode();
        lineCaptcha.write("d:/line.png");
        //新的验证码
        Console.log(lineCaptcha.getCode());
        //验证图形验证码的有效性，返回boolean值
        lineCaptcha.verify("1234");
    }
}

控制台截图生成的验证码：

 

在写入的路径中查看代码生成的验证码截图：

CircleCaptcha 圆圈干扰验证码 

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;
import cn.hutool.core.lang.Console;

public class CircleCaptchaTest {
    public static void main(String[] args) {
        //定义图形验证码的长、宽、验证码字符数、干扰元素个数
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
        //CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);
        //图形验证码写出，可以写出到文件，也可以写出到流
        captcha.write("d:/circle.png");
        //输出code
        Console.log(captcha.getCode());
        //验证图形验证码的有效性，返回boolean值
        captcha.verify("1234");
    }
}

 控制台截图生成的验证码：

 在写入的路径中查看代码生成的验证码截图：

ShearCaptcha 扭曲干扰验证码 

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import cn.hutool.core.lang.Console;

public class ShearCaptchaTest {
    public static void main(String[] args) {
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
        //ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);
        //图形验证码写出，可以写出到文件，也可以写出到流
        captcha.write("d:/shear.png");
        //输出code
        Console.log(captcha.getCode());
        //验证图形验证码的有效性，返回boolean值
        captcha.verify("1234");
    }
}

控制台截图生成的验证码：

在写入的路径中查看代码生成的验证码截图：

二、验证码案例

2.1 需求

需求如下：

  • 页面生成验证码
  • 输入验证码，点击提交，验证用户输入验证码是否正确，正确则进行页面跳转

2.2 约定前后端交互接口

2.2.1 需求分析

后端需要提供两个服务：

  • 生成验证码，并返回验证码
  • 校验验证码是否正确

2.2.2 接口定义

1、生成验证码：

url:/captcha/get

param:无

return：图片的内容

2、校验验证码

url:/captcha/check

param:inputCode

return:true/false

2.3 后端生成验证码

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;

@RestController
@RequestMapping("/captcha")
public class CaptchaController {
    @RequestMapping("/get")
    public void getCaptcha(HttpServletResponse response) {
        //定义图形验证码的长和宽
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
        //图像验证码写出，可以写出到文件，也可以写出到流，此处写出到流
        try {
            lineCaptcha.write(response.getOutputStream());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

小技巧：在我们每写完一个后端代码模块时，我们可以进行测试，看是否有错误，避免后续代码量过多发生错误时不知道哪块出错。

根据后端定义的url进行测试截图：

2.4 前端接收验证码图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>验证码</title>
  <style>
    #inputCaptcha {
      height: 30px;
      vertical-align: middle; 
    }
    #verificationCodeImg{
      vertical-align: middle; 
    }
    #checkCaptcha{
      height: 40px;
      width: 100px;
    }
  </style>
</head>

<body>
  <h1>输入验证码</h1>
  <div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    
    $("#verificationCodeImg").click(function(){
      $(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();
    });

    $("#checkCaptcha").click(function () {
        alert("验证码校验");
    });

  </script>
</body>

</html>

验证前端是否有问题：

2.5 后端校验验证码

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import com.example.demo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.util.Date;

@RestController
@RequestMapping("/captcha")
public class CaptchaController {
    private final static long session_valid_timeout = 60 * 1000;

    @Autowired
    private CaptchaProperties captchaProperties;
    
    @RequestMapping("/check")
    public Boolean check(HttpSession session, String inputCode) {
        //验证码输入的内容和用户输入的进行比较
        //从session获取信息
        if (!StringUtils.hasLength(inputCode)) {
            return false;
        }
        String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());
        Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());
        if (inputCode.equalsIgnoreCase(savedCode)) {
            //判断验证码是否过期
            if (saveDate != null && System.currentTimeMillis() - saveDate.getTime() < session_valid_timeout) {
                return true;
            }
            return true;
        }
        return false;
    }
}

检查校验验证码是否存在问题：

1、先查看后端生成的验证码

2、根据校验验证的url进行验证

        首先先输入错误的验证码观察返回ture或者false，如果返回false证明验证码输入错误或者过期，否则反正true。

先输入错误的验证码1234截图：

再输入正确的验证码截图：

2.6  前端校验验证码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>验证码</title>
  <style>
    #inputCaptcha {
      height: 30px;
      vertical-align: middle; 
    }
    #verificationCodeImg{
      vertical-align: middle; 
    }
    #checkCaptcha{
      height: 40px;
      width: 100px;
    }
  </style>
</head>

<body>
  <h1>输入验证码</h1>
  <div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    
    $("#verificationCodeImg").click(function(){
      $(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();
    });

    $("#checkCaptcha").click(function () {
        $.ajax({
          url: "/captcha/check",
          type: "post",
          data: {
            inputCode: $("#inputCaptcha").val()
          },
          success: function(result) {
            if (result) {
              location.href = "success.html";
            } else {
              alert("验证码错误或者过期");
            }
          }
        })
    });

  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证成功页</title>
</head>
<body>
    <h1>验证成功</h1>
</body>
</html>

运行截图：

 

 

2.7 后端完整代码 

package com.example.demo.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import com.example.demo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.util.Date;

@RestController
@RequestMapping("/captcha")
public class CaptchaController {
    private final static long session_valid_timeout = 60 * 1000;

    @Autowired
    private CaptchaProperties captchaProperties;

    @RequestMapping("/get")
    public void getCaptcha(HttpSession session, HttpServletResponse response) {
        //定义图形验证码的长和宽
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());
        //设置缓存类型
        response.setContentType("image/jpeg");
        //禁止缓存
        response.setHeader("Progma", "No-cache");
        //图像验证码写出，可以写出到文件，也可以写出到流，此处写出到流
        try {
            lineCaptcha.write(response.getOutputStream());
            //存储session
            session.setAttribute(captchaProperties.getSession().getKey(), lineCaptcha.getCode());
            session.setAttribute(captchaProperties.getSession().getDate(), new Date());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    @RequestMapping("/check")
    public Boolean check(HttpSession session, String inputCode) {
        //验证码输入的内容和用户输入的进行比较
        //从session获取信息
        if (!StringUtils.hasLength(inputCode)) {
            return false;
        }
        String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());
        Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());
        if (inputCode.equalsIgnoreCase(savedCode)) {
            //判断验证码是否过期
            if (saveDate != null && System.currentTimeMillis() - saveDate.getTime() < session_valid_timeout) {
                return true;
            }
        }
        return false;
    }
}

配置文件:

captcha:
  width: 200
  height: 100
  session:
    key: captcha_session_key
    date: captcha_session_date

captcha配置：

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Component
@ConfigurationProperties(prefix = "captcha")
@Data
public class CaptchaProperties {
    private Integer width;
    private Integer height;
    private Session session;

    @Data
    public static class Session {
        private String key;
        private String date;
    }
}

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1803755.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

App UI 风格，引领时尚

App UI 风格，引领时尚

App UI 风格&#xff0c;引领时尚
阅读更多...
[创业之路-114] ：互联网时代下的扁平化管理趋势与面临的挑战

[创业之路-114] ：互联网时代下的扁平化管理趋势与面临的挑战

目录 前言&#xff1a;扁平化管理的时代背景 一、扁平化管理的定义 二、扁平化管理的特点 三、扁平化管理的实施 四、扁平化管理的优势 五、偏平化管理的缺点 六、扁平化管理面临的挑战 七、扁平化管理条件和配套措施 7.1 扁平化管理的条件 7.2 扁平化管理的配套措施…
阅读更多...
车载诊断架构 - 引导诊断

车载诊断架构 - 引导诊断

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…
阅读更多...
老旧机子装linux——Xubuntu

老旧机子装linux——Xubuntu

目录 前言 正文 下载系统 ​编辑 制作系统盘&#xff1a; 安装界面 Xubuntu ​编辑 lubuntu 后语 前言 有两台电脑&#xff0c;一台装了Ubuntu22&#xff0c;一台装了debuntu。虽然debuntu界面与乌班图大体一样&#xff0c;但是编译器好像有点区别。由于机子为10年前的老…
阅读更多...
C 语言实现在终端里输出二维码

C 语言实现在终端里输出二维码

Mac 环境安装二维码库 brew install qrencode安装过程报权限问题执行以下命令 sudo chown -R 用户名 /usr/local/include /usr/local/lib chmod uw /usr/local/include /usr/local/lib#include <stdio.h> #include <qrencode.h>void print_qr_code(QRcode *qrcode…
阅读更多...
编译原理-语法分析（实验 C语言）

编译原理-语法分析（实验 C语言）

语法分析 1. 实验目的 编制一个递归下降分析程序&#xff0c;实现对词法分析程序所提供的单词序列的语法检查和结构分析 2. 实验要求 利用C语言编制递归下降分析程序&#xff0c;并对简单语言进行语法分析 2.1 待分析的简单语言的语法 用扩充的BNF表示如下&#xff1a; …
阅读更多...
腾讯元宝APP上线，AIGC产品的未来何去何从？

腾讯元宝APP上线，AIGC产品的未来何去何从？

目录 腾讯元宝APP上线&#xff0c;AIGC产品的未来何去何从&#xff1f; 一、大模型AIGC产品概览 二、使用体验分享 1. 百度大脑 2. 阿里巴巴的AliMe 3. 字节跳动的TikTok AI 4. 腾讯元宝APP 小结 三、独特优势和倾向选择 1. 字节豆包 2. 百度文心一言 3. 阿里通义千…
阅读更多...
[stm32]——uc/OS-III多任务程序

[stm32]——uc/OS-III多任务程序

目录 一、获取uC/OS-III源码 二、移植源代码 &#xff08;1&#xff09;建立工程文件 &#xff08;2&#xff09;移植uC/OS-III源码 &#xff08;3&#xff09;添加工程组件和头文件路径 &#xff08;4&#xff09;添加头文件路径 三、修改代码 总结 一、获取uC/OS-III源码 …
阅读更多...
大龄职场人的春招机遇：技术岗位主导，高薪与挑战并存

大龄职场人的春招机遇：技术岗位主导，高薪与挑战并存

随着6月毕业季的临近&#xff0c;大批年轻人即将涌入人才市场&#xff0c;为职场注入新鲜血液。然而&#xff0c;这也意味着一些职场人可能面临被“优化”的风险。近几年&#xff0c;职场环境呈现出明显的年轻化趋势&#xff0c;企业更倾向于招聘具有创新活力的青年人才&#x…
阅读更多...
170.二叉树：平衡二叉树（力扣）

170.二叉树：平衡二叉树（力扣）

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr, right(nullptr) {}* Tree…
阅读更多...
React + SpringBoot实现图片预览和视频在线播放，其中视频实现切片保存和分段播放

React + SpringBoot实现图片预览和视频在线播放，其中视频实现切片保存和分段播放

图片预览和视频在线播放 需求描述 实现播放视频的需求时&#xff0c;往往是前端直接加载一个mp4文件&#xff0c;这样做法在遇到视频文件较大时&#xff0c;容易造成卡顿&#xff0c;不能及时加载出来。我们可以将视频进行切片&#xff0c;然后分段加载。播放一点加载一点&am…
阅读更多...
openGauss系数据库逻辑复制实现双写

openGauss系数据库逻辑复制实现双写

本篇关于逻辑复制实现双写的案例&#xff0c;本来准备了3个环境&#xff0c;分别是306、501和505&#xff0c;奈何在5版本向3版本订阅的时候&#xff0c;出现了报错&#xff0c;但也将整个过程都记录下来吧。 环境准备 节点信息 MogDB# select version(); …
阅读更多...
【Linux】进程间通信之匿名管道

【Linux】进程间通信之匿名管道

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…
阅读更多...
易飞销货单出货时审核库存检查

易飞销货单出货时审核库存检查

公司接到一客户因品种多而数量少&#xff0c;单一出货计划行比较多&#xff0c;而只上了生产ERP易飞&#xff0c;审核时经常会出现倒催货&#xff0c;提前做销售单&#xff0c;行数有时超30行以上&#xff0c;审核跳窗报错时也不方便查找&#xff0c;特写一外挂程序&#xff0c…
阅读更多...
代码随想录算法训练营第36期DAY49

代码随想录算法训练营第36期DAY49

DAY49 139单词拆分 没有思路。 回溯法 回溯怎么做呢&#xff1a;拼接str&#xff0c;看能不能拼出来。注意每个单词能用多次&#xff0c;不是用了就没。 但是语法还是难写。 自己的思路不好&#xff0c;题解思路&#xff1a;枚举所有分割字符串&#xff0c;判断是否在字典…
阅读更多...
红队神器Evil-winrm的使用

红队神器Evil-winrm的使用

前言 Evil-winrm 工具最初是由 Hackplayers 团队开发的。开发该工具的目的是尽可能简化渗透测试&#xff0c;尤其是在 Microsoft Windows 环境中。 Evil-winrm 使用 PowerShell 远程协议 (PSRP)&#xff0c;且系统和网络管理员经常使用Windows Remote Management 协议进行上传和…
阅读更多...
哈尔滨三级等保测评需要测哪些设备？

哈尔滨三级等保测评需要测哪些设备？

哈尔滨三级等保测评需要测的设备&#xff0c;主要包括物理安全设备、网络安全设备和应用安全设备三大类别。这些设备在保障哈尔滨地区信息系统安全方面发挥着至关重要的作用。 首先&#xff0c;物理安全设备是确保信息系统实体安全的基础。在哈尔滨三级等保测评中&#xff0c;物…
阅读更多...
Deepin安装PostGresql

Deepin安装PostGresql

最近要把开发环境完全从Windows移到Deepin上&#xff0c;本次介绍在Deepin借助apt-get安装和配置数据库。同时可以用Dbever提供图形化管理工具。 安装PostGreSQL数据库和创建数据库 #安装postgresql zhanglianzhuzhanglianzhu-PC:/$ sudo apt-get install postgresql-16 正在…
阅读更多...
PyCharm中 Fitten Code插件的使用说明一

PyCharm中 Fitten Code插件的使用说明一

一. 简介 Fitten Code插件是是一款由非十大模型驱动的 AI 编程助手&#xff0c;它可以自动生成代码&#xff0c;提升开发效率&#xff0c;帮您调试 Bug&#xff0c;节省您的时间&#xff0c;另外还可以对话聊天&#xff0c;解决您编程碰到的问题。 前一篇文章学习了 PyCharm…
阅读更多...
mysql数据库密码破解

mysql数据库密码破解

一、Mysql数据库密码破解 ①一旦获取了网站一定的权限后&#xff0c;如果能够获取MSQL中保存用户数据&#xff0c;通过解密后&#xff0c;即可通过正常途径来访问数据库;一方面可以直接操作数据库中的数据&#xff0c;另一方面可以用来提升权限。 ②MySQL数据库用户密码跟其它…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023