当前位置： 首页 > news >正文

实现验证码功能

news 文章来源：https://blog.csdn.net/m0_73075027/article/details/136304946 2024/11/15 13:49:14

Kaptcha

文章目录

  • Kaptcha
    • 介绍
    • 插件使用介绍
      • 原理
      • 引入依赖
      • 生成验证码
    • 验证码小项目
      • 初始化前端代码
      • 约定前后端交互接口
        • 接口定义

介绍

Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具

https://code.google.com/archive/p/kaptcha

⽹上有很多⼈甚⾄公司基于Google的kaptcha进⾏了⼆次开发. 我们选择⼀个直接适配SpringBoot的开源项⽬

oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter (github.com)

插件使用介绍

基于GitHub项目来做介绍

原理

验证码可以客⼾端⽣成, 也可以服务器⽣成. 对于普通的字符验证码, 后端通常分两部分.

⼀是⽣成验证码内容, 根据验证码内容和⼲扰项等, ⽣成图⽚, 返回给客⼾端

⼆是把验证码内容存储起来, 校验时取出来进⾏对⽐.

kaptcha插件选择把验证码存储在Session⾥.

引入依赖

<dependency><groupId>com.oopsguy.kaptcha</groupId><artifactId>kaptcha-spring-boot-starter</artifactId><version>1.0.0-beta-2</version>
</dependency>

生成验证码

