SpringBoot+mail+Vue+实现发送邮件验证码
作者: Memory(星哥) Wechat:/QQ: 574373426
整理不易,感谢支持,欢迎 收藏 转发 分享
专注IT职业教育多年,学编程找星哥
SpringBoot整合mail实现发送邮件
- 技术栈
- 业务流程(重要)
- 获取163邮箱授权码
- 创建项目,测试类测试发送
- 创建SpringBoot项目
- 编写配置文件
- 测试类测试
- 准备前端
- 创建Controller接收请求
- 思考
- Gitee项目地址
技术栈
前后端分离
后端采用 SpringBoot框架,整合 mail(spring旗下产品)
前端采用 Vue, ElementUI做一个简易的页面,利用axios发起ajax请求
开发工具 IDEA2020.3.4
背景: 当我们在注册,登陆,修改密码时,经常遇到发送验证码场景,目前发送手机验证码各大厂商提供的产品都是收费的,并且大部分个人用户无法访问,因此写一个邮箱收取验证码,优点就是免费,不需要注册,申请,开通等繁琐流程
业务流程(重要)
我们要给用户输入的邮箱发送邮件
那么谁来发送这一封邮件呢?
当然是用我的邮箱账户写一封邮件,发送给用户输入的邮箱地址
我们现在需求是让系统自动使用我的邮箱账户给别人发送邮件
这样就是第三方使用自己的邮箱权限来发送
那么谁都可以让我的邮箱给别人发送邮件吗?这样岂不是很不安全
因此我们需要去邮箱服务器开启相关的协议,获取一个唯一的授权码
第三方会根据授权码来进行权限认证,因此这个授权码不要泄露给其他人
服务协议了解:
smtp: 发送邮件
pop3: 接收邮件
获取163邮箱授权码
国内用的最多的就是163邮箱和QQ邮箱
我这里采用163邮箱,QQ邮箱获取授权码可自行度娘
授权码: 是用于登录第三方邮件客户端的专用密码, 第三方知道你的授权吗,才能帮你发送邮件
授权码不要泄漏,万一别人用你邮箱给其他用户进行诈骗骚扰呢?
- 登录网页版邮箱（https://email.163.com/),进入邮箱首页。
在设置中开启IMAP/SMTP 和 POP3/SMTP服务
在点击开启时,会让你发送一个短信,验证你的身份,可以快速扫码发送即可,此时就会给你返回一个授权码,此授权码只显示一次,保存好
重要:
如果有的账户,服务默认就是开启的,此时你也不知道你的授权码时多少,怎么办呢?
删除以下授权码,关闭服务,然后重新开启即可
创建项目,测试类测试发送
创建SpringBoot项目
这里使用阿里云脚手架创建: https://start.aliyun.com
在创建项目时勾选以下依赖,也可以手动在pom.xml中引入
web依赖
Java Mail Sender依赖
手动引入依赖
<dependencies><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-mailartifactId>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-webartifactId>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-testartifactId><scope>testscope><exclusions><exclusion><groupId>org.junit.vintagegroupId><artifactId>junit-vintage-engineartifactId>exclusion>exclusions>dependency>dependencies>
编写配置文件
# 应用服务 WEB 访问端口
server:port: 8080# 整合邮件配置
spring:mail:# smtp服务主机 qq邮箱则为smtp.qq.comhost: smtp.163.com# 服务协议 smtp为发送邮件protocol: smtp# 编码集default-encoding: UTF-8# 发送邮件的账户username: memoryzgx@163.com# 授权码 邮箱服务器提供的授权码，不是你邮箱的密码password: XXXXXXXXXXX# 开启一些权限test-connection: trueproperties:mail:smtp:auth: truestarttls:enable: truerequired: true
测试类测试
编写测试类, 执行,发送邮件
package com.xg;import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.mail.MailException;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;import java.util.Random;@SpringBootTest
class SendemailApplicationTests {@AutowiredJavaMailSender javaMailSender; //可直接注入邮件发送的对象@Value("${spring.mail.username}") //动态获取配置文件中 发送邮件的账户private String sendemail;@Testvoid contextLoads() {//随机生成一个四位数的验证码int yzm = new Random().nextInt(9999) % (9999 - 1000 + 1) + 1000;//创建简单邮件消息SimpleMailMessage message = new SimpleMailMessage();//发送邮件账户message.setFrom(sendemail);//谁要接收message.setTo("574373426@qq.com");//邮件标题message.setSubject("欢迎访问星哥说JAVA,学编程找星哥");//邮件内容message.setText("您的验证码是"+yzm);javaMailSender.send(message);}}
大功告成
准备前端
前后端分离
整合 Vue ElementUI Axios 使用cdn方式引入
效果如下
代码如下:
<html><head><meta charset="utf-8"><title>title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">head><body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui/lib/index.js">script><script src="https://unpkg.com/axios/dist/axios.min.js">script><div id="app"><el-form ref="form" :model="form" label-width="60px" size="mini"> <el-form-item label="邮箱" class="em"><el-row><el-col :span="4"><el-input v-model="form.email">el-input>el-col><el-col :span="1"><el-button type="primary" @click="getCode">获取验证码el-button>el-col>el-row>el-form-item><el-form-item label="验证码" class="cd"><el-row><el-col :span="4"><el-input v-model="form.code">el-input>el-input>el-col>el-row>el-form-item><el-form-item><el-button type="primary" @click="submit">立即注册el-button><el-button @click="cancel">取消注册el-button>el-form-item>el-form>div><script>var Main = {data() {return {form: {email: "",code: ""}};},methods: {getCode(){axios.get("http://localhost:8080/getEmailCode",{params: {email: this.form.email}}).then(result => {this.$message({message: result.data,type: "success"})})},onSubmit() {console.log('submit!');//注册操作业务就不写了 一样的 整理好思路即可//用户信息和验证码传入到后台 进行判断}}}var Ctor = Vue.extend(Main)new Ctor().$mount('#app')script>body>
html>创建Controller接收请求
在com.xg.controller下创建EmailController
这里就直接将业务写在Controller里了,就不写Service了(懒,也直观)
package com.xg.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Random;@RestController
@CrossOrigin //允许跨域访问
public class EmailController {@AutowiredJavaMailSender javaMailSender; //可直接注入邮件发送的对象@Value("${spring.mail.username}") //动态获取配置文件中 发送邮件的账户private String sendemail;@GetMapping("/getEmailCode")public String getEmailCode(String email){//随机生成一个四位数的验证码int yzm = new Random().nextInt(9999) % (9999 - 1000 + 1) + 1000;//创建简单邮件消息SimpleMailMessage message = new SimpleMailMessage();//谁发的message.setFrom(sendemail);//谁要接收message.setTo(email);//邮件标题message.setSubject("欢迎访问星哥说JAVA");//邮件内容message.setText("您的验证码是"+yzm);javaMailSender.send(message);return "发送成功";}
}
思考
我们生成的验证码如何保存?保存在哪里?
如果单单是一个变量,多个用户同时访问,变量值会改变,此时我们的解决方案是什么的?
可以放在redis中,用户的邮箱作为key值进行存储即可
Gitee项目地址
好多同学抄代码也能抄错,一大堆问题,直接附Gitee项目地址
https://gitee.com/memoryzgx/sendemail.git
整理不易,感谢支持
学编程找星哥,么么哒
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！