后端java——如何为你的网页设置一个验证码

news2024/11/27 18:28:08

目录

1、工具的准备

2.基本方法

3.实现类

4.实践

HTML文件:

 Java文件1:创建验证码

 Java文件2:验证验证码


本文通过HUTOOL实现:Hutool参考文档Hutool,Java工具集icon-default.png?t=O83Ahttps://hutool.cn/docs/#/

1、工具的准备

如果我们通过hutool来实现这个功能,我们需要提前安装hutool的jar包。

下载地址:Central Repository: cn/hutool/hutool-all/5.8.16 

将下载好的jar包放到eclipse的lib目录,我们project所有的jar包在这里放置:

 至此,工具准备完毕。

2.基本方法

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

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

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

3.实现类

1.LineCaptcha线段干扰的验证码(Java)

//定义图形验证码的长和宽
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");

验证码图片会输出的上面代码中定义的路径("d:/line.png"),效果如下: 

2.CircleCaptcha圆圈干扰的验证码(Java) 

//定义图形验证码的长、宽、验证码字符数、干扰元素个数
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
//CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);
//图形验证码写出,可以写出到文件,也可以写出到流
captcha.write("d:/circle.png");
//验证图形验证码的有效性,返回boolean值
captcha.verify("1234");

效果如下:

3.ShearCaptcha扭曲干扰验证码

//定义图形验证码的长、宽、验证码字符数、干扰线宽度
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
//ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);
//图形验证码写出,可以写出到文件,也可以写出到流
captcha.write("d:/shear.png");
//验证图形验证码的有效性,返回boolean值
captcha.verify("1234");

效果如下:

4.写出到浏览器输出 (servlet)

html:(在图片src传入)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<img alt="" src="Test">

</body>
</html>

servlet(get请求): 

ICaptcha captcha = ...;
captcha.write(response.getOutputStream());
//Servlet的OutputStream记得自行关闭哦!

  注意:servlet自己的output stream要关闭

4.实践

我们来实现一个让用户输入验证码,判断是否正确。

HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

	div{
		background: #e8f2fe;
	}
    img{
       	height:25px;
        width:90px;
    }
    input{
        height:25px;
        width:120px;
        text-align: center;
        }
    .btn{
        width:50px;
        padding:3px;
        cursor: pointer;
        background: #ddd;
        }
</style>
<script type="text/javascript">

$(function(){
	$(".btn").on("click",function(){
		//获取输入框中的用户输入
		var input=$(".captcha").val().trim()
		//切入后端
		$.ajax({
			url:"Login", //请求路径
			type:"get", //请求方式
			data:{
				input
			},
			success:function(value){
				alert(value)
                //刷新
                location.reload()
			},
			error:function(){
				alert("请求失败!")
			}
		})
	})
})
</script>
</head>
<body>

	 <div class="yzm">
	 		<h3>登录</h3>
            <input type="text" placeholder="请输入验证码" class="captcha">
            <img src="Test" alt="" onclick="this.src=this.src+'?'"> 
            <input type="button" value="登录" class="btn" >          
     </div>
        

</body>
</html>

对于验证码的处理,我设置了验证码点击更新的功能:

 <img src="Test" alt="" onclick="this.src=this.src+'?'"> 

  onclick="this.src=this.src+'?'" 属性是一个事件处理器,它定义了当用户点击图片时应该执行的动作。在这个例子中,当图片被点击时,它的 src 属性会被修改为当前的值加上一个问号(get请求申请),使浏览器重新加载图片。

        同时也连接了Login.java SERVLET

<script type="text/javascript">

$(function(){
	$(".btn").on("click",function(){
		//获取输入框中的用户输入
		var input=$(".captcha").val().trim()
		//切入后端
		$.ajax({
			url:"Login", //请求路径
			type:"get", //请求方式
			data:{
				input
			},
			success:function(value){
				alert(value)
                //刷新
                location.reload()
			},
			error:function(){
				alert("请求失败!")
			}
		})
	})
})
</script>

 Java文件1:创建验证码