该插件提供了两种⽅式⽣成验证码

  • 通过代码来⽣成(参考⽂档: https://github.com/oopsguy/kaptcha-spring-boot/blob/master/README_zh-CN.md, 不再介绍)

  • 仅通过配置⽂件来⽣成验证码(推荐)

部分详细配置

配置项配置说明默认值
border设置验证码边框的颜色“255,255,255,255”
textProducerCharLength设置生成验证码的字符长度4
textProducerCharSpace设置生成验证码时字符之间的间距5
imageWidth设置验证码图片的宽度200
imageHeight设置验证码图片的高度50
noiseColor设置噪点的颜色“255,255,255,255”
fontColor设置字体颜色“0,0,0,255”
fontNames设置字体的名称，可以指定多个字体Arial, Courier
textProducerImpl设置生成验证码文本的实现类默认实现类
backgroundProducerImpl设置生成验证码背景的实现类默认实现类
noiseProducerImpl设置生成验证码噪点的实现类默认实现类
wordImpl设置生成验证码字符的实现类默认实现类
obscurificatorImpl设置字符模糊处理的实现类默认实现类
sessionKey设置存储验证码信息的 Session 键默认值
sessionDate设置存储验证码创建时间的 Session 键默认值
width设置验证码图片的宽度（同 imageWidth）200
height设置验证码图片的高度（同 imageHeight）50

验证码小项目

初始化前端代码

// success.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>

//index.html
<!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="/admin/captcha" 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', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {alert("验证码校验");});</script></body></html>

约定前后端交互接口

需求分析

后端需要提供两个服务

  1. ⽣成验证码, 并返回验证码

  2. 校验验证码是否正确: 校验验证码是否正确

接口定义

  1. 生成验证码

    请求

    GET/admin/captcha

    响应：图片

  2. 校验验证码是否正确

    请求：/admin/check

    POST /admin/checkcaptcha=xn8d

    captcha：用户输入的验证码

    响应：

    true

    根据用户输入的验证码，校验验证码是否正确

完善前端代码

<!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="/admin/captcha" 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', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({type:"get",url:"/admin/check",data:{inputCaptcha:$("#inputCaptcha").val()},success:function (result){if (result){// 页面跳转location.href="success.html"}else {alert("验证码失败，请重试");}}});});</script></body></html>

后端代码

package org.haobin.kaptcha;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpSession;
import java.util.Date;@RestController
@RequestMapping("/admin")
public class KaptchaController {public static final String KAPTCHA_SESSION_KEY = "KAPTCHA_SESSION_KEY";public static final String KAPTCHA_SESSION_DATE = "KAPTCHA_SESSION_DATE";public static final long TIME_OUT = 60 * 1000; // 1min 毫秒/*** 校验验证码是否正确** @param inputCaptcha 用户输入的验证码* @return*/@RequestMapping("/check")public boolean check(String inputCaptcha, HttpSession session) {// 1. 判断输入的验证码是否为空if (!StringUtils.hasLength(inputCaptcha)) {return false;}// 2. 获取生成的验证码// 正确的验证码（生成验证码）// 3. 比对 生成的验证码和输入的验证码是否一致// 4. 确认验证码是否过期String saveCaptcha = (String) session.getAttribute(KAPTCHA_SESSION_KEY);Date saveCaptchaDate = (Date) session.getAttribute(KAPTCHA_SESSION_DATE);// 不区分大小写if (inputCaptcha.equalsIgnoreCase(saveCaptcha)) {if (saveCaptchaDate != null || System.currentTimeMillis() - saveCaptchaDate.getTime() < TIME_OUT) {return true;}}return false;}
}

相关文章：

实现验证码功能

Kaptcha 文章目录 Kaptcha介绍插件使用介绍原理引入依赖生成验证码 验证码小项目初始化前端代码约定前后端交互接口接口定义 介绍 Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具 https://code.google.com/archive/p/kaptcha ⽹上有很多⼈甚⾄公司基于Google的kaptc…...

编程日记 2024/2/27 8:54:57

PyQt6的开发流程（密码生成小程序为例）

PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09; 文章目录 PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09;一、流程介绍与概览1. 界面与逻辑分离的开发流程2. PyQt6的开发流程 二、打开 designer.exe 创建文件三、用QT设计师绘制界面保存成ui1. QT常用…...

编程日记 2024/2/27 8:49:52

思腾云计算中心 | 5千平米超大空间，基础设施完善，提供裸金属GPU算力租赁业务

2021年&#xff0c;思腾合力全资收购包头市易慧信息科技有限公司&#xff0c;正式开启云计算业务。思腾云计算中心占地2400平米&#xff0c;位于包头市稀土高新区&#xff0c;毗邻多家知名企业&#xff0c;地理位置优越&#xff0c;交通便利&#xff0c;是区内重要的信息化产业…...

编程日记 2024/2/27 8:48:51

【Leetcode每日一题】二分查找 - 在排序数组中查找元素的第一个和最后一个位置（难度⭐⭐）（18）

1. 题目解析 Leetcode链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于找到给定目标值所在的数组下标区间&#xff0c;设计一个O(logn)的算法。 2. 算法原…...

编程日记 2024/2/27 8:47:50

远程连接 vscode 出错 “远程主机可能不符合 glibc 和 libstdc++ VS Code 服务器的先决条件”

原因&#xff1a; vscode 版本是 1.86&#xff0c;服务器上的 glibc 和 libstdc 版本不满足 要求(2.28 和 3.4.25)。 解决&#xff1a; 1、下载 1.85.2&#xff0c;解压直接运行 Code.exe。 2、回退 Remote-ssh 到 0.107.1。 参考&#xff1a; vscode 1.86版本远程ssh不兼容旧…...

编程日记 2024/2/27 8:45:48

Maven入门：Java项目构建和管理的利器

Maven入门&#xff1a;Java项目构建和管理的利器 Maven 是一个项目管理和综合工具&#xff0c;它基于项目对象模型&#xff08;POM&#xff09;概念。Maven 可以管理项目的构建、报告和文档。以下是一篇介绍 Maven 配置和应用的教程文章。 Maven简介 Maven 使用其核心概念 POM…...

编程日记 2024/2/27 8:44:47

《游戏引擎架构》 -- 学习4

资源及文件系统 文件系统 游戏引擎的文件系统API通常提供以下功能&#xff1a; 搜需路径&#xff1a;是含一串路径的字符串&#xff0c;各路径之间以特殊字符&#xff08;如冒号或分号&#xff09;分隔&#xff0c;找文件时就会从这些路径进行搜寻。例如在命令行下执行程序&a…...

编程日记 2024/2/27 8:41:44

Wagtail安装运行并结合内网穿透实现公网访问本地网站界面

文章目录 前言1. 安装并运行Wagtail1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具3. 实现Wagtail公网访问4. 固定的Wagtail公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xf…...

编程日记 2024/2/27 8:36:39

10分钟快速开始SkyWalking结合Springboot项目

10分钟快速开始SkyWalking结合Springboot项目 实习期间&#xff0c;公司让我去学习一下链路追踪如何集成到Springboot项目中。 为此有两个方案&#xff1a; 1.opentelementryjaegerprometheus opentelementry 收集器收集线上的metrics和traces&#xff0c;然后发送给jaeger和p…...

编程日记 2024/2/27 8:34:37

STM32—触摸键

目录 1 、 电路构成及原理图 2 、编写实现代码 3、代码讲解 4、烧录到开发板调试、验证代码 5、检验效果 此笔记基于朗峰 STM32F103 系列全集成开发板的记录。 1 、 电路构成及原理图 触摸键简单的了解就是一次电容的充放电过程。从原理图可以看出&#xff0c;触摸键 …...

编程日记 2024/2/27 8:33:36

python中字典（dict）原理及其操作

原理 Python中的字典&#xff08;Dictionary&#xff09;是一种基于哈希表&#xff08;Hash Table&#xff09;的实现&#xff0c;提供了高效的键值对&#xff08;Key-Value Pair&#xff09;存储和访问机制。了解字典的工作原理有助于更好地理解其性能特性以及为什么在某些情…...

编程日记 2024/2/27 8:32:35

​​​​​​​​​​​​​​.NET Core Web API实现微服务集群部署

​​​​​​​.NET Core Web API实现微服务集群部署 在.NET Core Web API中实现微服务集群部署通常涉及多个步骤&#xff0c;包括服务拆分、容器化、服务注册与发现、负载均衡等。以下是一个简化的步骤指南&#xff0c;用于在.NET Core中构建和部署微服务集群&#xff1a; 服…...

编程日记 2024/2/27 8:29:31

网络安全与信创产业发展：构建数字时代的护城河

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…...

编程日记 2024/2/27 8:20:21

外包干了3个月，技术倒退1年。。。

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…...

编程日记 2024/2/27 8:17:18

Unity发布webgl获取浏览器的URL

Unity发布webgl获取浏览器的URL Unity发布webgl之后获取浏览器的url 在unity中创建文件夹Plugins&#xff0c;然后添加添加文件UnityGetBrowserURL.jslib var GetUrlFunc {//获取地址栏的URLStringReturnValueFunction: function () {var returnStr window.top.location.hre…...

编程日记 2024/2/27 8:12:13

StarRocks实战——多维分析场景与落地实践

目录 一、OLAP 系统历史背景 1.1 历史背景与痛点 1.2 组件诉求 二、StarRocks 的特点和优势 2.1 极致的查询性能 2.2 丰富的导入方式 2.3 StarRocks 的优势特点 三、多维分析的运用场景 3.1 实时计算场景 / 家长监控中心 3.2 实时更新模型选择 3.2.1 更新模型UNIQU…...

编程日记 2024/2/27 8:11:12

golang 函数式编程库samber/mo使用： Result

golang 函数式编程库samber/mo使用&#xff1a; Result 如果您不了解samber/mo库&#xff0c; 请先阅读上一篇 Option &#xff0c; 这篇讲述结构体Result的使用 Result和Option区别 samber/mo有了Option&#xff0c; 为什么还有Result呢? 我们先看看定义&#xff1a; Opt…...

编程日记 2024/2/27 8:10:11

Python 实现 CHO 指标计算(济坚指数）：股票技术分析的利器系列（12）

Python 实现 CHO 指标计算(济坚指数&#xff09;&#xff1a;股票技术分析的利器系列&#xff08;12&#xff09; 介绍算法公式 代码rolling函数介绍核心代码计算 CHO 完整代码 介绍 CHO&#xff08;济坚指数&#xff09;是一种在金融领域中用于衡量市场波动性和风险的指数 先…...

编程日记 2024/2/27 8:05:04

MySQL的SQL语句

1.MySQL连接 连接命令一般是这样写的 mysql -h$ip -P$port -u$user -p比如:mysql -h127.0.0.1 -P3306 -uroot -p -h 指定连接的主机地址&#xff1b;-P 指定连接端口号&#xff1b;-u 指定用户名 -p指定用户名密码 2.SQL分类 DDL(Data Definition Language) 数据定义语言&…...

编程日记 2024/2/27 8:04:03

ABAP 发送带EXCEL邮件

前言 没啥特殊需求&#xff0c;就是有个库龄报表用户想整邮件发送 实现 用的最简单的XLS文件作为excel附件发送出去 观察XLS文件的纯文本格式&#xff0c;每列之间用TAB制表符分隔&#xff0c;每行之间用回车符分隔 思路也比较明确&#xff0c;在SAP中实现这种格式&#xf…...

编程日记 2024/2/27 8:02:02

Linux Nginx SSL 证书配置正确，扔展示不安全

Nginx SSL 配置 首先我能够确定自己的Nginx SSL是配置正确的&#xff1a; 问题展示 通过浏览器访问自己域名&#xff0c;点击不安全后查看证书&#xff0c;展示的证书并不是自己所配置的证书&#xff0c;如下&#xff1a; 通过curl -vvv https://域名访问返回的证书是过期…...

编程日记 2024/2/27 8:01:01

算法沉淀——动态规划之子数组、子串系列（上）（leetcode真题剖析）

算法沉淀——动态规划之子数组、子串系列 01.最大子数组和02.环形子数组的最大和03.乘积最大子数组04.乘积为正数的最长子数组长度 01.最大子数组和 题目链接&#xff1a;https://leetcode.cn/problems/maximum-subarray/、 给你一个整数数组 nums &#xff0c;请你找出一个具…...

编程日记 2024/2/27 7:57:57

Flutter GetX 之 暗黑模式

我们紧接上篇文章&#xff0c;今天继续讲解一下强大的 GetX 的另一个功能&#xff0c;就是 暗黑模式 &#xff0c;在iOS 13开始苹果的应用慢慢的都开始适配 暗黑模式&#xff0c;andr。oid 也慢慢的 开始跟进&#xff0c;截止到目前&#xff0c;商店的大部分应用都已经完成了 暗…...

编程日记 2024/2/27 7:55:56

SQLlabs46关

看看源码 最终我们的id是放到order by后面了 如果我们直接用列去排序 ?sortusername/password username&#xff1a; passward 可以看到顺序是不同的&#xff0c;当然第一列第二列第三列也可以&#xff0c;基本上都是这个原理&#xff0c;那怎么去实现注入呢&#xff0c;我…...

编程日记 2024/2/27 7:54:55

【Android移动开发】Windows10平台安装Android Studio与人工智能算法模型部署案例

目录 一、Android Studio下载地址二、开发环境JDK三、开始安装Android Studio四、案例展示与搭建五、人工智能算法模型移动端部署案例参考 一、Android Studio下载地址 https://developer.android.google.cn/studio/install.html 电脑配置要求&#xff1a; 下载保存在指定文…...

编程日记 2024/2/27 7:52:52

【IDEA】java 项目启动偶现Kotlin 版本问题 error:Kotlin:module was

一、问题描述&#xff1a; error:Kotlin:module was compiled with an incompatible version of kotlin the binary version of its metadata is二、问题原因&#xff1a; jar包版本冲突 三、解决方式&#xff1a; 1、Rebuild Project&#xff08;推荐☆&#xff09; 重新构…...

编程日记 2024/2/27 7:51:51

Jmeter系列（2）目录介绍

目录 Jmeter目录介绍bin目录docsextrasliblicensesprintable_docs Jmeter目录介绍 在学习Jmeter之前&#xff0c;需要先对工具的目录有些了解&#xff0c;也会方便后续的学习 bin目录 examplesCSV目录中有CSV样例jmeter.batwindow 启动文件jmeter.shMac/linux的启动文件jmete…...

编程日记 2024/2/27 7:50:50

vue基础操作（vue基础）

想到多少写多少把&#xff0c;其他的想起来了在写。也写了一些css的 input框的双向数据绑定 html <input value"123456" type"text" v-model"account" input"accou" class"bottom-line bottom" placeholder"请输入…...

编程日记 2024/2/27 7:49:49

EEA架构

概念 EEA&#xff08;Electrical/Electronic Architecture&#xff09;是一个综合性的概念&#xff0c;它涉及汽车电子电气系统的设计和整合。EEA是汽车上电气部件之间的相互关系&#xff0c;以及包含所有电气部件和电气系统所承载的逻辑功能的组织结构。它是系统的组织结构表…...

编程日记 2024/2/27 7:47:45

【物联网应用案例】牧场牛棚环境管理项目

众所周知&#xff0c;奶牛的健康和牛奶的产量在很大程度上取决于其所在的环境。对于牧场而言&#xff0c;牛棚内的环境更是至关重要。一个适宜的环境不仅能保证奶牛的舒适度&#xff0c;还能提高其产奶量&#xff0c;从而为牧场带来更多的经济效益。 为了更好地理解牛棚环境对…...

编程日记 2024/2/27 7:45:43

做做网站/企业网站优化方案案例

我们把黎曼积分推广一下.黎曼积分里要求对区间$[a,b]$进行任意的有限分割.我们看看对区间$[a,b]$进行任意的分割(有限或无限的分割)会发生什么事.更具体地叙述如下&#xff1a; 设$f$是闭区间$[a,b]$上的有界函数(之所以规定有界&#xff0c;是因为$[a,b]$上的无界函数不是黎曼…...

编程日记 2024/11/15 10:30:46

如何在网站上做咨询浮动窗口/关键词排名代发

java课程设计_通讯录_通讯簿.doc还剩45页未读&#xff0c;继续阅读下载文档到电脑&#xff0c;马上远离加班熬夜&#xff01;亲&#xff0c;很抱歉&#xff0c;此页已超出免费预览范围啦&#xff01;如果喜欢就下载吧&#xff0c;价低环保&#xff01;内容要点&#xff1a;impo…...

编程日记 2024/11/15 0:12:20

wordpress网站无法登陆/wordpress自助建站

本文是对《【硬刚大数据之学习路线篇】从零到大数据专家的学习指南(全面升级版)》的JVM部分补充。 1. String的基本特性 1.String：字符串，使用一对""引起来表示。 2.String声明为final的，不可被继承。 3.String实现了Serializable接口：表示字符串是支持序列化的…...

编程日记 2024/11/14 22:34:17

电子商务网站建设开发文档/搜索引擎优化哪些方面

这道题是让求派出机器人的最少数量&#xff0c;乍一看以为是简单的求最小路径覆盖&#xff0c;后来发现错了&#xff0c;因为有的点可以走多次&#xff0c;而二分中每个点只能走一次&#xff0c;所以要先用floyd进行传递闭包&#xff0c;然后用二分 #include<stdio.h> #i…...

编程日记 2024/11/14 20:40:53

ps怎么做网站页面/百度官网网站

阅读本文大概需要 2.8 分钟。来自&#xff1a;https://blog.csdn.net/xiaojimanman/article/details/18556703前几天&#xff0c;在其他网站上看到一个表情自动生成器&#xff0c;自己就试着做了一下&#xff0c;没想到还真给搞定了&#xff5e;目前&#xff0c;可以处理“臣妾…...

编程日记 2024/11/14 19:11:12

做网站店铺装修的软件/短视频seo询盘获客系统软件

为什么80%的码农都做不了架构师&#xff1f;>>> 1.启动python server python -m SimpleHTTPServer 2.mysql登录 获取超级权限 在终端输入代码 sudo su 输入完后获取超级权限 终端显示 sh-3.2# 输入本机密码&#xff08;Apple ID密码&#xff09; 接着通过绝对路径登…...

编程日记 2024/11/14 17:32:17