使用邮箱验证实现登录功能（发送邮件，redis）
目录
概述
前端搭建
后端搭建
生成验证码-存入redis（主要过程代码）
发送邮件（主要过程代码）
登录验证-取出redis中数据进行验证（主要代码）
完整代码一-LoginController
完整代码二-LoginService
完整代码三-LoginInfo
功能测试
概述
*使用邮箱进行登录验证功能实现。
主要功能点：
1.在SpringBoot环境中发送邮件。
2.使用redis进行验证码的缓存及取出验证登录。
整体过程说明
前端搭建简易邮箱登录框，当验证通过后自动跳转到网页index.html。
后端提供两个接口，一个接口用于处理向指定邮箱发送验证码，并将验证码存入redis中，另一个接口用于处理登录验证，验证发来的邮箱地址和验证码是否匹配。
技术选型
前端：前端三剑客，axios
后端：SpringBoot ，redis，javaMail
前端搭建
项目结构
页面展示
说明 ：当我们输入邮箱地址后，点击"发送验证码"，会判断输入是否为空以及输入的邮箱是否符合规范，如果输入不为空并且输入的邮箱符合规范，那么按钮将禁用并且提示再次发送的倒计时。
例如：
前端完整代码实例 --- js
// 获取发送验证码按钮节点
let sendCodeBtn = document.querySelector("#sendCodeBtn");
// 获取邮箱地址输入框节点
let emailInput = document.querySelector("#userEmail");
// 获取验证码输入框节点
let verificationCode = document.querySelector("#CheckCode");
// 获取登录按钮节点
let loginBtn = document.querySelector("#loginBtn");// 点击发送验证码逻辑代码
sendCodeBtn.addEventListener("click",function(){// 判断用户输入的邮箱地址是否符合规范let flag = CheckInputEmail(emailInput.value);// 以及判断输入是否为空if(emailInput.value && flag){// 调用方法发送请求，向目标邮箱发送验证码getCode(emailInput.value);alert("验证码发送成功!")// 禁用发送按钮sendCodeBtn.disabled = true;// 设置倒计时，时间到后才可以再次发起验证码请求let time = 60;sendCodeBtn.innerHTML = time + "s后再次发送!"time--;let myInterVal = setInterval(()=>{if(time != 0){sendCodeBtn.innerHTML = time + "s后再次发送!"time--;}else{sendCodeBtn.disabled = false;sendCodeBtn.innerHTML = "发送"clearInterval(myInterVal)}},1000)}else{alert("邮箱格式错误或为空!");}
})// 点击登录按钮逻辑代码
loginBtn.addEventListener("click", function (){// 输入邮箱地址和验证码作为参数进行验证checkCode(emailInput.value,verificationCode.value);
})// 验证邮箱输入格式是否正确
function CheckInputEmail(email){if (!email) {return false;}// 定义邮箱格式的正则表达式const emailRegex = /^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;// 检查邮箱是否符合格式要求return emailRegex.test(email);
}// 发送请求:获取验证码
function getCode(emailAddress){axios.get("http://localhost:8080/logins?emailAddress="+emailAddress)
}// 发送请求:检查验证码是否正确
function checkCode(emailAddress, code){axios.post("http://localhost:8080/logins",{emailAddress:emailAddress,code:code}).then(response =>{ // 成功的回调console.log("返回结果====>" + response.data)response.data? window.location = "../html/index.html" : alert("验证不通过！！！");})
}前端完整代码实例 --- html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../css/login.css"><link href="../favicon.ico" rel="shortcut icon"><script src="../js/axios.min.js"></script>
</head>
<body>
<div id="container"><div id="my_header"><span id="header_title">邮箱登录</span></div><div id="my_body"><div id="body_inputBlock"><label for="userEmail">邮箱：</label><input id="userEmail" type="text" placeholder="请输入邮箱"><button id="sendCodeBtn" type="button">发送验证码</button><br><br><label for="CheckCode">验证码：</label><input id="CheckCode" type="password" placeholder="请输入验证码"><br><button id="loginBtn">登录</button></div></div>
</div>
<script src="../js/login.js"></script>
</body>
</html>前端完整代码实例 --- css
#container{border: solid #589bff 2px;width: 500px;height: 250px;margin: 50px auto;border-radius: 5px;background-color: #7acc67;
}#my_header{background-color: #bcffc1;height: 50px;line-height: 50px;text-align: center;font-weight: 800;font-size: 20px;
}#my_body{margin-top: 15px;margin-left: 35px;
}#loginBtn{font-weight: 800;font-size: 18px;margin-top: 20px;margin-left: 153px;width: 101px;
}label{width: 104px;display: inline-block;text-align: right;
}
input{border-radius: 5px;height: 27px;width: 212px;background-color: antiquewhite;
}
label{font-size: 18px;
}button{font-size: 15px;border-radius: 5px;background-color: antiquewhite;height: 36px;
}button:hover{cursor: pointer;
}#sendCodeBtn{position: relative;top: 1px;font-weight: 600;
}后端搭建
目录结构
生成验证码-存入redis（主要过程代码）
1.我们获取时间戳的后四位来模拟随机验证码。
// 截取当前时间戳的后四位模拟验证码
long timestamp = System.currentTimeMillis();
String verificationCode = Long.toString(timestamp).substring(Long.toString(timestamp).length() - 4);2.有了随机的验证码，我们导入redis起步坐标，并简单配置连接信息。
<!--pom.xml导入redis起步坐标-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId>
</dependency><!--application.yml中编写-->
redis:host: localhost <!--redis地址-->port: 6379 <!--redis开放端口号-->
3.使用-loginController中编写
/*** 注入redisTemplate用于缓存数据*/
@Autowired
private RedisTemplate<String, String> redisTemplate;// 将传入邮箱地址为key，验证码为value，存入redis中，并设置超时时间为5分钟
// 参数说明set(key，value, 超时时间，时间单位)
// 至于传入的详细参数，下方会有完整代码提供解释
redisTemplate.opsForValue().set(emailAddress,verificationCode,5, TimeUnit.MINUTES);发送邮件（主要过程代码）
1.获取授权码
说明 ：我们想要在编程环境发送邮件，首先需要到我们自己所使用的邮箱中开启POP3/SMTP服务后获取授权密码。
在此我使用的是网易的163邮箱，开启服务并获取授权密码步骤：
开启任意一个，根据步骤发送个短信后就出现授权码了。
2.编写邮件发送信息（需要授权码）
在application.yml中编写
3.编写发送邮件方法-在loginService中编写邮件发送逻辑
// 自动注入JavaMailSender，用于发送邮件动作
@Autowired
private JavaMailSender javaMailSender; /*** 发送邮件* @param from 发送方* @param to 接收方* @param subject 主题* @param contents 内容* @return 返回执行结果状态*/
public void sendEmail(String from, String to, String subject, String contents){// 创建一个简单消息对象，用于发送简单消息（不带附件或连接等）SimpleMailMessage simpleMailMessage = new SimpleMailMessage();// 封装邮件信息simpleMailMessage.setFrom(from); // 设置发送方simpleMailMessage.setTo(to); // 设置接收方simpleMailMessage.setSubject(subject); // 设置主题simpleMailMessage.setText(contents); // 设置发送内容// 发送动作javaMailSender.send(simpleMailMessage);
}4.调用方法-loginController中编写
/*** 注入loginService用于调用其中自定义的邮件发送方法*/
@Autowired
private LoginService loginService;// 编写邮件内容模板
String emailInfo = "验证码为：" + verificationCode +"，5分钟内有效。";// 发送验证码到目标邮箱
loginService.sendEmail("maohe101@163.com", emailAddress, "登录验证码", emailInfo);登录验证-取出redis中数据进行验证（主要代码）
loginController中编写
// 取出传入数据对比redis中数据，判断是否通过登录验证
// 判断传入的邮箱地址是否存在redis中
if(redisTemplate.hasKey(loginInfo.getEmailAddress())){// 取出对应邮箱地址为key的value值String storyCode = redisTemplate.opsForValue().get(loginInfo.getEmailAddress());// 判断存在redis中的验证码和传入验证码是否相同，相同返回truereturn loginInfo.getCode().equals(storyCode)? "true":"false";
}
return "false";完整代码一-LoginController
package com.mh.controller;import com.mh.pojo.LoginInfo;
import com.mh.service.LoginService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.connection.DataType;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.*;import java.util.Date;
import java.util.concurrent.TimeUnit;/*** Date:2023/2/28* author:zmh* description: 登录页面相关接口**/
@Slf4j // 用于输出日志
@RestController
@RequestMapping("/logins")
public class LoginController {/*** 注入redisTemplate用于缓存数据*/@Autowiredprivate RedisTemplate<String, String> redisTemplate;/*** 注入loginService用于调用其中自定义的邮件发送方法*/@Autowiredprivate LoginService loginService;/*** 发送邮件* @param emailAddress 目标邮件地址，作为redis存储的key*/@GetMappingpublic void sendEmail(String emailAddress){log.info("====>请求参数邮箱地址为{}",emailAddress);// 1.生成4位随机验证码// 截取当前时间戳的后四位模拟验证码long timestamp = System.currentTimeMillis();String verificationCode = Long.toString(timestamp).substring(Long.toString(timestamp).length() - 4);log.info("====>验证码为:{}",verificationCode);// 2.存入redis// 将传入邮箱地址为key，验证码为value，存入redis中，并设置超时时间为5分钟redisTemplate.opsForValue().set(emailAddress,verificationCode,1, TimeUnit.MINUTES);// 3.编写邮件内容模板String emailInfo = "验证码为：" + verificationCode +"，5分钟内有效。";// 4.发送验证码到目标邮箱loginService.sendEmail("maohe101@163.com", emailAddress, "登录验证码", emailInfo);}/*** 登录验证* @param loginInfo 接收前端传入的邮箱地址和code* @return 返回执行结果*/@PostMappingpublic String CheckEmailCode(@RequestBody LoginInfo loginInfo){log.info("=====>POST请求接收到的参数:{}***{}",loginInfo.getEmailAddress(), loginInfo.getCode());// 取出传入数据对比redis中数据，判断是否通过登录验证// 判断传入的邮箱地址是否存在redis中if(redisTemplate.hasKey(loginInfo.getEmailAddress())){// 取出对应邮箱地址为key的value值String storyCode = redisTemplate.opsForValue().get(loginInfo.getEmailAddress());// 判断存在redis中的验证码和传入验证码是否相同，相同返回truereturn loginInfo.getCode().equals(storyCode)? "true":"false";}return "false";}}
完整代码二-LoginService
package com.mh.service;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;/*** Date:2023/2/28* author:zmh* description: 登录模块相关业务**/@Service
public class LoginService {@Autowiredprivate JavaMailSender javaMailSender;/*** 发送邮件* @param from 发送方* @param to 接收方* @param subject 主题* @param contents 内容* @return 返回执行结果状态*/public void sendEmail(String from, String to, String subject, String contents){// 创建一个简单消息对象，用于发送简单消息（不带附件或连接等）SimpleMailMessage simpleMailMessage = new SimpleMailMessage();// 封装邮件信息simpleMailMessage.setFrom(from);simpleMailMessage.setTo(to);simpleMailMessage.setSubject(subject);simpleMailMessage.setText(contents);// 发送动作javaMailSender.send(simpleMailMessage);}}
完整代码三-LoginInfo
package com.mh.pojo;import lombok.Data;/*** Date:2023/2/28* author:zmh* description: 登录信息-用于接收前端传入的body数据**/@Data
public class LoginInfo {String emailAddress;String code;}
功能测试
说明：在测试之前我们可以关闭一下浏览器缓存，方便我们测试。F12打开控制台
输入邮箱获取验证码
邮箱接收到验证码
输入错误验证码，进行对比验证
输入正确验证码，进行对比验证
验证成功，自动跳转到index.heml网页，功能测试完成。
相关文章：
使用邮箱验证实现登录功能（发送邮件，redis）
目录 概述 前端搭建 后端搭建 生成验证码-存入redis（主要过程代码） 发送邮件（主要过程代码） 登录验证-取出redis中数据进行验证（主要代码） 完整代码一-LoginController 完整代码二-LoginService 完…...
【Linux】网卡的7种bond模式
网卡的7种bond模式 一、bond模式 Mode0(balance-rr) 表示负载分担round-robin，和交换机的聚合强制不协商的方式配合 Mode1(active-backup) 表示主备模式，只有一块网卡是active,另外一块是备的standby，这时如果交换机配的是捆绑，…...
AQS抽象队列同步器
aqs 抽象队列同步器，内部存储了一个valitail修饰的status 和内部类node ，来实现对共享变量并发同步队列机制,以reentrantLock为例，lock底层实际上调用的是sync的lock，会调用cas对status的状态进行修改，来确定是否获得锁…...
springBoot对REST支持源码解析
一、在配置类中： AutoConfiguration(after { DispatcherServletAutoConfiguration.class, TaskExecutionAutoConfiguration.class,ValidationAutoConfiguration.class }) ConditionalOnWebApplication(type Type.SERVLET) ConditionalOnClass({ Servlet.class, D…...
6 集成学习及Python实现
1 主要思想 集成学习: 三个臭裨将, 顶个诸葛亮 Bagging: 数据随机重抽样, 并行构建分类器, 投票；Boosting: 关注被错分的样本, 串行构建分类器, 加权投票。 2 理论 AdaBoost (Adaptive Boosting)示意图1 错误率: εEN\varepsilon \frac{E}{N}εNE 其中NNN为…...
如何编程实现从多数据库操作数据
对于数据量很大的复杂系统，有时候会采用分库或者分表的减轻单台数据库服务器压力，截止目前有一些工具直接支持读写分离等，例如ShardingSphere，如果不采用工具框架，从编码出发，如何实现从多个数据库读写数据…...
LeetCode 147. 对链表进行插入排序 | C/C++版
LeetCode 147. 对链表进行插入排序 | C语言版LeetCode 147. 对链表进行插入排序题目描述解题思路思路一：使用栈代码实现运行结果参考文章：思路二：减少遍历节点数代码实现运行结果参考文章：[]()LeetCode 147. 对链表进行插入排序 …...
【QT进阶】第五章 QT绘图之自定义控件--仪表盘绘制
❤️作者主页：凉开水白菜 ❤️作者简介：共同学习，互相监督，热于分享，多加讨论，一起进步！ ❤️专栏目录：【零基础学QT】文章导航篇 ❤️专栏资料：https://pan.baidu.com/s/192A28BTIYFHmixRcQwmaHw 提取码：qtqt ❤️点赞 👍 收藏 ⭐再看，养成习惯 订阅的粉丝可通过…...
)
Java代码弱点与修复之——URL manipulation(URL操纵)
弱点描述 “URL manipulation” 是指攻击者利用应用程序中的 URL 参数来执行恶意操作的一种攻击技术。 在 URL manipulation 攻击中，攻击者会修改应用程序中的 URL 参数，以便执行不当操作，如访问未授权的页面、修改他人的数据、绕过访问控制等。攻击者通常会使用手动修改 …...
Sharding Sphere学习
一、基本概念 1.什么是Sharding Sphere 2.分库分表3.分库分表的方式 4.分库分表应用和问题 5.功能 5.1数据分片 —核心概念 —使用限制 5.2分布式事务 —核心概念 —使用限制 5.3读写分离 —核心概念 —使用限制 5.4高可用 —核心概念 —使用限制 5.5数据库网关 —核心概念…...
粗心小编被云拯救，那云上数据谁来拯救？
开工第三天 小编已忙的焦头烂额 不是因为工作积压 而是因为自己的疏忽 也许是没有进入工作状态,一大早先经历了自行车钥匙丢失,手机遗落在家,好不容易坐到工位上才发现,备份数据的U盘忘带了。 不过,好在提前将工作文件上传到了云端…...
[git可视化软件]gitkraken平替:GitAhead
日期2023-02-28 gitkraken6.5.1已经不能登陆使用了!! 6.5.1免费版已经无法使用!!! 现在是2023-02-28 这款工具已经废除了6.5.1版本的使用功能了,我直接卡在登陆界面进不去项目了. 要想继续管理私有项目,只能升级最新版的软件,并且开通会员.会员费用高的一批,一年要59.4美元.约…...
CentOS8基础篇8：使用systemctl管理NFS服务
一、服务简介 服务：是指执行指定系统功能的程序、例程或进程，以便支持其他程序，尤其是底层(接近硬件)程序。 例如：打印服务，ftp服务，http服务。 服务就是一个程序（正在执行的程序）…...
Go defer用法
defer概览 defer是go语言里的一个关键字,在 函数内部使用;defer关键字后面跟一个 函数或匿名函数; defer用法 执行一些资源的收尾工作,如 关闭数据库连接,关闭文件描述符,释放资源等等;结合recover()函数使用,防止函数内部的异常导致整个程序停止;defer在遇到panic后,仍然会…...
产地证是什么，主要作用有哪些？
产地证是什么，主要作用有哪些？最近一个客户问我，产地证是什么，主要作用有哪些？今天就来扒拉扒拉这个问题，其实很简单~通俗一点的讲，产地证是货物原产地的证明文件之一，主要用于国外清…...
王道计算机网络课代表 - 考研计算机 第一章 计算机网络体系结构 究极精华总结笔记
本篇博客是考研期间学习王道课程 传送门 的笔记，以及一整年里对 计算机网络 知识点的理解的总结。希望对新一届的计算机考研人提供帮助！！！ 关于对 “计算机网络体系结构” 章节知识点总结的十分全面，涵括了《计算机网络…...
数据处理 |遍历所有文件夹及子目录文件夹方法总结与实例代码详解
深度学习中不可避免的数据预处理~1. glob.glob()方法 2. pathlib中的Path方法3. os.walk()方法1. glob.glob()方法 语法glob.glob(pathname)（多指定文件类型，查找jpg,png,txt,json等）缺点：查找文件较慢2. 路径操作库pathlib中的Pa…...
ProtoEditor - 如何在Unity中实现一个Protobuf通信协议类编辑器
文章目录简介Protobuf 语法规则Proto Editor实现创建窗口定义类、字段增删类编辑字段导入、导出Json文件生成.proto文件生成.bat文件简介 在Socket网络编程中，假如使用Protobuf作为网络通信协议，需要了解Protobuf语法规则、编写.proto文件并通过编译指令…...
2022 OpenCV Spatial AI大赛前三名项目分享，开源、上手即用，优化了OAK智能双目相机的深度效果。
编辑：OAK中国 首发：oakchina.cn 喜欢的话，请多多👍⭐️✍ 内容可能会不定期更新，官网内容都是最新的，请查看首发地址链接。 ▌前言 Hello，大家好，这里是OAK中国，我是助手…...
Android 蓝牙开发——HCI log 分析（二十）
HCI log 是用来分析蓝牙设备之间的交互行为是否符合预期，是否符合蓝牙规范。对于蓝牙开发者来说，通过 HCI log 可以帮助我们更好地分析问题，理解蓝牙协议。 一、抓取HCI log 1、手机抓取HCI log 在开发者选项中打开启用蓝牙HCI信息收集日志开关，Android系统就开始自动地收…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
LOOI机器人的技术实现解析：从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品，通过将智能手机转变为具有情感交互能力的桌面机器人，展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家，我将全面解析LOOI的技术实现架构，特别是其手势识别、物体识别和环境…...