使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能

简介: 使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能

前言


为了防止恶意软件对“登录”等需要验证码的功能进行暴力破解,网站通常会使用验证码来增加安全性。验证码通常由一些经处理后的不规则的数字,字母及线条组成,其中线条是为了防止机器人解析验证码的真实内容。这个案例用的知识比较基础,需要用到servlet、Ajax、awt来实现。效果如下图所示,鼠标在输入框失去焦点时,触发校验函数进行验证:


5ada22ada928416e877dfc32c893d58a.png

c8acda955e024926b5d7ea0bf9f2657a.png

1775ae04ec4d42969bb339c976899e05.png








哈哈哈,这个√和×有点丑啊,凑合看,反正没问题。


一.编写登录页login.jsp


本步主要完成以下的功能:


1.编写登录界面基本的元素


2.编写js程序,监听blur事件,输入框失去焦点时触发的函数


3.在校验函数中用ajax将用户输入的验证码传递给负责比对验证码的servlet


4.servlet对比,如果正确,则会返回√的图片,不正确会返回错×的图片


5.ajax将结果渲染到网页上


login.jsp的代码如下:


<%--
  Created by IntelliJ IDEA.
  User: 害恶细君
  Date: 2021/10/20
  Time: 12:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function (){
            //通过验证码输入框的blur事件来触发函数
            $("#checkCodeId").blur(function (){
                let checkCode=$("#checkCodeId").val();
                //在服务器端对验证码进行校验
                $.post("CheckCodeServlet",
                    "checkCode="+checkCode,
                    function (result) {
                    //根据返回的图片路径显示不同的提示图片
                    let resultHTML=$("<img src='"+result+"'height='115px' width='15px'/>");
                    $("#result").html(resultHTML);
                })
            })
        });
        //刷新验证码
        function reload($img){
            $img.attr("src","img.jsp?t="+(new Date().getTime()));
        }
    </script>
</head>
<body>
<table border="0">
    <tr>
        <td>验证码</td>
        <td><input type="text" name="checkCode" id="checkCodeId" size="4"></td>
        <!--点击图片,重新加载验证码,img为验证码图片-->
        <td><a href="javascript:reload($('img'))"><img src="img.png"/></a></td>
        <!--验证码校验结果的图片-->
        <td id="result"></td>
        <td>看不清? 点击验证码更换一张</td>
    </tr>
</table>
</body>
</html>


二.绘制验证码


MIME(Multipurpose Internet Mail Extension)多用途因特网邮件扩展协议。是描述信消息内容的因特网标准,用于设置文本,图像,音频,视频,以及其他应用程序专用的数据类型。开发者可以通过jsp中page指令的contentType属性设置页面的MIME类型。例如:contentType="image/jpeg"表示页面会被JPEG等图片格式。


下面通过设置MIME将一个jsp渲染成jpeg图片,用于生成验证码:


1.先编写img.jsp。代码如下:


<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %><%--
  Created by IntelliJ IDEA.
  User: 害恶细君
  Date: 2021/10/20
  Time: 16:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>img</title>
</head>
<body>
<!--定义一些全局方法-->
<%!
    //随机生成颜色
    public Color getColor(){
        Random random=new Random();
        int r=random.nextInt(256);
        int g=random.nextInt(256);
        int b=random.nextInt(256);
        return new Color(r,g,b);
    }
    //生成验证码(随机生成4位数字)
    public String getNum(){
        int ran= (int) (Math.random()*9000+1000);
        return String.valueOf(ran);
    }
