尚筹网使用QQ邮箱发送注册验证码

写在前面，学习SSM框架和springboot知识，以尚硅谷尚硅谷尚筹网为例，会员注册需要发送验证码，由于短信验证码费用较高，可能测试就要用几百条，所以我选择使用邮箱发送验证码，而且我认为视频中老师在讲解maven依赖的时候有点混乱，所以就用了之前项目中用到过的邮箱。

后端部分代码

1.加入javax.mail的依赖

在工具工程中加入如下依赖：

<dependency>
	  <groupId>javax.mail</groupId>
	  <artifactId>mail</artifactId>
	  <version>1.4.7</version>
</dependency>

2.配置属性及编写工具方法

在需要用到的工程下配置属性，在工具工程下编写工具方法

2.1编写配置属性类（atcrowdfunding12-member-authentication-consumer）

package com.studyhub.crowd.config;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * @author haoren
 * @create 2021-01-18 9:18
 */
@Component
@ConfigurationProperties(prefix = "send.email")
@NoArgsConstructor
@AllArgsConstructor
@Data
public class EmailConfigProperties {
	//发件人地址
    private String sendEmailAccount;
	//qq邮箱授权码
    private String sendEmailPassword;
	//邮件服务器
    private String sendEmailSMTPServer;
	//SMTP端口号
    private String smtpPort;

}

2.2在application.yml中配置属性（atcrowdfunding12-member-authentication-consumer）

send:
  email:
    sendEmailAccount: "填写自己的QQ邮箱"
    sendEmailPassword: "填写自己的授权码"
    sendEmailSMTPServer: "smtp.qq.com" #邮件服务器
    smtpPort: "465" #默认端口号

2.3编写工具方法（atcrowdfunding05-common-util）

参考代码如下

/**
     * 发送邮件
     * @param sendEmailAccount
     * @param sendEmailPasswd
     * @param smtpServer
     * @param smtpPort
     * @param receiveMailAccount
     * @param info
     * @return
     */
