SpringBoot前后端分离登陆验证码实现以及不显示问题

最新推荐文章于 2024-05-26 16:00:28 发布

楠de晴天

最新推荐文章于 2024-05-26 16:00:28 发布

阅读量4.3k

点赞数 1

分类专栏： java简单的验证码登陆文章标签： java前后端分离登陆验证码的实现

本文链接：https://blog.csdn.net/weixin_41549327/article/details/101052951

版权

本文介绍了在SpringBoot项目中实现前后端分离的登陆验证码过程，包括前端纯JavaScript生成验证码的代码示例，以及后端生成并使用session验证的解决方案。在实施过程中遇到验证码图片不显示、登陆验证逻辑等问题，通过排查找到了相应解决办法，例如避免验证码URL被拦截和防止重复获取验证码。

摘要由CSDN通过智能技术生成

最近在做一个项目，就是先完成登陆的一个验证码简单验证，一开始使用了js前端完成，但是项目不允许，我去！很纳闷前端生成验证码，进行验证也能完成功能呀，并且很简单，只要一个插件几行代码的事情，非要后端使用session验证，尴尬了，显示用前端完成的代码先上。

纯前端完成验证码的生成和获取：

<canvas width="240" height="90" id="captcha2"></canvas>
</body>
<script src="./captcha.js"></script>
<script>
/*不传值，统一走默认值*/
let captcha1 = new Captcha();
captcha1.draw(document.querySelector('#captcha1'), r => {
console.log(r, '验证码1');
});

/*传值,参数配置值，选择性配置*/
let captcha2 = new Captcha({
lineWidth: 1, //线条宽度
lineNum: 6, //线条数量
dotR: 2, //点的半径
dotNum: 25, //点的数量
preGroundColor: [10, 80], //前景色区间
backGroundColor: [150, 250], //背景色区间
fontSize: 30, //字体大小
fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'], //字体类型
fontStyle: 'stroke', //字体绘制方法，有fill和stroke
content: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示', //验证码内容
length: 6 //验证码长度
}); // 传值
captcha2.draw(document.querySelector('#captcha2'), r => {---------r就是我们获取的验证码的值，直接获取r就可以直接验证
console.log(r, '验证码2');
});
</script>
</html>

不让使用前端代码，那就只能使用后端生成喽，从网上借鉴了大神，完成了前后端分离session存储的验证码的生成以及获取和验证

1、先上html和js文件

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">


<!-- Mirrored from www.zi-han.net/theme/hplus/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:23 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>后台登录</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
</head>

<body class="gray-bg">

    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>

最低0.47元/天解锁文章

楠de晴天

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
SpringBoot前后端分离登陆验证码实现以及不显示问题

最近在做一个项目，就是先完成登陆的一个验证码简单验证，一开始使用了js前端完成，但是项目不允许，我去！很纳闷前端生成验证码，进行验证也能完成功能呀，并且很简单，只要一个插件几行代码的事情，非要后端使用session验证，尴尬了，显示用前端完成的代码先上。纯前端完成验证码的生成和获取：<canvas width="240" height="90" id="captcha2">&l...
复制链接

扫一扫

专栏目录