javaWeb 、Springboot 生成验证码

最新推荐文章于 2024-07-24 00:03:51 发布
最新推荐文章于 2024-07-24 00:03:51 发布
阅读量294 收藏
点赞数
分类专栏： springboot java html5 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45834006/article/details/108351458
版权
springboot 同时被 3 个专栏收录
86 篇文章 2 订阅
订阅专栏
java
24 篇文章 0 订阅
订阅专栏
html5
9 篇文章 0 订阅
订阅专栏

自定义生成验证码类：

package com.file.utlis;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

/**
 * @author 19417
 */
@RestController
public class SecurityCodeUtil {


    @Autowired
    private RedisTemplate<String, Object> redisTemplate;
    // 常用字符集
    private char[] data = "ZXCVBNMASDFGHJKLPOIUYTREWQabcdefghijklmnopqrstuvwxyz0123456789".toCharArray();
    //随机验证码胡Session中的名称
    private String code = "";

    public static final int WIDTH = 120;
    public static final int HEIGHT = 30;


    @GetMapping("/verifCode")
    public void getCode(HttpServletResponse response, HttpServletRequest request) throws IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);// 创建缓存

        Graphics graphics = image.getGraphics();// 获得画布
        setBackGround(graphics);// 设置背影色
        setBorder(graphics);// 设置边框
        drawRandomLine(graphics);// 画干扰线
        String random = drawRandomNum((Graphics2D) graphics);// 写随机数

        //核心代码：将随机字符存在redis中 单体项目放在 session中即可
        redisTemplate.opsForValue().set("verifCode", random);

        response.setContentType("image/jpeg");// 将图形写给浏览器
        // 发头控制浏览器不要缓存
        response.setDateHeader("expries", -1);
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Pragma", "no-cache");

        ImageIO.write(image, "jpg", response.getOutputStream());// 将图片写给浏览器
    }

    // 设置背景色
    private void setBackGround(Graphics g) {
        g.setColor(Color.WHITE);// 设置颜色
        g.fillRect(0, 0, WIDTH, HEIGHT);// 填充区域

    }


    //设置边框
    private void setBorder(Graphics g) {
        g.setColor(Color.BLUE);// 设置边框颜色
        g.drawRect(1, 1, WIDTH - 2, HEIGHT - 2);// 边框区域
    }


    // 画随机线条
    private void drawRandomLine(Graphics g) {
        g.setColor(Color.GREEN);// 设置颜色
        for (int i = 0; i < 5; i++) {// 设置线条个数并画线
            int x1 = new Random().nextInt(WIDTH);
            int y1 = new Random().nextInt(HEIGHT);
            int x2 = new Random().nextInt(WIDTH);
            int y2 = new Random().nextInt(HEIGHT);
            g.drawLine(x1, y1, x2, y2);
        }
    }


    // 画随机汉字
    private String drawRandomNum(Graphics2D g) {
        StringBuffer sb = new StringBuffer();

        g.setColor(Color.RED);// 设置颜色

        g.setFont(new Font("宋体", Font.BOLD, 24));// 设置字体
        int x = 5;// 控制字数

        for (int i = 0; i < 4; i++) {
            int degree = new Random().nextInt() % 30;// 设置字体旋转角度

            String ch = data[new Random().nextInt(data.length)] + "";// 截取汉字
            sb.append(ch);

            g.rotate(degree * Math.PI / 180, x, 20);// 正向角度
            g.drawString(ch, x, 20);
            // 反向角度
            g.rotate(-degree * Math.PI / 180, x, 20);
            x += 30;
        }
        return sb.toString();
    }



     //用于比对用户输入的验证码是否正确 逻辑自己定义即可
    @PostMapping("/checkCode")
    public boolean checkCode(HttpServletRequest request) {
        String code = request.getParameter("code");

        return true;

    }
}

