Springboot+Vue实现邮箱验证功能（邮箱登录+忘记密码）

2024-07-15 01:29| 来源: 网络整理| 查看: 265

B站直播讲解视频：https://www.bilibili.com/video/BV14Y4y1C7B1

三连再看，养成良好的习惯！

Springboot代码和配置

pom.xml

org.springframework.boot spring-boot-starter-mail

application.yml

spring: mail: # protocol: smtps protocol: smtp # 配置 SMTP 服务器地址 host: smtp.qq.com # 发送者邮箱 # username: [email protected] username: [email protected] # 配置密码，注意不是真正的密码，而是刚刚申请到的授权码 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 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 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 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 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 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 roleMenus = getRoleMenus(role); userDTO.setMenus(roleMenus); return userDTO; } // 发送邮箱验证码 @Override public void sendEmailCode(String email, Integer type) throws MessagingException { Date now = new Date(); // 先查询同类型code QueryWrapper 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="尊敬的用户：;;;;;;;;您好，您本次忘记密码的验证码是："+ "" + code + "" +"，有效期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 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 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

管理系统前往注册登录找回密码获取验证码前往注册登录找回密码获取验证码取消重置密码 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 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) } }) } } } .wrapper { height: 100vh; background-image: linear-gradient(to bottom right, #4169E1 , #87CEFA); overflow: hidden; }

到这里，我们就完成了本次邮箱登录的全部代码了，如果觉得有帮助，麻烦动动你可爱的小手，点赞，来个三连，我会继续分享更多实用的干或，可以关注我的B站：程序员青戈。

【本文地址】

公司简介

联系我们