验证码案例Java

原创已于 2022-11-02 22:25:27 修改 · 693 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #servlet #前端 #jquery #后端

于 2022-10-29 20:35:19 首次发布

本文介绍了验证码的概念，其主要作用是防止恶意破解和自动化操作。通过使用Java、Servlet、前端jQuery来实现验证码的生成和验证过程。文章详细阐述了所需工具如Hutool库和jQuery的获取，并给出了生成验证码及后端校验的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写代码之前让我们来先了解一下什么是验证码！
验证码（CAPTCHA）是一种区分用户是计算机还是人的公共全自动程序，一般在注册或者是输入重要信息的时候需要输入；一般验证码可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试；
好了既然已经知道什么是验证码了。那我们开始准备一下做验证码需要准备的工具

准备一个hutool jar 包，在准备一个jQuery文件，如果没有的话小伙伴们自行下载
地址：https://gitee.com/dromara/hutool
地址：https://jquery.com/

准备好之后我们就可以开始编写代码了
这是生成验证码的

package com.bjpowernode;
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
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;

//  动态生成验证码
@WebServlet("/imageCode")
public class ImageCodeServlet  extends HttpServlet {


    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //createLineCaptcha(宽度,高度,字符个数,干扰元素个数)
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(300, 100, 4, 6);
        //验证码图片中字符串 验证码字符串
        String code = lineCaptcha.getCode();//放在session
        // 把验证码存入到session
        req.getSession().setAttribute("sessionCode",code);
        //使用响应流 将验证码图片数据输出
        lineCaptcha.write(resp.getOutputStream());
    }
}

这是后台校验用户名密码和验证码的代码

package com.bjpowernode;

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("/service")
public class VerificationCodeServlet  extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 处理post 请求的中文乱码问题
        resp.setCharacterEncoding("utf-8");
        // 设置响应类型问html
        resp.setContentType("text/html;charset=utf-8");
        // 获取用户名
        String username = req.getParameter("username");
        // 获取密码
        String pwd = req.getParameter("pwd");
        // 获取验证码
        String code = req.getParameter("code");
        PrintWriter writer = resp.getWriter();

        System.out.println(username);
        System.out.println(pwd);
        System.out.println(code);
        //  首先校验 验证码
        if (code==null || code.equals("")) {
               writer.println("请输入验证码");
            return;
        }
        // 获取后台存储的code
        String sessionCode = (String) req.getSession().getAttribute("sessionCode");
        if (sessionCode==null|| sessionCode.equals("")){
            writer.println("输入的验证码错误");
            return;
        }
        // 忽略大小写 ，验证验证码是否正确
        if (!sessionCode.equalsIgnoreCase(code)){
            writer.println("输入的验证码错误");
            return;
        }
        // 如果三个if 条件都没有进去，说明 验证码是正确的
        //  调用业务层 处理 账号和密码 是否正确的 
        if ("admin".equals(username) && "123".equals(pwd)){
            writer.println("登录成功");
            return;
        }
        writer.println("登录失败");
        return;


    }
}

这是前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery-1.11.1-min.js"></script>
</head>
<body>
    <form action="/service" method="post" enctype="application/x-www-form-urlencoded">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="pwd"><br>
        验证码:<input type="text" name="code"> <img src="/imageCode" style="width: 100px; height: 30px;" onclick="changesCode()" id="Img"><br>
        <button type="submit">登录</button>
    </form>

    <script>
        function changesCode() {
            /*
                原生DOM写法
            let elementById = document.getElementById("Img");
            elementById.setAttribute("src","/imageCode?time=" + new Date());
            */

            $("#Img").prop("src","/imageCode?time=" + new Date());
        }
    </script>
</body>
</html>

学废了吗