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

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

article 2024/11/4 13:41:26

本文通过HUTOOL实现：Hutool参考文档Hutool，Java工具集https://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方法只有一个OutputStream，ICaptcha实现类可以根据这个方法封装写出到文件等方法。

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());    
}

doGet方法：这是一个Servlet中处理HTTP GET请求的方法。当客户端（如浏览器）发送一个GET请求到服务器时，这个方法会被调用。
创建验证码：通过调用CaptchaUtil.createCircleCaptcha方法创建一个圆形验证码对象。这个方法接受四个参数：验证码图像的宽度、高度、字符数和干扰线数。
发送验证码到客户端：通过调用captcha.write方法，将验证码的图像数据写入到响应的输出流中。这样，当这个Servlet被访问时，客户端（如浏览器）就可以接收到并显示这个验证码图像。
获取会话：通过调用request.getSession(true)获取当前请求的会话。如果会话不存在，则创建一个新的会话。这里的true参数表示如果会话不存在，则创建一个新的会话。
保存验证码到会话：通过调用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.kler.cn/a/378763.html