SpringBoot+mail+Vue+实现发送邮件验证码

作者: Memory(星哥) Wechat:/QQ: 574373426
整理不易,感谢支持,欢迎 收藏 转发 分享
专注IT职业教育多年,学编程找星哥

SpringBoot整合mail实现发送邮件

    • 技术栈
    • 业务流程(重要)
    • 获取163邮箱授权码
    • 创建项目,测试类测试发送
      • 创建SpringBoot项目
      • 编写配置文件
      • 测试类测试
    • 准备前端
    • 创建Controller接收请求
    • 思考
    • Gitee项目地址

技术栈

前后端分离
后端采用 SpringBoot框架,整合 mail(spring旗下产品)
前端采用 Vue, ElementUI做一个简易的页面,利用axios发起ajax请求
开发工具 IDEA2020.3.4

背景: 当我们在注册,登陆,修改密码时,经常遇到发送验证码场景,目前发送手机验证码各大厂商提供的产品都是收费的,并且大部分个人用户无法访问,因此写一个邮箱收取验证码,优点就是免费,不需要注册,申请,开通等繁琐流程

业务流程(重要)

SpringBoot+mail+Vue+实现发送邮件验证码_第1张图片
我们要给用户输入的邮箱发送邮件
那么谁来发送这一封邮件呢?
当然是用我的邮箱账户写一封邮件,发送给用户输入的邮箱地址
我们现在需求是让系统自动使用我的邮箱账户给别人发送邮件
这样就是第三方使用自己的邮箱权限来发送
那么谁都可以让我的邮箱给别人发送邮件吗?这样岂不是很不安全
因此我们需要去邮箱服务器开启相关的协议,获取一个唯一的授权码
第三方会根据授权码来进行权限认证,因此这个授权码不要泄露给其他人

服务协议了解:
smtp: 发送邮件
pop3: 接收邮件

获取163邮箱授权码

国内用的最多的就是163邮箱和QQ邮箱
我这里采用163邮箱,QQ邮箱获取授权码可自行度娘
授权码: 是用于登录第三方邮件客户端的专用密码, 第三方知道你的授权吗,才能帮你发送邮件
授权码不要泄漏,万一别人用你邮箱给其他用户进行诈骗骚扰呢?

  1. 登录网页版邮箱(https://email.163.com/),进入邮箱首页。
    在设置中开启IMAP/SMTP 和 POP3/SMTP服务
    SpringBoot+mail+Vue+实现发送邮件验证码_第2张图片
    在点击开启时,会让你发送一个短信,验证你的身份,可以快速扫码发送即可,此时就会给你返回一个授权码,此授权码只显示一次,保存好
    SpringBoot+mail+Vue+实现发送邮件验证码_第3张图片
    重要:
    如果有的账户,服务默认就是开启的,此时你也不知道你的授权码时多少,怎么办呢?
    删除以下授权码,关闭服务,然后重新开启即可
    SpringBoot+mail+Vue+实现发送邮件验证码_第4张图片

创建项目,测试类测试发送

创建SpringBoot项目

这里使用阿里云脚手架创建: https://start.aliyun.com
SpringBoot+mail+Vue+实现发送邮件验证码_第5张图片
SpringBoot+mail+Vue+实现发送邮件验证码_第6张图片
在创建项目时勾选以下依赖,也可以手动在pom.xml中引入
web依赖
Java Mail Sender依赖
SpringBoot+mail+Vue+实现发送邮件验证码_第7张图片

手动引入依赖

<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.com
    host: smtp.163.com
    # 服务协议 smtp为发送邮件
    protocol: smtp
    # 编码集
    default-encoding: UTF-8
    # 发送邮件的账户
    username: [email protected]
    # 授权码 邮箱服务器提供的授权码,不是你邮箱的密码
    password: XXXXXXXXXXX
    # 开启一些权限
    test-connection: true
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            enable: true
            required: 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 {
    
    @Autowired
    JavaMailSender javaMailSender; //可直接注入邮件发送的对象
    
    @Value("${spring.mail.username}") //动态获取配置文件中 发送邮件的账户
    private String sendemail;

    @Test
    void contextLoads() {
        //随机生成一个四位数的验证码
        int yzm = new Random().nextInt(9999) % (9999 - 1000 + 1) + 1000;
        //创建简单邮件消息
        SimpleMailMessage message = new SimpleMailMessage();
        //发送邮件账户
        message.setFrom(sendemail);
        //谁要接收
        message.setTo("[email protected]");
        //邮件标题
        message.setSubject("欢迎访问星哥说JAVA,学编程找星哥");
        //邮件内容
        message.setText("您的验证码是"+yzm);
        javaMailSender.send(message);
    }

}

大功告成

准备前端

前后端分离
整合 Vue ElementUI Axios 使用cdn方式引入
效果如下
SpringBoot+mail+Vue+实现发送邮件验证码_第8张图片
代码如下:


<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 {

    @Autowired
    JavaMailSender 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

整理不易,感谢支持
学编程找星哥,么么哒

你可能感兴趣的:(java,vue,经验分享)