// 定义一个处理GET请求的doGet方法  
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    // 创建一个圆形验证码对象,指定宽度为200像素,高度为100像素,字符数为4,干扰线数为20  
    CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);  
      
    // 将验证码的图像数据写入到响应的输出流中,这样客户端就可以接收到并显示验证码图像  
    captcha.write(response.getOutputStream());  
      
    // 获取当前请求的会话(如果会话不存在,则创建一个新的会话)  
    HttpSession session = request.getSession(true);    
      
    // 将会话中的"captchaCode"属性设置为验证码的字符序列,以便后续验证用户输入的验证码是否正确  
    // 这里captcha.getCode()返回的是验证码图像中显示的字符序列  
    session.setAttribute("captchaCode", captcha.getCode());    
}

  1. doGet方法:这是一个Servlet中处理HTTP GET请求的方法。当客户端(如浏览器)发送一个GET请求到服务器时,这个方法会被调用。

  2. 创建验证码:通过调用CaptchaUtil.createCircleCaptcha方法创建一个圆形验证码对象。这个方法接受四个参数:验证码图像的宽度、高度、字符数和干扰线数。

  3. 发送验证码到客户端:通过调用captcha.write方法,将验证码的图像数据写入到响应的输出流中。这样,当这个Servlet被访问时,客户端(如浏览器)就可以接收到并显示这个验证码图像。

  4. 获取会话:通过调用request.getSession(true)获取当前请求的会话。如果会话不存在,则创建一个新的会话。这里的true参数表示如果会话不存在,则创建一个新的会话。

  5. 保存验证码到会话:通过调用session.setAttribute方法,将会话中的"captchaCode"属性设置为验证码的字符序列。这样,在后续处理用户提交的表单时,可以从会话中获取这个验证码,并与用户输入的验证码进行比较,以验证用户输入的正确性。

 Java文件2:验证验证码
// 定义一个处理GET请求的doGet方法  
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    // 设置请求和响应的字符编码为UTF-8,以支持中文等多字节字符集  
    request.setCharacterEncoding("utf-8");  
    response.setCharacterEncoding("utf-8");  
      
    // 从请求中获取名为"Catchcode"的参数值,这通常是用户在表单中输入的值  
    String input = request.getParameter("captchaCode");  
      
    // 获取当前请求的会话对象,如果会话不存在,则创建一个新的会话  
    HttpSession session = request.getSession();  
      
    // 从会话中获取名为"input"的属性值,这通常是在用户提交表单之前设置的正确答案  
    String answer = (String) session.getAttribute("input");  
      
    // 定义一个字符串变量res,用于存储登录结果  
    String res = "";  
      
    // 比较用户输入的值与会话中存储的正确答案  
    if (input.equals(input)) {  
        // 如果两者相等,则登录成功  
        res = "登录成功";  
    } else {  
        // 如果不相等,则登录失败  
        res = "登录失败";  
    }  
      
    // 将登录结果写入到响应的输出流中,这样前端就可以接收到这个结果并显示给用户   
    response.getWriter().write(res);  
}

 其中:

 // 从会话中获取名为"input"的属性值,这通常是在用户提交表单之前设置的正确答案  
    String input = (String) session.getAttribute("input");  

(String):这是一个强制类型转换操作。getAttribute方法返回的是一个Object类型的对象,因为会话中的属性值可以是任何类型的对象。在这个例子中我们需要“input“属性存储的是一个字符串类型的值,因此我们需要将它从Object类型强制转换为String类型。

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

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

相关文章

【Python单元测试】pytest框架单元测试 配置 命令行操作 测试报告 覆盖率

单元测试&#xff08;unit test&#xff09;&#xff0c;简称UT。本文将介绍在Python项目中&#xff0c;pytest测试框架的安装&#xff0c;配置&#xff0c;执行&#xff0c;测试报告与覆盖率 pytest简介 pytest是一款流行的&#xff0c;简单易上手的单元测试框架&#xff0c;…

HTMLCSS:呈现的3D树之美

效果演示 这段代码通过HTML和CSS创建了一个具有3D效果的树的图形&#xff0c;包括分支、树干和阴影&#xff0c;通过自定义属性和复杂的变换实现了较为逼真的立体效果。 HTML <div class"container"><div class"tree"><div class"…

练习LabVIEW第三十八题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第三十八题&#xff1a; 创建一个VI&#xff0c;实现对按钮状态的指示和按钮“按下”持续时间简单计算功能&#xff0c;按…

HomeAssistant自定义组件学习-【二】

#要说的话# 前面把中盛科技的控制器组件写完了。稍稍熟悉了一些HA&#xff0c;现在准备写窗帘控制组件&#xff0c;构想的东西会比较多&#xff0c;估计有些难度&#xff0c;过程会比较长&#xff0c;边写边记录吧&#xff01; #设备和场景环境# 使用的是Novo的电机&#xf…

Linux脚本数组与字符串