%>
<%
    //禁用浏览器缓存,防止验证码不及时被加载
    response.setHeader("pragma","no-cache");
    response.setHeader("cache-control","no-cache");
    response.setDateHeader("expires",0);
    //设置验证码图片:宽80px,gao30px,颜色类型为RGB
    BufferedImage image=new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
    //创建画笔对象graphics
    Graphics graphics=image.getGraphics();
    //填充验证码图片的背景色:从(0,0)开始填充,填充宽度为80px,填充高度为30px
    graphics.fillRect(0,0,80,30);
    /*
    *在验证码图片上随机生成60条干扰线段
    * 线段的起始位置为(xBegin,yBegin),结束位置为(xEnd,yEnd)
    */
    for (int i=0;i<60;i++){
        Random random=new Random();
        int xBegin=random.nextInt(80);
        int yBegin=random.nextInt(30);
        int xEnd=random.nextInt(xBegin+10);
        int yEnd=random.nextInt(yBegin+10);
        //设置线条的颜色
        graphics.setColor(getColor());
        //绘制线条
        graphics.drawLine(xBegin,yBegin,xEnd,yEnd);
    }
    //设置验证码的字体格式:字体为serif,粗体,18像素
    graphics.setFont(new Font("serif",Font.BOLD,18));
    //设置验证码的字体颜色为黑色
    graphics.setColor(Color.black);
    //获取验证码
    String checkcode=getNum();
    //验证码的各个数字之间增加一些间隔(空格)
    StringBuffer sb=new StringBuffer();
    for (int i = 0; i < checkcode.length(); i++) {
        sb.append(checkcode.charAt(i)+" ");
    }
    //从坐标(15,20)开始绘制验证码
    graphics.drawString(sb.toString(),15,20);
    //将验证码的值放入session中,供后续使用
    session.setAttribute("CHECKCODE",checkcode);
    //将验证码绘制成JPEG格式
    ImageIO.write(image,"jpeg",response.getOutputStream());
    out.clear();
    //验证码会被其他页面所引用
    //JPEG格式的验证码生成后,会作为<img/>元素的src属性被其他页面引用
    out=pageContext.pushBody();
%>
</body>
</html>


三.编写Servlet


在这个servlet里校验用户输入的验证码


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取前端输入的验证码
        String checkCodeClient=req.getParameter("checkCode");
        String result= "imgs/wrong.png";
        //获取服务器端session中的验证码
        String checkcodeServlet= (String) req.getSession().getAttribute("CHECKCODE");
        if (checkCodeClient.equals(checkcodeServlet)){
            result="imgs/right.png";
        }
        //以IO的方式,返回result值(提示图片路径)
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter pw =resp.getWriter();
        pw.write(result);
        pw.flush();
        pw.close();
    }
}


okk,终于写完了,没想到居然写了快六千字,代码量有点小多啊。

接下来我要学后端框架了,先从Mybatis开始吧,那我们下期见,拜拜!

相关文章
|
7天前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
10天前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
20 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
2月前
|
SQL 前端开发 NoSQL
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求
|
2月前
|
NoSQL JavaScript Java
SpringBoot+Vue+Redis实现验证码功能、一个小时只允许发三次验证码。一次验证码有效期二分钟。SpringBoot整合Redis
这篇文章介绍了如何使用SpringBoot结合Vue和Redis实现验证码功能,包括验证码的有效期控制和一小时内发送次数的限制。
|
11月前
|
前端开发 JavaScript Java
淘东电商项目(24) -获取验证码功能
淘东电商项目(24) -获取验证码功能
54 0
|
12月前
|
前端开发 JavaScript 数据库
mui中使用ajax实现登录功能
mui中使用ajax实现登录功能
144 0
|
5月前
|
存储 安全 JavaScript
使用Python的Flask框架开发验证码登录功能
使用Python的Flask框架开发验证码登录功能
123 0
|
5月前
|
缓存 NoSQL 前端开发
一文搞懂Go整合captcha实现验证码功能
一文搞懂Go整合captcha实现验证码功能
75 0
|
5月前
|
JSON 开发工具 数据格式
App Inventor 2 接入阿里云短信服务,实现短信验证码功能
App Inventor 2 接入阿里云短信服务,实现短信验证码功能:发送短信验证码功能一般都是基于短信平台提供的sdk进行调用,这里是基于阿里云短信平台进行的开发。
180 1
|
5月前
|
前端开发 JavaScript
vue3实现验证码校验的功能
最近想实现使用vue3实现一个简易的前端验证码校验的功能,就花了点时间实现了,这只是一个简易版的,但是用在项目中是没有啥问题的,废话不多说,先来看下最终实现的效果。写着玩的 哈哈
282 0