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

Day14-Servlet后端验证码的实现

news 来源：原创 2024/9/20 12:33:53

图片验证码的生成采用的是Kaptcha；

Kaptcha是一个高度可配置的验证码生成工具，由Google开源。它通过一系列配置文件和插件，实现了将验证码字符串自动转换成图片流，并可以与session进行关联，从而在验证过程中使用；

具体实现步骤如下：

第一步：添加依赖

        <dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>

第二步：配置验证码工具类

@WebServlet("/KaptchaCode")
public class Kaptcha extends HttpServlet {private Producer producer;@Overridepublic void init() {Properties properties = new Properties();//设置图片边框properties.setProperty("kaptcha.border", "yes");//设置图片边框为蓝色properties.setProperty("kaptcha.border.color", "blue");//背景颜色渐变开始properties.put("kaptcha.background.clear.from", "127,255,212");//背景颜色渐变结束properties.put("kaptcha.background.clear.to", "240,255,255");// 字体颜色properties.put("kaptcha.textproducer.font.color", "black");// 文字间隔properties.put("kaptcha.textproducer.char.space", "10");//如果需要去掉干扰线properties.put("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");// 字体properties.put("kaptcha.textproducer.font.names", "Arial,Courier,cmr10,宋体,楷体,微软雅黑");// 图片宽度properties.setProperty("kaptcha.image.width", "200");// 图片高度properties.setProperty("kaptcha.image.height", "50");// 从哪些字符中产生properties.setProperty("kaptcha.textproducer.char.string", "0123456789abcdefghijklmnopqrsduvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");// 字符个数properties.setProperty("kaptcha.textproducer.char.length", "4");Config config = new Config(properties);producer = config.getProducerImpl();}
//这里要注意了这个验证码生成只支持get方法@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 生成一个文本验证码String code = producer.createText();// 根据验证码文本生成一张图片BufferedImage image = producer.createImage(code);// 设置响应的内容类型为图片格式resp.setContentType("image/jpeg");// 将图片写入到响应的输出流中，以jpg格式保存ImageIO.write(image, "jpg", resp.getOutputStream());//session是给登录验证的逻辑代码传参的HttpSession session = req.getSession();session.setAttribute("code", code);}
}

第三步：前端/后端渲染代码引入

<%--Created by IntelliJ IDEA.User: 21222Date: 2024/7/29Time: 上午10:35To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生信息管理系统登录页</title>
<%--   这里的样式代码放在文章末尾了太占位置了--%>
</head>
<body>
<div class="box"><h1>学生信息管理系统登录页</h1><form action="/javaweb/Login" method="post"><div class="form-group"><label for="user">账号</label><input type="text" id="user" name="user" placeholder="请输入账号"></div><div class="form-group"><label for="pw">密码</label><input type="text" id="pw" name="pw" placeholder="请输入密码"></div><div class="captcha-container"><div class="form-group"><label for="yzm">验证码</label><input type="text" id="yzm" name="yzm" placeholder="请输入验证码"></div>
<%--            验证码的引入--%><img src="/javaweb/KaptchaCode" alt="验证码" width="120" onclick="this.src=this.src+'?'+Math.random()"></div><button type="submit">登录</button></form>
</div>
</body>
</html>

css样式代码

<style>body {font-family: Arial, sans-serif;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.box {width: 360px;background-color: #fff;border-radius: 10px;padding: 30px;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);display: flex;flex-direction: column;align-items: center;}h1 {font-size: 26px;margin-bottom: 20px;color: #333;text-align: center;}form {width: 100%;}.form-group {margin-bottom: 20px;display: flex;flex-direction: column;}.form-group label {margin-bottom: 5px;font-size: 14px;color: #555;}.form-group input[type="text"] {padding: 10px;border: 1px solid #ddd;border-radius: 5px;box-sizing: border-box;width: 100%;}.form-group input[type="text"]:focus {border-color: #4CAF50;outline: none;}.captcha-container {display: flex;align-items: center;margin-bottom: 20px;}.captcha-container img {margin-left: 10px;cursor: pointer;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}button {background-color: #4CAF50;color: white;padding: 12px 20px;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;transition: background-color 0.3s ease;width: 100%;}button:hover {background-color: #45a049;}</style>