SpringBoot项目实现QQ邮箱注册

注：其他邮箱同QQ邮箱操作过程都是一致，此处已QQ邮箱为例

一.环境准备

1.qq邮箱账号

2.SpringBoot环境项目

二.QQ邮箱配置

1.登录qq邮箱官方网站

2.找到设置→账户

 3.开启时，记得保存授权码，没有保存也没关系，可以进入管理服务中，账户安全中，重新申请授权码

三.什么是SMTP?

SMTP是指简单邮件传输协议（Simple Mail Transfer Protocol），它是用于在网络中传输电子邮件的标准协议。SMTP协议定义了电子邮件的传输方式和规则，它负责将发件人的邮件传输到接收人的邮件服务器上。

SMTP协议使用TCP/IP协议来传输邮件，它使用25号端口进行通信。在发送邮件时，客户端应用程序（如电子邮件客户端）通过SMTP协议与发件人的邮件服务器建立连接，并将邮件发送到服务器。服务器再将邮件传输到接收人的邮件服务器上，接收人可以通过POP3或IMAP协议来获取邮件。

SMTP协议不负责邮件的存储和管理，它只负责邮件的传输。因此，SMTP服务器通常是一个中转站，将邮件传输到目标邮件服务器上。SMTP协议还定义了一些命令和响应，用于建立连接、验证身份、传输邮件等操作。

SMTP协议的设计简单高效，使得它成为了互联网上最常用的电子邮件传输协议之一。无论是个人用户还是企业组织，都可以使用SMTP协议来发送和接收电子邮件。

四.SpringBoot依赖导入及配置文件配置

1.依赖导入

<!-- email辅助包 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
    <version>2.5.1</version>
</dependency>

2.application.properties配置

• 邮件传输协议，此处设定为SMTP

spring.mail.protocol=smtp

• SMTP邮件服务器的主机名或IP地址。--可以参考QQ邮箱官方文档

spring.mail.host=smtp.qq.com

• SMTP邮件服务器的端口号。

spring.mail.port=587

• SMTP邮件服务器的登录用户名 -- 开启邮箱发送的qq邮箱账户

spring.mail.username= ....@qq.com

• SMTP邮件服务器的登录密码 --此处配置上述邮箱中的授权码

spring.mail.password=

• 邮件的默认编码方式。

• 是否开启邮件调试模式，打印调试信息。

• 是否启用SMTP认证。

  spring.mail.default-encoding=utf-8
  spring.mail.properties.mail.debug=true
  spring.mail.properties.mail.smtp.auth=true

五.代码编写

• 请求参数：用户在首页输入邮箱，注：此处最好对邮箱格式校验

 @GetMapping("send")
    public ResultVO send(@RequestParam("email") String email) {
        log.debug("email:{}",email);
        //生成四位随机验证码
        Integer code = new Random().nextInt(8999) + 1000;
        log.debug("验证码:{}",code);
        //用于创建简单的邮件消息。通过SimpleMailMessage对象，
        // 你可以设置邮件的发送者、接收者、主题、正文等信息。
        SimpleMailMessage message = new SimpleMailMessage();
        //主题
        message.setSubject("验证码验证");
        //正文
        message.setText("验证码:" + code);
        //接受邮箱
        message.setTo(email);
        //发送者邮箱
        message.setFrom("。。。。@qq.com");
        //发送
        javaMailSender.send(message);
        //验证码缓存redis两分钟
        redisCode.saveEmailCode(email,code);

        return new ResultVO(StatusCode.SUCCESS);
    }

• 前端代码实现：VUE脚手架，element ui组件，axios

 前端邮箱加发送按钮代码实现

<el-form-item class="a" label="邮箱">
          <el-input placeholder="填写正确格式" v-model="user.email"></el-input>
          <button type="button" id="send-code-btn" @click="send()" style="background-color: skyblue" >发送验证码</button>
        </el-form-item>
        <el-form-item  class="a" label="验证码">
          <el-input placeholder="填写邮箱验证码" v-model="user.code"></el-input>
        </el-form-item>

 /**
     * 发送验证码方法
     */
    send() {
      //^ 表示匹配字符串的开始位置。
      //([a-zA-Z0-9_\-\.]+) 表示匹配一个或多个字母、数字、下划线、短横线或点号。
      //@ 表示匹配一个 @ 符号。
      //([a-zA-Z0-9_\-\.]+) 表示匹配一个或多个字母、数字、下划线、短横线或点号。
      //\. 表示匹配一个点号。
      //([a-zA-Z]{2,5}) 表示匹配两到五个字母。
      //$ 表示匹配字符串的结束位置。
      let email_regex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/
      //let email_regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
      if (!(email_regex.test(this.user.email))) {
        this.$message.error("邮箱格式格式不正确");
        return;
      }
      this.axios.get("http://localhost:8081/v1/users/send?email=" + this.user.email).then((response) =>{
        if (response.data.code == 1000) {
          this.$message.success("发送验证码成功");
        }else {
          alert("发送验证码失败");
          return;
        }

      });
      // 将按钮变为不可用状态
      var btn = document.getElementById('send-code-btn');
      btn.disabled = true;

      // 开始倒计时
      var count = 120;
      var timer = setInterval(function() {
        count--;
        btn.innerHTML = count + '秒后重新发送';
        if (count == 0) {
          clearInterval(timer);
          btn.innerHTML = '发送验证码';
          btn.disabled = false;
        }
      }, 1000);