首页 > 其他分享 >一招帮你搞定验证码设置

一招帮你搞定验证码设置

时间:2024-11-02 22:45:51浏览次数:3  
标签:搞定 lineCaptcha 验证码 write captcha session input 一招

目录

一、准备环境

​编辑 二、配置环境

三、基础方法

四、验证码的一些常用类别

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

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

3.ShearCaptcha扭曲干扰验证码

4.写出到浏览器输出

5.自定义验证码 CodeGenerator

 五、通过实例来简述过程

1.一个简易html文件

2.创建生成验证码图片的Java文件

  ① 定义图形验证码的长、宽、验证码字符数、干扰线宽度

②将得到的验证码图片生成到浏览器

③存储生成验证码图片内的值

完整版本生成验证码图片

3.将图片放入前端

4.验证码登录判断

5.html中的jQuery部分

6.最后完善

六、完整Html代码


一、准备环境

首先,进入下载地址:Central Repository: cn/hutool/hutool-all/5.8.16

下载jar包,(选择如下标蓝的进行下载):

 二、配置环境

将下载好的jar包放到eclipse的lib目录 (这里是eclipse软件中存放jar包的目录):

【WebContent-->WEB-INF-->lib】

三、基础方法

(验证码实现的核心就是以下四条方法)

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

四、验证码的一些常用类别

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");

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.写出到浏览器输出

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

5.自定义验证码 CodeGenerator

 自定义纯数字的验证码(随机4位数字,可重复)

RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
lineCaptcha.setGenerator(randomGenerator);
// 重新生成code
lineCaptcha.createCode();

自定义验证码内容为四则运算方式 

ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 45, 4, 4);
captcha.setGenerator(new MathGenerator());
// 重新生成code
captcha.createCode();

 五、通过实例来简述过程

1.一个简易html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
        .container{
            background:rgb(210,222,232);
            margin: 100px auto;
            width:400px;
            height:150px;
            text-align: center;
        }
        h2{
            padding-top: 10px;
            font-family:simsun;
        }
        img{
        	height:30px;
            width:100px;
           
        }
        input{
            padding-top:10px;
            font-family:simsun;
            text-align: center;
        }
        .btn{
            width:50px;
            padding:5px 0;
            cursor: pointer;
            background: rgb(242,245,248);
            border:none;
        }
        
    </style>
    
</head>
<body>
    <div class="container">
        <h2>登录</h2>
        <input type="text" class="code" placeholder="请输入验证码">
        <img src="#" alt="验证码">
        <input type="button" value="登录" class="btn" >
    </div>
</body>
</html>

得到一个简易的登录界面: 

2.创建生成验证码图片的Java文件

(这里给出一个扭曲干扰验证码的例子,并且采用浏览器获得的途径)

  ① 定义图形验证码的长、宽、验证码字符数、干扰线宽度

ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);

②将得到的验证码图片生成到浏览器

captcha.write(response.getOutputStream());

③存储生成验证码图片内的值

(这里需要借用session存储;不了解session的可以先去看一眼这篇文章-->会话管理-帮你搞懂cookie&session(Java版本)-CSDN博客

//创建session存储
HttpSession session=request.getSession();
//用getCode()方法获取图片验证码的值并存入session
session.setAttribute("answer",captcha.getCode());

完整版本生成验证码图片

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//定义图形验证码的长、宽、验证码字符数、干扰线宽度
		ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
		//创建session存储
		HttpSession session=request.getSession();
		//用getCode()方法获取图片验证码的值并存入session
		session.setAttribute("answer",captcha.getCode());
		//将得到的验证码图片生成到浏览器
		captcha.write(response.getOutputStream());
		
	}

3.将图片放入前端

更改html文件中img的src部分,使之填写2.步骤Java文件的路径

<img src="../CodeCSDN" alt="验证码">

在前端得到:

4.验证码登录判断

 注意这里:

此处获取的session值是Object类型的,但是需要的是String类型,所以需要(String)强转一下:

//强转一下
String answer= (String) session.getAttribute("answer");

完整版本:
 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//防乱码
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//获取数据
		String input=request.getParameter("input");
		//获取session中正确的验证码值
		HttpSession session=request.getSession();
		//强转一下
		String answer= (String) session.getAttribute("answer");
		String res="";
		if(input.equals(answer)) {
			res="成功!";
		}else {
			res="失败!";
		}
		//后端给前端返回数据
		response.getWriter().write(res);
	}

5.html中的jQuery部分


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

6.最后完善

(点击图片刷新功能)

 元素身上可以绑属性,并不限于onclick等动作属性,懂得这个道理后,可以直接在元素身上绑定实现点击更新验证码 

<img src="../CodeCSDN" alt="验证码" onclick="this.src=this.src+'?'">