登陆页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        body {
            background: #1E9FFF;
        }

        body:after {
            content: '';
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -o-filter: blur(3px);
            -ms-filter: blur(3px);
            filter: blur(3px);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .layui-container {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .admin-login-background {
            width: 360px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -180px;
            margin-top: -100px;
        }

        .logo-title {
            text-align: center;
            letter-spacing: 2px;
            padding: 14px 0;
        }

        .logo-title h1 {
            color: #1E9FFF;
            font-size: 25px;
            font-weight: bold;
        }

        .login-form {
            background-color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 14px 20px;
            box-shadow: 0 0 8px #eeeeee;
        }

        .login-form .layui-form-item {
            position: relative;
        }

        .login-form .layui-form-item label {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2;
        }

        .login-form .layui-form-item input {
            padding-left: 36px;
        }

        .captcha {
            width: 60%;
            display: inline-block;
        }

        .captcha-img {
            display: inline-block;
            width: 34%;
            float: right;
        }

        .captcha-img img {
            height: 34px;
            border: 1px solid #e6e6e6;
            height: 36px;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>LayuiMini后台登录</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="username"></label>
                    <input type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱"
                           autocomplete="off" class="layui-input" value="root">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="password"></label>
                    <input type="password" name="password" lay-verify="required|password" placeholder="密码"
                           autocomplete="off" class="layui-input" value="root">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" name="captcha" id="codeInput" lay-verify="required|captcha" placeholder="图形验证码"
                           autocomplete="off" class="layui-input verification captcha"  value="xszg">
                    <span id="tip"></span>
                    <div class="captcha-img">
                        <img id="captchaPic"  src="http://localhost:8080/verifCode"  alt="验证码获取时 端口号错误"   >
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button  type="submit" class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="login"
                            lay-filter="login">登 入
                    </button>
                    <br>
                    <br>
                    <button type="reset" class="layui-btn layui-btn layui-btn-normal layui-btn-fluid">重置</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="js/glubo.js" charset="utf-8"></script>
<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>



<script>
    layui.use(['table', 'form', 'jquery', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function () {
            $('.layui-container').particleground({
                dotColor: '#7ec7fd',
                lineColor: '#7ec7fd'
            });
        });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            }


            $.post(httpurl + "/login", {
                'username':  data.username,
                'password': data.password
            }, function (res) {
                if (res) {
                    layer.msg('登录成功', {icon: 6}, function () {
                        window.location = 'index.html';
                    });
                } else {
                    layer.msg('登录失败', {icon: 5}, function () {
                        window.location = 'login.html';
                    });
                }
            });


            return false;
        });


 //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
        $("#captchaPic").click(function (res) {
            var url = httpurl + "/verifCode";
            var imgSrc = $("#captchaPic");
            url = $("#captchaPic").attr("src");
            imgSrc.attr("src", function () {
                var timestamp = (new Date()).valueOf();
                url = url + "?timestamp=" + timestamp;
                return url;
            });
        });



        $("#codeInput").blur(function (res) {
            var code = $("#codeInput").val();

            $.post(httpurl+"/checkCode",{'code': code},function (res) {
               if(res){
                   layer.msg('验证码正确', {icon: 6});
               }else {
                   layer.msg('验证码失败', {icon: 5});
               }
            });
        });



    });
</script>
</body>
</html>

效果图：

在这里插入图片描述

