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

本文通过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类型。

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java面试经典 150 题.P189. 轮转数组(006)

本题来自&#xff1a;力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解&#xff1a; class Solution {public void rotate(int[] nums, int k) {…

Cesium基础-(Entity)-(ellipsoid)

里边包含Vue、React框架代码详细步骤、以及代码详细解释 7、ellipsoid 球体与椭球体 Ellipsoid(椭球体)是 Cesium 中用来表示地球或其他天体形状的几何对象。在三维空间中,椭球体是一个被拉伸或压缩的球体,它由三个半径定义:沿着 x、y 和 z 轴的半径。这些半径确定了椭球体…

nvm详解

本文借鉴转载于 nvm文档手册 文章目录 1.nvm是什么&#xff1f;2.nvm安装2.1 window上安装下载链接安装步骤 2.2 Mac上安装使用homebrew 安装 nvm 3.nvm使用指令 1.nvm是什么&#xff1f; nvm&#xff08;Node Version Manager&#xff09;是一个用于管理和切换不同版本 Node.…

【辽宁】《辽宁省省级政务信息化建设项目预算支出标准规定(试行)》(辽财预〔2021〕54号)-省市费用标准解读系列04

《辽宁省省级政务信息化建设项目预算支出标准规定&#xff08;试行&#xff09;》&#xff08;辽财预〔2021〕54号&#xff09;是由辽宁省财政厅和辽宁省信息中心于2021年发布应用的信息化建设项目预算支出标准。我司基于专业第三方信息化项目造价机构角度&#xff0c;从标准创…

基于vue3和elementPlus的el-tree组件,实现树结构穿梭框,支持数据回显和懒加载

一、功能 功能描述 数据双向穿梭&#xff1a;支持从左侧向右侧转移数据&#xff0c;以及从右侧向左侧转移数据。懒加载支持&#xff1a;支持懒加载数据&#xff0c;适用于大数据量的情况。多种展示形式&#xff1a;右侧列表支持以树形结构或列表形式展示。全选与反选&#xf…

Python数据分析案例61——信贷风控评分卡模型(A卡)(scorecardpy 全面解析)

案例背景 虽然在效果上&#xff0c;传统的逻辑回归模型通常不如现代的机器学习模型&#xff0c;但在风控领域&#xff0c;解释性至关重要。逻辑回归的解释性是这些“黑箱”模型所无法比拟的&#xff0c;因此&#xff0c;研究传统的评分卡模型依然是有意义的。 传统的评分卡模型…

Canvas 教程(一)

目录 一、初体验 二、通过js的方式创建canvas 三、为什么推荐属性的方式设置canvas的宽高&#xff1f; 四、常见画笔API 4.1 画直线 &#x1f536; 步骤 &#x1fae2; 小练习 4.2 线条的样式 4.2.1 线条的宽度设置 &#x1f536; API 4.2.2 线条的颜色设置 &#…

[CISCN 2019华北]PWN1-好久不见7

Partial RELRO 表示部分 RELRO 保护已启用。在这种情况下&#xff0c;只有某些部分&#xff08;如 GOT 中的只读部分&#xff09;是只读的。 NX enabled 表示这个二进制文件启用了 NX 保护&#xff0c;数据段是不可执行的。这可以防止某些类型的代码注入攻击。 这里是ida识别…

Leetcode 64. 最小路径和 动态规划+空间优化

原题链接&#xff1a;Leetcode 64. 最小路径和 二维数据 class Solution { public:int minPathSum(vector<vector<int>>& grid) {int m grid.size();int n grid[0].size();int dp[m][n];dp[0][0] grid[0][0];for (int j 1; j < n; j)dp[0][j] dp[0][…

教你一个免费把PDF产品宣传册转化为翻页电子产品宣传册的方法

在这个数字化时代&#xff0c;电子宣传册已经成为企业推广产品的重要手段。相比于传统的纸质宣传册&#xff0c;电子宣传册具有更高的互动性和传播效率。那么&#xff0c;如何将现有的PDF产品宣传册转化为具有翻页效果的电子宣传册呢&#xff1f;本文将为您详细介绍一种免费的方…