public static ResultEntity<String> SendEmail(String sendEmailAccount, String sendEmailPasswd, String smtpServer, String smtpPort, String receiveMailAccount, String info)  {
        // 1. 创建参数配置, 用于连接邮件服务器的参数配置
        Properties props = new Properties();                    // 参数配置
        props.setProperty("mail.transport.protocol", "smtp");   // 使用的协议（JavaMail规范要求）
        props.setProperty("mail.smtp.host", smtpServer);   // 发件人的邮箱的 SMTP 服务器地址
        props.setProperty("mail.smtp.auth", "true");            // 需要请求认证
        // PS: 某些邮箱服务器要求 SMTP 连接需要使用 SSL 安全认证 (为了提高安全性, 邮箱支持SSL连接, 也可以自己开启),
        //     如果无法连接邮件服务器, 仔细查看控制台打印的 log, 如果有有类似 “连接失败, 要求 SSL 安全连接” 等错误,
        //     打开下面 /* ... */ 之间的注释代码, 开启 SSL 安全连接。

        // SMTP 服务器的端口 (非 SSL 连接的端口一般默认为 25, 可以不添加, 如果开启了 SSL 连接,
        //                  需要改为对应邮箱的 SMTP 服务器的端口, 具体可查看对应邮箱服务的帮助,
        //                  QQ邮箱的SMTP(SLL)端口为465或587, 其他邮箱自行去查看)
        //final String smtpPort = "465";
        props.setProperty("mail.smtp.port", smtpPort);
        props.setProperty("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
        props.setProperty("mail.smtp.socketFactory.fallback", "false");
        props.setProperty("mail.smtp.socketFactory.port", smtpPort);


        // 2. 根据配置创建会话对象, 用于和邮件服务器交互
        Session session = Session.getDefaultInstance(props);
        session.setDebug(true);                                 // 设置为debug模式, 可以查看详细的发送 log

        // 3. 创建一封邮件
        try {
            MimeMessage message = createMessage(session, sendEmailAccount, receiveMailAccount,info);

            // 4. 根据 Session 获取邮件传输对象
            Transport transport = session.getTransport();

            // 5. 使用 邮箱账号 和 密码 连接邮件服务器, 这里认证的邮箱必须与 message 中的发件人邮箱一致, 否则报错
            //
            //    PS_01: 成败的判断关键在此一句, 如果连接服务器失败, 都会在控制台输出相应失败原因的 log,
            //           仔细查看失败原因, 有些邮箱服务器会返回错误码或查看错误类型的链接, 根据给出的错误
            //           类型到对应邮件服务器的帮助网站上查看具体失败原因。
            //
            //    PS_02: 连接失败的原因通常为以下几点, 仔细检查代码:
            //           (1) 邮箱没有开启 SMTP 服务;
            //           (2) 邮箱密码错误, 例如某些邮箱开启了独立密码;
            //           (3) 邮箱服务器要求必须要使用 SSL 安全连接;
            //           (4) 请求过于频繁或其他原因, 被邮件服务器拒绝服务;
            //           (5) 如果以上几点都确定无误, 到邮件服务器网站查找帮助。
            //
            //    PS_03: 仔细看log, 认真看log, 看懂log, 错误原因都在log已说明。
            transport.connect(sendEmailAccount, sendEmailPasswd);

            // 6. 发送邮件, 发到所有的收件地址, message.getAllRecipients() 获取到的是在创建邮件对象时添加的所有收件人, 抄送人, 密送人
            transport.sendMessage(message, message.getAllRecipients());

            // 7. 关闭连接
            transport.close();
            return ResultEntity.successWithoutData();
        } catch (Exception e) {
            e.printStackTrace();
            return ResultEntity.failed(e.getMessage());
        }
    }

    /**
     * 创建一封只包含文本的简单邮件
     *
     * @param session 和服务器交互的会话
     * @param sendMail 发件人邮箱
     * @param receiveMail 收件人邮箱
     * @return
     * @throws Exception
     */
    public static MimeMessage createMessage(Session session, String sendMail, String receiveMail, String info) throws Exception {
        // 1. 创建一封邮件
        MimeMessage message = new MimeMessage(session);
        // 2. From: 发件人（昵称有广告嫌疑，避免被邮件服务器误认为是滥发广告以至返回失败，请修改昵称）
        message.setFrom(new InternetAddress(sendMail, "尚筹网", "UTF-8"));
        // 3. To: 收件人（可以增加多个收件人、抄送、密送）
        message.setRecipient(MimeMessage.RecipientType.TO, new InternetAddress(receiveMail, "xx用户", "UTF-8"));
        // 4. Subject: 邮件主题（标题有广告嫌疑，避免被邮件服务器误认为是滥发广告以至返回失败，请修改标题）
        message.setSubject("账户提示", "UTF-8");
        // 5. Content: 邮件正文（可以使用html标签）（内容有广告嫌疑，避免被邮件服务器误认为是滥发广告以至返回失败，请修改发送内容）
        message.setContent(info, "text/html;charset=UTF-8");
        // 6. 设置发件时间
        message.setSentDate(new Date());
        // 7. 保存设置
        message.saveChanges();

        return message;
    }

    /**
     * 生成六位验证码
     * @return
     */
    public static String messageCode() {
        Random random = new Random();

        Integer sum = random.nextInt(10);
        for(int i = 0; i < 5; i++) {
            sum *= 10;
            sum += random.nextInt(10);
        }

        return String.valueOf(sum);
    }

不知道为什么，在测试时居然生成了一个五位验证码

2.4编写test方法测试

import com.studyhub.crowd.CrowdAuthConsumer;
import com.studyhub.crowd.config.EmailConfigProperties;
import com.studyhub.crowd.utils.CrowdUtils;
import com.studyhub.crowd.utils.ResultEntity;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

/**
 * @author haoren
 * @create 2021-01-17 13:32
 */
@SpringBootTest(classes = {CrowdAuthConsumer.class})
@RunWith(SpringRunner.class)
public class CodeTest {
    @Autowired
    EmailConfigProperties properties;

    Logger logger = LoggerFactory.getLogger(CodeTest.class);

    @Test
    public void testSendEmail() {
        String code = CrowdUtils.messageCode();
        System.out.println(code);
        String info = "【尚筹网】尊敬的用户你好，你注册的验证码：" + code + "，如非本人操作，请忽略。";
        try {
            ResultEntity<String> stringResultEntity = CrowdUtils.SendEmail(properties.getSendEmailAccount(),
                    properties.getSendEmailPassword(),
                    properties.getSendEmailSMTPServer(),
                    properties.getSmtpPort(),
                    "xxxx@xxx.xxx", //这里填写要发送的邮箱
                    info);

            logger.info(stringResultEntity.getResult() );
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

前端部分代码

静态页面效果图

1.表单部分

<form class="form-signin" role="form" action="表单提交的地址" method="post">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
        <p th:text="${message}"></p>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" name="loginAcct" id="inputSuccess4" placeholder="请输入登录账号" autofocus required="required">
            <span class="glyphicon glyphicon-info-sign form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" name="userPswd" id="inputSuccess4" placeholder="请输入登录密码" style="margin-top:10px;" required="required">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" name="email" id="inputSuccess4" placeholder="请输入邮箱地址" style="margin-top:10px;" required="required">
            <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>

        <div class="form-group has-success 2">
            <input type="text" class="form-control" name="username" id="inputSuccess4" placeholder="请输入昵称" style="margin-top:10px;" required="required">
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>

        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" name="code" id="inputSuccess4" placeholder="请输入验证码" style="margin-top:10px;" required="required">
            <span class="glyphicon glyphicon-comment form-control-feedback"></span>
        </div>
        <button type="button" id="sendBtn" class="btn btn-lg btn-success btn-block" >获取验证码</button>
        <button type="submit" class="btn btn-lg btn-success btn-block" > 注册</button>

2.js部分代码

<script type="text/javascript">
        $(function () {
            $("#sendBtn").click(function () {
            //设置点击后60s禁用
                var obj = $(this);
                var time = 59;
                obj.attr("disabled", "disabled");
                var timer = setInterval(function (){
                    var temp = time--;
                    //obj.attr("value", temp+"s后获取验证码");
                    obj.text(temp+"s后获取验证码")
                    if (temp <= 0) {
                        obj.removeAttr("disabled");
                        obj.text("获取验证码");
                        clearInterval(timer);
                        return ;
                    }
                }, 1000)

                var email = $.trim( $("[name=email]").val());
                //发送ajax请求 让服务器发送验证码
                $.ajax({
                     url : "auth/member/send/email.json",
                     type : "post",
                     data :  {
                        "email":email,
                    },
                    dataType: "json",
                    success: function (res) {
                        var result = res.result;
                        console.log(res)
                        if (result == "SUCCESS") {
                            layer.msg("发送成功！");
                        }

                        if (result == "FAILED") {
                            layer.msg("发送失败，请重试！");
                        }

                    },
                    error:function(response){
                        layer.msg(response.status + " " + response.statusText);
                    }
                })
            })
        })
    </script>

附录

github仓库
如有错误望指正，感谢！