缘不易
关注
专栏目录
【SpringBoot】33、SpringBoot+LayUI后台管理系统开发脚手架
Asurplus
09-05 22万+
本期给大家推荐我自己写一个开源项目：springboot-mini，本着减少大量重复开发工作的原则，使得在项目中能够实现快速开发 1、前言 本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开发功能，使得开发人员直接可从业务模块开始，减少大量的重复开发工作。前端框架使用 layui-mini（https://gitee.com/zhongshaofa/layuimini） 2、项目地址 https://gitee.com/asu
Spring-boot生成验证码
yfinhere的博客
11-08 726
spring-boot 生成验证码
Java 验证码生成
Zhou
09-19 170
验证码生成 后端工具类： 后端工具类 import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Random; /** * 生成验证码的工具类 */ public class VerificationCode { private int w
基于SpringBoot实现验证码功能
最新发布
m0_63624484的博客
07-24 2524
现在的登录都需要输入验证码用来检测是否是真人登录，所以验证码功能在现在是非常普遍的，那么接下来我们就基于springboot来实现验证码功能。
springboot生成验证码
m0_46097421的博客
11-07 2530
     前排提示:该生成验证码的步骤在ssm与springboot都可以使用，这里推荐使用springboot如果要使用ssm要进行适当的修改。 1、导入验证码依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3
在SPringBoot生成验证码
有趣的灵魂万里挑一,好看的皮囊你又没有
07-19 633
在SPringBoot生成验证码,返回数据的统一工具类
如何使用Java生成Web项目验证码
qq_28245087的博客
05-17 658
本文介绍了如何使用 Java 编写 Web 项目验证码。需要添加 kaptcha 依赖，配置 web.xml，生成验证码，并在校验表单数据时校验验证码是否正确。在实际项目中，可以根据具体需求更改验证码的样式和规则。
Javaweb--超简单实现图形验证码功能
程序猿小龙的博客
07-25 850
  图形验证码是网站登录注册中一个常能见到的东西，也十分实用。最近也是做了一下这个验证码小案例，希望能帮到有需要的朋友。   最终效果图：   上面的验证码是后台随机生成的，以流的方式通过响应发送给前端的，点击验证码可以切换新的验证码。我是通过集成第三方的sdk完成的，前端使用Layui+JQuery，后端使用的是SpringBoot。   第三方sdk依赖 <dependency> <groupId>cn.hutool</group
基于javaweb+SpringBoot+MyBatis网上订餐在线点餐管理系统(前台、后台)
m0_70178901的博客
04-26 2748
基于javaweb+SpringBoot+MyBatis网上订餐在线点餐管理系统(前台、后台) 开发工具：eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等
基于javaweb+jsp的仓库进销存管理系统(JavaWeb MySQL JSP Bootstrap Servlet SSM SpringBoot)
m0_70011400的博客
11-07 571
基于javaweb+jsp的仓库进销存管理系统(JavaWeb MySQL JSP Bootstrap Servlet SSM SpringBoot) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 技术框架 JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript Bootstrap. 基础JSP+Servlet或JSP+SSM(Spring、Spri
spring boot登录验证码
07-16
spring boot登录验证码校验，包含短信验证码和图形验证码
Springboot中验证码生成
学习
11-10 1400
验证码
Springboot验证码生成
Roller_coaster的博客
10-02 401
shiro登录验证码的使用，github的工具包
SpringBoot实现生成验证码功能
weixin_43597991的博客
05-25 344
自定义认证异常类,用来替换SecurityConfig中的configure(HttpSecurity http)中的异常处理。controller前端获取base64接口,可将图片从存储在session转为存在redis，可实现设置过期时间。以下为整合springsecurity后，loginfilter过滤器。利用kaptcha生成验证码，并转化为base64回传给前台。KaptchaConfig配置文件。
011-SpringBoot-生成验证码
学习笔记
08-31 1537
🧑‍🎓 个人主页：Silence Lamb 📖 本章内容：【SpringBoot-生成验证码】
springboot验证码的生成与验证
妙乌的博客
06-28 9973
🐋前言：在springboot的登陆页面中为了防止机器大规模注册，机器暴力破解数据密码等危害，需要验证随机生成的验证码。现提出两种简易方案生成验证码功能，一种采用springboot整合kaptcha第三方验证码生成工具的生成方案；另一种采用springboot整合第三方类库hutool生成验证码，验证成功跳转至success页面，失败则跳转false页面。......
springboot实现验证码生成及验证功能
我的青春一去不复返
12-27 2235
springboot实现验证码生成及验证功能;一般做法是在后端生成验证码后，首先对当前生成的验证码内容进行保存，可以选择保存在session中，redis缓存中，或者保存在数据库中。然后返回验证码图片并显示到前端页面。用户在输入验证码后，并向后端发出验证请求后，后端接到请求后会对用户输入的验证码进行验证。
Spring boot 实现验证码
2301_82241859的博客
04-18 1415
request.setAttribute(“error”, “验证码已失效，请重新输入”);// 设置线条的颜色。
javaweb随机生成验证码
08-31
你可以使用Java生成随机验证码，并将其嵌入到JavaWeb应用中。下面是一个示例代码来生成随机验证码： ```java import java.util.Random; public class CaptchaGenerator { private static final String CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; private static final int CAPTCHA_LENGTH = 6; public static String generateCaptcha() { Random random = new Random(); StringBuilder captcha = new StringBuilder(); for (int i = 0; i < CAPTCHA_LENGTH; i++) { int index = random.nextInt(CHARACTERS.length()); captcha.append(CHARACTERS.charAt(index)); } return captcha.toString(); } } ``` 以上代码使用了一个包含大写字母、小写字母和数字的字符集，通过循环生成指定长度的随机验证码。你可以根据自己的需要修改字符集和验证码长度。 在你的JavaWeb应用中，你可以调用`generateCaptcha()`方法来获取一个随机生成的验证码，并将其展示在页面上。 当用户提交表单时，你可以将用户输入的验证码与生成的验证码进行比较，以验证验证码是否正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘不易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值