大数阶乘求末尾0的个数

题目&#xff1a;求123…n所得数的末尾有多少个0&#xff1f;n由键盘输入&#xff0c;且1000<n<10000。 答&#xff1a;思路1&#xff1a;考虑末尾0的来源。阶乘结果末尾的零是由于因数10的存在&#xff0c;10分解质因数&#xff1a;25。在阶乘的计算中&#xff0c;偶数&…

2024最新的开源博客系统:vue3.x+SpringBoot 3.x 前后端分离

本文转载自&#xff1a;https://fangcaicoding.cn/article/54 大家好&#xff01;我是方才&#xff0c;目前是8人后端研发团队的负责人&#xff0c;拥有6年后端经验&3年团队管理经验&#xff0c;截止目前面试过近200位候选人&#xff0c;主导过单表上10亿、累计上100亿数据…

鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战 在鸿蒙生态下开发时&#xff0c;开发者可能会遇到多方面的挑战&#xff0c;这些挑战主要涉及开发工具、技术难度、生态竞争以及市场定位等方面。以下是对这些挑战的详细分析&#xff1a; 一、开发工具不完善 尽管鸿蒙系统的开发工具DevEco Studio在逐步完…

JavaScript的迭代器和生成器

1. 迭代器Iterator 1. 基本概念 JavaScript 表示集合的对象大致有Object&#xff0c;Array&#xff0c;Map&#xff0c;Set四种&#xff0c;并且这四种类型的数据之间可以相互以成员嵌套&#xff08;如Array的成员可以是Object&#xff0c;而Map又可以嵌入Object的成员中&am…

深度学习常用开源数据集介绍【持续更新】

DIV2K 介绍&#xff1a;DIV2K是一个专为 图像超分辨率&#xff08;SR&#xff09; 任务设计的高质量数据集&#xff0c;广泛应用于计算机视觉领域的研究和开发。它包含800张高分辨率&#xff08;HR&#xff09;训练图像和100张高分辨率验证图像&#xff0c;每张图像都具有极高…

Pinia-状态管理

Pinia-状态管理 特点&#xff1a; 1. 轻量和模块化 Pinia 是一个轻量级的状态管理库&#xff0c;支持模块化管理&#xff0c;即可以将应用的状态分成多个 store 以实现更好的组织。使用 Pinia&#xff0c;可以定义多个 store&#xff0c;每个 store 都是一个独立的模块&#x…

向量模型Jina Embedding: 从v1到v3论文笔记

文章目录 Jina Embedding: 从v1到v3Jina Embedding v1数据集准备训练过程 Jina Embedding v2预训练修改版BERT在文本对上微调在Hard Negatives上微调 Jina Embedding v2 双语言预训练修改版BERT在文本对上微调用多任务目标微调 Jina Embedding v3预训练在文本对上微调训练任务相…

修改HarmonyOS鸿蒙图标和名字,打包后安装到真机,应用图标丢失变成透明,修改名字也不生效,还是默认的labeL解决方案教程

HarmonyOS鸿蒙打包hap 安装应用到桌面没有图标&#xff0c;用hdc安装到真机&#xff0c;打包后应用图标丢失变成透明&#xff0c;名字也还是默认的label的bug&#xff0c;以下是解决方案 以下是修改方案&#xff1a; 1、修改应用名字&#xff1a; 2、修改应用图标&#xff1a…

3个模型的交互式多模型IMM,基于EKF的目标跟踪实例(附MATLAB代码)

文章目录 3个模型的IMM源代码运行结果代码介绍总结 3个模型的IMM 代码实现了基于 I M M IMM IMM&#xff08;Interacting Multiple Model&#xff09;算法的目标跟踪。它使用三种不同的运动模型&#xff08;匀速直线运动、左转弯和右转弯&#xff09;来预测目标的位置&#x…

Webservice 客户端 生成代码 cxf方式 jdk方式 wsdl保存到本地后,生成客户端代码

详解视频&#xff0c;如果看不懂图片&#xff0c;请看这个视频 客户端三种方式 jdk cxf 客户单 wsdl保存到本地后&#xff0c;生成客户端代码