文章目录 打印数组与长度数组遍历数组赋值下标索引访问切片追加()删除关联数组(像map)字符串字符拼接截取子串字符串长度字符串替换模式匹配截取分割字符串大小写转换 打印数组与长度 ${arrayName[*]} 打印数组${arrayName[]} 打印数组${#arrayName[*]} 打印数组长度${#arrayN…

闯关leetcode——3289. The Two Sneaky Numbers of Digitville

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/the-two-sneaky-numbers-of-digitville/description/ 内容 In the town of Digitville, there was a list of numbers called nums containing integers from 0 to n - 1. Each number was suppos…

#Jest进阶知识:整合 webpack 综合练习

这一小节&#xff0c;我们来做一个综合的练习&#xff0c;该练习会整合&#xff1a; typescriptwebpackjest 准备工作 首先创建项目目录&#xff0c;通过 npm init -y 进行初始化。 整个项目我们打算使用 typescript 进行开发&#xff0c;因此需要安装 typescript npm i t…

MATLAB——矩阵操作

内容源于b站清风数学建模 数学建模清风老师《MATLAB教程新手入门篇》https://www.bilibili.com/video/BV1dN4y1Q7Kt/ 目录 1.MATLAB中的向量 1.1向量创建方法 1.2向量元素的引用 1.3向量元素修改和删除 2.MATLAB矩阵操作 2.1矩阵创建方法 2.2矩阵元素的引用 2.3矩阵…

原生鸿蒙应用市场开发者服务的技术解析:从集成到应用发布的完整体验

文章目录 引言一、鸿蒙原生应用的高效开发二、用户隐私保护&#xff1a;安全访问管理三、开发者实用工具&#xff1a;应用分析与A/B测试四、应用审核与分发&#xff1a;快速上线4.1 应用加密&#xff1a;保护代码安全4.2 自动化测试与检测前移&#xff1a;提升应用质量 五、结语…

基于SSM+微信小程序的社团登录管理系统(社团1)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 2、项目技术 3、开发环境 4、功能介绍 1、项目介绍 基于SSM微信小程序的社团登录管理系统实现了管理员及社团、用户。 1、管理员实现了首页、用户管理、社团管理、社团信息管理、社…

虚拟化环境中的精简版 Android 操作系统 Microdroid

随着移动设备的普及和应用场景的多样化&#xff0c;安全性和隐私保护成为了移动操作系统的重要课题。Google推出的Microdroid&#xff0c;是一个专为虚拟化环境设计的精简版Android操作系统&#xff0c;旨在提供一个安全、隔离的执行环境。本文将详细介绍Microdroid的架构、功能…

手动搭建 Java Web 环境

操作场景 本文档介绍如何在 Linux 操作系统的腾讯云云服务器&#xff08;CVM&#xff09;上手动搭建 Java Web 环境。 进行手动搭建 Java Web 环境&#xff0c;您需要熟悉 Linux 命令&#xff0c;例如 CentOS 环境下通过 YUM 安装软件 等常用命令&#xff0c;并对所安装软件使…

WPF+MVVM案例实战与特效(二十四)- 粒子字体效果实现

文章目录 1、案例效果2、案例实现1、文件创建2.代码实现3、界面与功能代码3、总结1、案例效果 提示:这里可以添加本文要记录的大概内容: 2、案例实现 1、文件创建 打开 Wpf_Examples 项目,在 Views 文件夹下创建窗体界面 ParticleWindow.xaml,在 Models 文件夹下创建粒子…

「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制

高级动画可以显著提升用户体验&#xff0c;为应用界面带来更流畅的视觉效果。本篇将深入介绍鸿蒙框架的高级动画&#xff0c;包括弹性动画、透明度渐变和旋转缩放组合动画等示例。 关键词 高级动画弹性缓动自动动画缓动曲线 一、Animation 组件的高级缓动曲线 缓动曲线&#…

Golang--数组、切片、映射

1、数组 1.1 数组类型 var 数组名 [数组大小]数据类型 package main import "fmt"func main(){//1、定义一个数组var arr1 [5]intarr1[0] 100arr1[1] 200fmt.Println(arr1) //[100 200 0 0 0] } 1.2 数组的初始化方式 package main import "fmt" func …

Android音频进阶之PCM设备创建(九十三)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+…

【已解决】C# NPOI如何设置单元格格式

前言 设置单元格格式我们做表格必须要的一步&#xff0c;那么如何对单元格进行设置呢&#xff1f;直接上图看看效果图先&#xff0c;我做的是一个居中然后字体变化的操作&#xff0c;其他的查他的手册即可。 解决方法 直接上代码 IWorkbook excelDoc new XSSFWorkbook();…

系统学习算法:专题一 双指针

题目一&#xff1a; 算法原理&#xff1a; 首先我们可以对这道题目进行题目分类&#xff0c;像这种对数组以某种标准而进行一定的划分的题目&#xff0c;我们统称为数组分块问题&#xff0c;其中使用到的算法就是双指针算法&#xff0c;这里的指针并非真正int*这种&#xff0c…

Python异常检测 - LSTM(长短期记忆网络)

系列文章目录 Python异常检测- Isolation Forest&#xff08;孤立森林&#xff09; python异常检测 - 随机离群选择Stochastic Outlier Selection (SOS) python异常检测-局部异常因子&#xff08;LOF&#xff09;算法 Python异常检测- DBSCAN Python异常检测- 单类支持向量机(…

【双指针】【数之和】 LeetCode 633.平方数之和

算法思想&#xff1a; 双指针枚举i,j&#xff1b;类似三数之和 class Solution { public:bool judgeSquareSum(int c) {long long sum0;vector<int> dp;dp.push_back(0);long long start1;while(sum < c){sum start *start;if(sum>c) break;else dp.push_back(…