概述

前端搭建

后端搭建

生成验证码-存入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）相关推荐

Python + Selenium实现163邮箱的自动登录和发送邮件
运用Python和Selenium实现163邮箱的自动登录和发送邮件初接触selenium,最近研究了一下用python和Selenium实现163邮箱的自动登录和发送邮件的实现过程,中间出现了各种 ...
手机短信注册验证与登录功能
文章目录一.前言二.准备工作三.发布短信 1.基本测试发布 ①可-使用测试模板进行调试 ②测试结果 ③注意,可能会调试失败,是因为没有余额.进入首页点击头像>进入余额充值:一条大概4分钱 ...
[原创方法!] 如何实现全自动登录各大网站? Cookie格式、油猴脚本基础解决Github邮箱验证,持久登录,免验证码
之前电脑内存小, 谷歌浏览器又是内存怪物, 每次浏览器不用的时候总是习惯关掉. 这就导致了每次进入常用的网站就要重新登陆, 非常烦; 对! 就是即使浏览器保存了密码, 大部分网站仍然要输入一下验证码 ...
邮箱验证账号登录 Java
一.需求当我们想让我们的网站消除恶意注册的情况,我们可以这样做,通过邮箱验证,这样又可以很好的表现出网站的正规性,所以我们在这里提供一个邮箱验证的工具类,先简单说一下步骤,然后再提供完整的工具类二 ...
第一次发布npm包时可能遇到到问题。重名、邮箱验证、登录账号、淘宝源换成npm源
怎么发布自己到模块到npm? 这个文章写得简单明了,这里我就不过多阐述. https://www.jianshu.com/p/f5d4c891830f 不过补充一点:在发布包之前,首先去npm市场去搜 ...
网站中如何实现邮箱验证？使用java发送邮件？——JavaMail
JavaMail使用步骤首先我们来了解一下邮件协议. 一.邮件协议 1. 收发邮件我们经常使用电子邮箱进行收发邮件.发邮件其实就是把邮件发送到服务器,收邮件就是把邮件服务器的邮件下载到客户端. 我 ...
Asp.Net Core 实现登录验证身份的功能
步骤如下: 1.打开VS2019,新建ASP.NET Core Web应用程序,选择Web应用程序(模型视图控制器) 不用勾选右侧的身份认证,因为演示的是比较简单的,而勾选之后模板内容较为复杂 2.在 ...
django 的用户验证及登录状态保持
一.用户验证功能 Django自带用户验证及登录功能,引入模块为: from django.contrib.auth import authenticate 其中方法authenticate()的接收 ...
WordPress邮箱验证（上）
邮箱验证 1.登录WordPress后台,安装WP Mail SMTP邮箱插件(安装并启用) 2.登录cpanel后台(主要是为了查找收件人),进入电子邮箱,再到电子邮件账号(我用的是cpanel) ...

使用邮箱验证实现登录功能（发送邮件，redis）

概述

前端搭建

后端搭建

生成验证码-存入redis（主要过程代码）

发送邮件（主要过程代码）

登录验证-取出redis中数据进行验证（主要代码）

完整代码一-LoginController

完整代码二-LoginService

完整代码三-LoginInfo

功能测试

使用邮箱验证实现登录功能（发送邮件，redis）相关推荐

最新文章

热门文章