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