文章目录
一：前台功能实现1.1 页面编写1.2 发送验证码——sendEmailCode1.2.1 远程调用发送接口1.2.1 接口防刷校验——60s内只能发送一次 二：获取QQ邮箱授权码2.1 登录QQ邮箱2.2 开启SMTP权限2.2.1 设置2.2.2 账户2.2.3 管理服务2.2.4 生成授权码2.2.5 复制授权码 三：后台功能实现3.1 编写配置文件3.2 发送验证码工具类3.3 验证码防刷校验——60s内不允许再次发送3.4 通过验证码登录一：前台功能实现
1.1 页面编写
<el-form id="emailForm" size="medium"><el-row><el-col :span="24"><el-form-item class="icon1" label="邮箱:" prop="email"><el-input placeholder="邮箱" id="email" style="width: 80%;" v-model="emailForm.email" type="text"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item class="icon1" label="验证码:" prop="checkCode"><el-input type="text" id="checkCode" v-model="emailForm.checkCode" style="width: 45%;" placeholder="验证码"></el-input><a @click="sendEmailCode" id="sendEmailCode" >邮箱验证码</a></el-form-item></el-col></el-row></el-form>
1.2 发送验证码——sendEmailCode
1.2.1 远程调用发送接口
/*** 发送邮箱验证码*/sendEmailCode(){/*** 1.给指定邮箱发送验证码* 2.添加验证码倒计时功能*///判断有没有正在进行倒计时操作if($(this).hasClass("disabled")){//正在倒计时} else {//给指定的手机发送验证码let email = this.emailForm.email;$.get("/sendEmail?email=" + email);this.timeoutChangeStyleEmail();}},
1.2.1 接口防刷校验——60s内只能发送一次
timeoutChangeStyleEmail(){$("#sendEmailCode").attr("class","disabled");if( this.num == 0){$("#sendEmailCode").text("发送验证码");this.num = 60;$("#sendEmailCode").attr("class","");} else {let str = this.num + "s 后再次发送";$("#sendEmailCode").text(str);setTimeout(() => {this.timeoutChangeStyleEmail();}, 1000);}this.num--;},
二：获取QQ邮箱授权码
2.1 登录QQ邮箱
https://wx./
2.2 开启SMTP权限
主页->设置->账户->管理服务
2.2.1 设置
2.2.2 账户
2.2.3 管理服务
2.2.4 生成授权码
2.2.5 复制授权码
三：后台功能实现
3.1 编写配置文件
spring:mail:host: #给QQ邮箱发送邮件username: ##你的QQ邮箱password: ###你刚才复制的授权码##port: 465protocol: smtpdefault-encoding: utf-8properties:mail:# 开启 debug，这样方便开发者查看邮件发送日志debug: truesmtp:auth: truestarttls:enable: truerequired: truessl:enable: truesocketFactory:port: 465class: .ssl.SSLSocketFactory
3.2 发送验证码工具类
package com.sysg.user.utils;import com.sysg.base.utils.StringUtils;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.mail.MailException;import org.springframework.mail.SimpleMailMessage;import org.springframework.mail.javamail.JavaMailSender;import org.ponent;import java.util.Collections;import java.util.Random;/*** 发送邮件验证码*/@Component@Slf4jpublic class EmailUtil {@Autowiredprivate JavaMailSender javaMailSender;/*** 读取yml文件中username的值并赋值给sendUserEmail*/@Value("${spring.mail.username}")private String sendUserEmail;/*** 发送邮件验证码* @param emailReceiver* @return*/public String sendSimpleMail(String emailReceiver) {// 构建一个邮件对象SimpleMailMessage message = new SimpleMailMessage();// 设置邮件发送者message.setFrom(sendUserEmail);// 设置邮件接收者message.setTo(emailReceiver);// 设置邮件的主题message.setSubject("登录验证码");// 设置邮件的正文Random random = new Random();StringBuilder code = new StringBuilder();for (int i = 0; i < 6; i++) {int r = random.nextInt(10);code.append(r);}String text = "您的验证码为：" + code + ",请勿泄露给他人。";message.setText(text);// 发送邮件try {javaMailSender.send(message);log.info("邮件发送成功");return code.toString();} catch (MailException e) {e.printStackTrace();log.info("邮件发送失败");return StringUtils.EMPTY;}}}
此时就收到验证码了
3.3 验证码防刷校验——60s内不允许再次发送
public R sendEmail(String email) {try {//1.接口防刷,防止同一个手机号60s内再次发送//UserConstant.EMAIL_CODE_CACHE_PREFIX自行去定义String redisEmailCode = stringRedisTemplate.opsForValue().get(UserConstant.EMAIL_CODE_CACHE_PREFIX + email);if(!StringUtils.isEmpty(redisEmailCode)){long redisDate = Long.parseLong(redisEmailCode.split("_")[1]);if(System.currentTimeMillis() - redisDate < 60000){//60秒内不可以再发return R.error("获取验证码过于频繁，请您稍后再试");}}String emailCode = emailUtil.sendSimpleMail(email);String dateEmailCode = emailCode + "_" + System.currentTimeMillis();//2.验证码的再次校验，存储到redis中。key-email，value-code//key——"code:15648961564" value-564986//保存到redis里面，并设置10分钟超时时间stringRedisTemplate.opsForValue().set(UserConstant.EMAIL_CODE_CACHE_PREFIX + email,dateEmailCode,10, TimeUnit.MINUTES);return R.ok("验证码发送成功");} catch (NumberFormatException e) {e.printStackTrace();return R.error("验证码发送失败");}}
3.4 通过验证码登录
public R emailLogin(EmailLoginVo vo, HttpSession session) {QueryWrapper<User> wrapper = new QueryWrapper<>();wrapper.eq("email",vo.getEmail());User user = userDao.selectOne(wrapper);if( user == null){return R.error(500, "当前邮箱没有注册，请注册后在使用");}String token = null;//1.校验验证码String code = vo.getCheckCode();String s = stringRedisTemplate.opsForValue().get(UserConstant.EMAIL_CODE_CACHE_PREFIX + vo.getEmail());if(!StringUtils.isEmpty(s)){if(code.equals(s.split("_")[0])){//校验完成以后删除验证码stringRedisTemplate.delete(UserConstant.EMAIL_CODE_CACHE_PREFIX + vo.getEmail());//验证码校验通过，登录成功String username = user.getUsername();//生成tokentoken = JwtUtil.createToken(username);if(token != null){//将数据存储到session对象中session.setAttribute("user",username);return R.ok(200, "登录成功",token);}else{return R.error(400, "登录失败");}} else {return R.error("验证码错误");}} else {//验证码不存在的话，就说明过期了return R.error("验证码错误");}}
此时功能就实现了！！！
