JAVA登录页面验证码生成(前后端分离)

练习生10086

已于 2023-09-21 12:06:41 修改

阅读量493

点赞数

分类专栏： JAVA 文章标签： java

于 2023-09-11 20:24:48 首次发布

本文链接：https://blog.csdn.net/m0_70153762/article/details/132816784

版权

JAVA 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

效果图如下：

步骤：

1. 导入需要的包和类，包括FastJSON、User、Result、UserService和UserServiceImpl等。

2. 定义常量CODE_LENGTH和CODE_CHARS，分别表示验证码长度和验证码字符集。

3. 重写doGet方法，用于生成验证码图片。首先设置响应类型为图片，然后创建BufferedImage对象，设置图片大小和类型。接着获取Graphics2D对象，用于绘制图形。设置字体和背景色，生成随机验证码，并保存验证码到ServletContext中。绘制干扰线，最后将图片输出到客户端。

4. 重写doPost方法，用于处理登录请求。首先设置相应内容为JSON格式。然后从请求体中获取账号、密码和验证码。判断验证码是否正确，如果不正确则返回错误信息。验证账号和密码格式是否正确，如果不正确则返回错误信息。调用UserService的login方法进行登录验证，如果验证通过则生成JWT token和longToken，并将其设置到User对象中。最后返回成功信息和User对象。

5. 定义私有方法getRandomColor，用于获取随机颜色。

后端JAVA代码:

package com.csi.controller.user;

import com.alibaba.fastjson2.JSON;
import com.alibaba.fastjson2.JSONException;
import com.alibaba.fastjson2.JSONObject;
import com.csi.domain.User;
import com.csi.pojo.Result;
import com.csi.service.UserService;
import com.csi.service.impl.UserServiceImpl;
import com.csi.utils.JWTUtils;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Objects;
import java.util.Random;

@WebServlet("/user/loginController")
public class LoginController extends HttpServlet {

    private static final int CODE_LENGTH = 4; // 验证码长度
    private static final String CODE_CHARS = "023456789abcdefghijkmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; // 验证码字符集
    private Random random = new Random();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 设置响应类型为图片
        response.setContentType("image/jpeg");

        // 创建BufferedImage对象，设置图片大小和类型
        BufferedImage image = new BufferedImage(100, 40, BufferedImage.TYPE_INT_RGB);

        // 获取Graphics2D对象，用于绘制图形
        Graphics2D g = image.createGraphics();

        // 设置字体
        g.setFont(new Font("Times New Roman", Font.PLAIN, 28));

        // 设置背景色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, 100, 40);

        // 生成随机验证码
        StringBuilder code = new StringBuilder();
        for (int i = 0; i < CODE_LENGTH; i++) {
            char c = CODE_CHARS.charAt(random.nextInt(CODE_CHARS.length()));
            code.append(c);
            g.setColor(getRandomColor(20, 130));
            g.drawString(String.valueOf(c), 20 * i + 10, 30);
        }

        // 保存验证码到ServletContext中
        getServletContext().setAttribute("verifyCode", code.toString());

        // 绘制干扰线
        for (int i = 0; i < 10; i++) {
            g.setColor(getRandomColor(50, 200));
            g.drawLine(random.nextInt(80), random.nextInt(40), random.nextInt(80), random.nextInt(40));
        }

        // 将图片输出到客户端
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(image, "jpeg", out);
        out.flush();
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置相应内容
        resp.setContentType("application/json;charset=utf-8");

        // 获取ServletContext中保存的验证码
        String sessionVerifyCode = (String) getServletContext().getAttribute("verifyCode");

        // 从请求体中获取账号、密码和验证码
        BufferedReader reader = req.getReader();
        StringBuilder sb = new StringBuilder();
        String line;
        while ((line = reader.readLine()) != null) {
            sb.append(line);
        }
        JSONObject jsonObject = null;
        try {
            jsonObject = JSON.parseObject(sb.toString());
        } catch (JSONException e) {
            // 请求体中没有正确的JSON数据
            Result<User> result = new Result<>();
            result.setCode(400);
            result.setMsg("请求体中没有正确的JSON数据");
            result.setDatas(null);
            PrintWriter out = resp.getWriter();
            out.print(JSON.toJSONString(result));
            out.flush();
            out.close();
            return;
        }
        String loginAccount = jsonObject.getString("loginAccount");
        String loginPassword = jsonObject.getString("loginPassword");
        String verifyCode = jsonObject.getString("verifyCode");

        // 判断验证码是否正确
        if (!Objects.equals(verifyCode, sessionVerifyCode)) {
            Result<User> result = new Result<>();
            result.setCode(7001);
            result.setMsg("验证码错误");
            result.setDatas(null);
            PrintWriter out = resp.getWriter();
            out.print(JSON.toJSONString(result));
            out.flush();
            out.close();
            return;
        }

        // 验证账号和密码格式是否正确
        String accountReg = "^1[3456789]\\d{9}$"; // 手机号正则表达式
        String passwordReg = "^\\w{6,12}$"; // 密码正则表达式
        if (!loginAccount.matches(accountReg) || !loginPassword.matches(passwordReg)) {
            Result<User> result = new Result<>();
            result.setCode(400);
            result.setMsg("账号或密码格式不正确");
            result.setDatas(null);
            PrintWriter out = resp.getWriter();
            out.print(JSON.toJSONString(result));
            out.flush();
            out.close();
            return;
        }

        UserService userService = new UserServiceImpl();

        User user = userService.login(loginAccount, loginPassword);

        Result<User> result = new Result<>();
        if (user != null) {
            String token = JWTUtils.createJWT(1000 * 60 * 60 * 3, user.getUserId(), user.getRoles(),user.getUserNumber());
            user.setToken(token);
            String longToken = JWTUtils.createJWT(1000 * 60 * 60 * 24, user.getUserId(), user.getRoles(),user.getUserNumber());
            user.setLongToken(longToken);

            result.setCode(200);
            result.setMsg("success");
            result.setDatas(user);
        } else {
            result.setCode(7002);
            result.setMsg("密码错误!");
            result.setDatas(null);
        }

        PrintWriter out = resp.getWriter();
        out.print(JSON.toJSONString(result));
        out.flush();
        out.close();
    }

    /**
     * 获取随机颜色
     *
     * @param min 最小值
     * @param max 最大值
     * @return 随机颜色
     */
    private Color getRandomColor(int min, int max) {
        int r = random.nextInt(max - min) + min;
        int g = random.nextInt(max - min) + min;
        int b = random.nextInt(max - min) + min;
        return new Color(r, g, b);
    }
}

前端关键代码:

<div style="position: relative;" class="form-group has-feedback">
    <input type="text" class="form-control" placeholder="验证码" id="checkCode" name="checkCode" style="width: 200px;display: inline-block;" maxlength="4">
    <img src="http://localhost:8080/user/loginController" style="float: right;" id="verifyCodeImg">
 </div>

$(document).ready(function () {
     // 点击验证码图片时，重新生成验证码图片
     $("#verifyCodeImg").click(function () {
     $(this).attr('src', 'http://localhost:8080/user/loginController?' + Math.random());
     });
});