六、完整Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background:rgb(210,222,232);
            margin: 100px auto;
            width:400px;
            height:150px;
            text-align: center;
        }
        h2{
            padding-top: 10px;
            font-family:simsun;
        }
        img{
        	height:30px;
            width:100px;
           
        }
        input{
            padding-top:10px;
            font-family:simsun;
            text-align: center;
        }
        .btn{
            width:50px;
            padding:5px 0;
            cursor: pointer;
            background: rgb(242,245,248);
            border:none;
        }
        
    </style>
    <script src="../jQuery/jq.js"></script> <!-- 导入jQuery文件,不是路径自行更改 -->
    <script>
    	$(function(){
    		$(".btn").on("click",function(){
    			//获取输入框中的用户输入
        		var input=$(".code").val().trim()
        		//切入后端
        		$.ajax({
        			url:"../CodeAnswerCSDN", //请求路径
        			type:"get", //请求方式
        			data:{
        				input
        			},
        			success:function(value){
        				alert(value)
        				location.reload()
        			},
        			error:function(){
        				alert("请求失败!")
        			}
        		})
    		})
    	})
    </script>
</head>
<body>
    <div class="container">
        <h2>登录</h2>
        <input type="text" class="code" placeholder="请输入验证码">
        <img src="../CodeCSDN" alt="验证码" onclick="this.src=this.src+'?'">
        <input type="button" value="登录" class="btn" >
    </div>
</body>
</html>

以上即是前、后端实现验证码全过程。

标签:搞定,lineCaptcha,验证码,write,captcha,session,input,一招
From: https://blog.csdn.net/m0_74977981/article/details/143429284

相关文章

  • SpringBoot实现验证码案例
    目录实现逻辑前后端交互接口前端代码后端代码实现逻辑1、后端功能:随机生成验证码图片,并把交给前端、接收用户输入,验证用户输入的验证码是否正确、2、前端功能:显示验证码,提供输入框供用户输入他们看到的验证码,把用户输入的数据交给后端,接收后端返回的验证结果前后......
  • 如何借助Aibiye写出优质论文?一篇文章教你搞定毕业论文
    作为曾经常年被论文折磨的研究生,对于论文写作以及降重的问题,我自然有着一套自己的心得和技巧。想当年,我的论文也曾经历过从无到有,从高重复率到低重复率的蜕变,其中涉及到的ai工具,我在这里必须强推一个,那就是aibiye,具体网址一、论文生成如果大家时间紧、任务重,可以试试论文生成......
  • 自动化测试中的验证码处理
    在自动化测试中,处理验证码往往是一个挑战,尤其是图形验证码。每次刷新生成的验证码内容各不相同。获取验证码的方法通常有两种:获取验证码图片链接:例如src="http://example.com/getcaptcha/123",但这种方法有时并不可靠,因为通过链接访问的验证码可能与当前页面显示的验证码不一致。......
  • 验证码处理在自动化测试中的应用
    在进行自动化测试时,处理验证码是一项常见的挑战,特别是图形验证码。每次刷新都会生成新的验证码,因此我们可以采用以下两种方法来获取验证码:获取验证码图片链接:例如src="http://example.com/getcaptcha/123",但这种方式并不总是可靠,因为通过链接访问的验证码可能与当前页面显示的不......
  • 一步步教你部署网络唤醒服务器,轻松搞定设备睡眠、开机、关机与服务器端口检测
    文章目录......
  • 跨境从国内远程连接国外设备?从国外远程连接国内设备?巧用ToDesk即搞定
    ToDesk作为一款功能强大的远程控制软件,支持全球范围内的远程连接,包括从国内连接国外设备或从国外连接国内设备。当从事的工作涉及跨境任务,或者与亲友身处在异国,有远程协助操作的任务,这样的情况均适用。以下是关于ToDesk全球远控连接国外设备的详细解答,各位不妨跟着小编的科普与操......
  • 如何实现跨境设备操作?ToDesk远程控制加持全球节点轻松搞定
    随着近年来国际化水平的逐步提高,跨境的学习、交流、工作、旅行等已愈发常见。然而虽然交通出行也算方便,但针对频繁两地往来、海内外人员协助互动等,从省时、省力、省财力精力等成本方面考量,通过来回往返来解决却并非是一个最佳选项。那么,面向例如外资企业远程协助境外同事处理任务......
  • 实干派!网易易盾增强版滑块验证码,全方位讲解识别思路(含源码)
    注意,本文只提供学习的思路,严禁违反法律以及破坏信息系统等行为,本文只提供思路如有侵犯,请联系作者下架某盾的增强版滑块已经上线很久了,最近心血来潮想看一下这个验证码是骡子是马,我也翻阅了很多市面上的教程,都对该验证码有一定的简介,部分还停留在理论层面,本文将从浅到深......
  • 【开发日记】她趣介意时效超5分钟的付款交易。简单一招,应对!
    她趣介意时效超5分钟的付款交易。简单一招,应对!我们平台近期入网一个新客户是她趣。她趣这个企业比较关注下发时效,他们那边系统做了告警,当存在超5分钟时效的交易,就会发告警。然后,那边的人就来质问。并声称,现在只是放了3%的量,就总出现下发慢的交易,如果10月份依然存在,就不打算用我们......
  • 个微自动回复:让你轻松搞定大量消息无压力!
    对于很多销售客服来说,每天要面对成千上万的客户消息,有时难免会感觉到手忙脚乱。因此,微信自动回复就成为了很多人的需求和选择,它能帮助我们轻松应对大量消息。1、自动通过好友请求系统会根据你设定的规则自动处理所有好友请求。这样一来,你就可以告别一一手动通过,省下大量的时......