Springboot+Vue实现邮箱验证功能（邮箱登录+忘记密码）
简单几步实现邮箱登录和验证
·
B站直播讲解视频：https://www.bilibili.com/video/BV14Y4y1C7B1
三连再看，养成良好的习惯！
Springboot代码和配置
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>
application.yml
spring:
mail:
# protocol: smtps
protocol: smtp
# 配置 SMTP 服务器地址
host: smtp.qq.com
# 发送者邮箱
# username: xqnode@163.com
username: 1938976892@qq.com
# 配置密码，注意不是真正的密码，而是刚刚申请到的授权码
password: xxx
# 端口号465或587
# port: 465
port: 587
# 默认的邮件编码为UTF-8
default-encoding: UTF-8
UserController.java
// 邮箱登录
@AuthAccess
@PostMapping("/loginEmail")
public Result loginEmail(@RequestBody UserDTO userDTO) {
String email = userDTO.getEmail();
String code = userDTO.getCode();
if (StrUtil.isBlank(email) || StrUtil.isBlank(code)) {
return Result.error(Constants.CODE_400, "参数错误");
}
UserDTO dto = userService.loginEmail(userDTO);
return Result.success(dto);
}
// 忘记密码 | 重置密码
@AuthAccess
@PutMapping("/reset")
public Result reset(@RequestBody UserPasswordDTO userPasswordDTO) {
if (StrUtil.isBlank(userPasswordDTO.getEmail()) || StrUtil.isBlank(userPasswordDTO.getCode())) {
throw new ServiceException("-1", "参数异常");
}
// 先查询 邮箱验证的表，看看之前有没有发送过 邮箱code，如果不存在，就重新获取
QueryWrapper<Validation> validationQueryWrapper = new QueryWrapper<>();
validationQueryWrapper.eq("email", userPasswordDTO.getEmail());
validationQueryWrapper.eq("code", userPasswordDTO.getCode());
validationQueryWrapper.ge("time", new Date()); // 查询数据库没过期的code, where time >= new Date()
Validation one = validationService.getOne(validationQueryWrapper);
if (one == null) {
throw new ServiceException("-1", "验证码过期，请重新获取");
}
// 如果验证通过了，就查询要不过户的信息
QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
userQueryWrapper.eq("email", userPasswordDTO.getEmail()); //存根据email查询用户信息
User user = userService.getOne(userQueryWrapper);
// 重置密码
user.setPassword("123");
userService.updateById(user);
return Result.success();
}
// 发送邮箱验证码
@AuthAccess
@GetMapping("/email/{email}/{type}")
public Result sendEmailCode(@PathVariable String email, @PathVariable Integer type) throws MessagingException {
if(StrUtil.isBlank(email)) {
throw new ServiceException(Constants.CODE_400, "参数错误");
}
if(type == null) {
throw new ServiceException(Constants.CODE_400, "参数错误");
}
userService.sendEmailCode(email, type);
return Result.success();
}
UserDTO.java
@Data
public class UserDTO {
private Integer id;
private String username;
private String email;
private String code;
private String password;
private String nickname;
private String avatarUrl;
private String token;
private String role;
private List<Menu> menus;
}
UserPasswordDTO.java
@Data
public class UserPasswordDTO {
private String username;
private String phone;
private String password;
private String newPassword;
private String email;
private String code;
}
UserServiceImpl.java
// 不要忘记导入相关的依赖和配置
@Autowired
JavaMailSender javaMailSender;
@Value("${spring.mail.username}")
private String from;
// 邮箱验证
@Override
public UserDTO loginEmail(UserDTO userDTO) {
String email = userDTO.getEmail();
String code = userDTO.getCode();
// 先查询 邮箱验证的表，看看之前有没有发送过 邮箱code，如果不存在，就重新获取
QueryWrapper<Validation> validationQueryWrapper = new QueryWrapper<>();
validationQueryWrapper.eq("email", email);
validationQueryWrapper.eq("code", code);
validationQueryWrapper.ge("time", new Date()); // 查询数据库没过期的code, where time >= new Date()
Validation one = validationService.getOne(validationQueryWrapper);
if (one == null) {
throw new ServiceException("-1", "验证码过期，请重新获取");
}
// 如果验证通过了，就查询要不过户的信息
QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
userQueryWrapper.eq("email", email); //存根据email查询用户信息
User user = getOne(userQueryWrapper);
if (user == null) {
throw new ServiceException("-1", "未找到用户");
}
BeanUtil.copyProperties(user, userDTO, true);
// 设置token
String token = TokenUtils.genToken(user.getId().toString(), user.getPassword());
userDTO.setToken(token);
String role = user.getRole();
// 设置用户的菜单列表
List<Menu> roleMenus = getRoleMenus(role);
userDTO.setMenus(roleMenus);
return userDTO;
}
// 发送邮箱验证码
@Override
public void sendEmailCode(String email, Integer type) throws MessagingException {
Date now = new Date();
// 先查询同类型code
QueryWrapper<Validation> validationQueryWrapper = new QueryWrapper<>();
validationQueryWrapper.eq("email", email);
validationQueryWrapper.eq("type", type);
validationQueryWrapper.ge("time", now); // 查询数据库没过期的code
Validation validation = validationService.getOne(validationQueryWrapper);
if (validation != null) {
throw new ServiceException("-1", "当前您的验证码仍然有效，请不要重复发送");
}
String code = RandomUtil.randomNumbers(4); // 随机一个 4位长度的验证码
if (ValidationEnum.LOGIN.getCode().equals(type)) {
SimpleMailMessage message=new SimpleMailMessage();
message.setFrom(from); // 发送人
message.setTo(email);
message.setSentDate(now);
message.setSubject("【程序员青戈】登录邮箱验证");
message.setText("您本次登录的验证码是：" + code + "，有效期5分钟。请妥善保管，切勿泄露");
javaMailSender.send(message);
} else if (ValidationEnum.FORGET_PASS.getCode().equals(type)){
MimeMessage message = javaMailSender.createMimeMessage();
MimeMessageHelper helper=new MimeMessageHelper(message);
helper.setSubject("【程序员青戈】忘记密码验证");
helper.setFrom(from); // 发送人
helper.setTo(email);
helper.setSentDate(now); // 富文本
String context="<b>尊敬的用户：</b><br> 您好，您本次忘记密码的验证码是："+
"<b color=\"'red'\">" + code + "</b><br>"
+"，有效期5分钟。请妥善保管，切勿泄露";
helper.setText(context, true);
javaMailSender.send(message);
}
// 发送成功之后，把验证码存到数据库
validationService.saveCode(email, code, type, DateUtil.offsetMinute(now, 5));
}
ValidationServiceImpl.java
@Service
public class ValidationServiceImpl extends ServiceImpl<ValidationMapper, Validation> implements IValidationService {
@Transactional
@Override
public void saveCode(String email, String code, Integer type, DateTime expireDate) {
Validation validation = new Validation();
validation.setEmail(email);
validation.setCode(code);
validation.setType(type);
validation.setTime(expireDate);
// 删除同类型的验证
UpdateWrapper<Validation> validationUpdateWrapper = new UpdateWrapper<>();
validationUpdateWrapper.eq("email", email);
validationUpdateWrapper.eq("type", type);
remove(validationUpdateWrapper);
// 再插入新的code
save(validation);
}
}
数据库SQL
DROP TABLE IF EXISTS `validation`;
CREATE TABLE `validation` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户邮箱',
`code` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '验证码',
`type` int(1) NULL DEFAULT NULL COMMENT '验证类型',
`time` timestamp(0) NULL DEFAULT NULL COMMENT '过期时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 12 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;
前端Vue
Login.vue
<template>
<div class="wrapper">
<div style="height: 60px; line-height: 60px; font-size: 20px; padding-left: 50px; color: white;
background-color: rgba(0,0,0,0.2)">管理系统</div>
<div style="margin: 100px auto; background: white; width: 500px; border-radius: 10px; overflow: hidden">
<el-tabs type="card" v-model="activeName" >
<el-tab-pane label="账号密码登录" name="first">
<div style="margin: 20px auto; background-color: #fff; width: 350px; height: 220px; padding: 20px; border-radius: 10px">
<el-form :model="user" :rules="rules" ref="userForm">
<el-form-item prop="username">
<el-input size="medium" prefix-icon="el-icon-user" v-model="user.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="medium" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
</el-form-item>
<!-- <el-form-item>-->
<!-- <div style="display: flex">-->
<!-- <el-input size="mid" v-model="code" style="width: 200px"></el-input>-->
<!-- <span @click="refreshCode" style="cursor: pointer; flex: 1;">-->
<!-- <Identify :identifyCode="identifyCode"></Identify>-->
<!-- </span>-->
<!-- </div>-->
<!-- </el-form-item>-->
<el-form-item style="margin: 10px 0; text-align: right">
<el-button type="warning" size="medium" autocomplete="off" @click="$router.push('/register')">前往注册</el-button>
<el-button type="primary" size="medium" autocomplete="off" @click="loginAccount">登录</el-button>
</el-form-item>
<el-form-item style="margin: 10px 0; text-align: right">
<el-button type="text" size="medium" autocomplete="off" @click="handlePass">找回密码</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="邮箱登录" name="second">
<div style="margin: 20px auto; background-color: #fff; width: 350px; height: 220px; padding: 20px; border-radius: 10px">
<el-form :model="user" :rules="rules" ref="userForm">
<el-form-item prop="email">
<el-input size="medium" prefix-icon="el-icon-message" v-model="user.email"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input size="medium" prefix-icon="el-icon-lock" style="width: 190px" v-model="user.code"></el-input>
<el-button type="primary" size="medium" class="ml-5" @click="sendEmailCode(1)">获取验证码</el-button>
</el-form-item>
<el-form-item style="margin: 10px 0; text-align: right">
<el-button type="warning" size="medium" autocomplete="off" @click="$router.push('/register')">前往注册</el-button>
<el-button type="primary" size="medium" autocomplete="off" @click="loginEmail">登录</el-button>
</el-form-item>
<el-form-item style="margin: 10px 0; text-align: right">
<el-button type="text" size="mid" autocomplete="off" @click="handlePass">找回密码</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</div>
<el-dialog title="找回密码" :visible.sync="dialogFormVisible" width="30%" >
<el-form label-width="100px" size="small">
<el-form-item label="邮箱">
<el-input size="medium" v-model="pass.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="验证码">
<el-input size="medium" style="width: 200px" v-model="pass.code"></el-input>
<el-button type="primary" size="medium" class="ml-5" @click="sendEmailCode(2)">获取验证码</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="passwordBack">重置密码</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {resetRouter, setRoutes} from "@/router";
import Identify from "@/components/Identify";
export default {
name: "Login",
data() {
return {
activeName: 'first',
user: {},
pass: {},
code: '',
dialogFormVisible: false,
// 图片验证码
identifyCode: '',
// 验证码规则
identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }
]
}
}
},
components: {Identify},
mounted() {
// 重置路由
resetRouter()
this.refreshCode()
},
methods: {
sendEmailCode(type) {
let email;
if (type === 1) {
email = this.user.email
} else if(type === 2) {
email = this.pass.email
}
if(!email) {
this.$message.warning("请输入邮箱账号")
return
}
if(!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email)) {
this.$message.warning("请输入正确的邮箱账号")
return
}
// 发送邮箱验证码
this.request.get("/user/email/" + email + "/" + type).then(res => {
if (res.code === '200') {
this.$message.success("发送成功")
} else {
this.$message.error(res.msg)
}
})
},
loginAccount() {
// if (this.code !== this.identifyCode.toLowerCase()) {
// this.$message({
// type: "error",
// message: "验证码错误"
// })
// return;
// }
this.$refs['userForm'].validate((valid) => {
if (valid) { // 表单校验合法
this.request.post("/user/loginAccount", this.user).then(res => {
if(res.code === '200') {
localStorage.setItem("user", JSON.stringify(res.data)) // 存储用户信息到浏览器
localStorage.setItem("menus", JSON.stringify(res.data.menus)) // 存储用户信息到浏览器
// 动态设置当前用户的路由
setRoutes()
this.$router.push("/")
this.$message.success("登录成功")
} else {
this.$message.error(res.msg)
}
})
}
});
},
loginEmail() {
if (!this.user.email) {
this.$message.warning("请输入邮箱")
return
}
if (!this.user.code) {
this.$message.warning("请输入验证码")
return
}
this.request.post("/user/loginEmail", this.user).then(res => {
if(res.code === '200') {
localStorage.setItem("user", JSON.stringify(res.data)) // 存储用户信息到浏览器
localStorage.setItem("menus", JSON.stringify(res.data.menus)) // 存储用户信息到浏览器
// 动态设置当前用户的路由
setRoutes()
this.$router.push("/")
this.$message.success("登录成功")
} else {
this.$message.error(res.msg)
}
})
},
// 切换验证码
refreshCode() {
this.identifyCode = ''
this.makeCode(this.identifyCodes, 4)
},
// 生成随机验证码
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length))]
}
},
handlePass() {
this.dialogFormVisible = true
this.pass = {}
},
passwordBack() {
this.request.put("/user/reset", this.pass).then(res => {
if (res.code === '200') {
this.$message.success("重置密码成功，新密码为：123，请尽快修改密码")
this.dialogFormVisible = false
} else {
this.$message.error(res.msg)
}
})
}
}
}
</script>
<style>
.wrapper {
height: 100vh;
background-image: linear-gradient(to bottom right, #4169E1 , #87CEFA);
overflow: hidden;
}
</style>
到这里，我们就完成了本次邮箱登录的全部代码了，如果觉得有帮助，麻烦动动你可爱的小手，点赞，来个三连，我会继续分享更多实用的干或，可以关注我的B站：程序员青戈。
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
29
0- 0
已为社区贡献2条内容
所有评论(0)