SpringBoot 发送邮箱验证码（HTML模板）_邮件验证码html

作者：从前慢现在也慢 | 2024-06-07 17:12:15

踩

邮件验证码html

在 Java 使用 JavaMailSenderImpl 实现发送 QQ 邮件中详细的讲述了在普通 Java 项目中如何使用QQ邮箱发送邮件。

在本文中会继续详细的为大家讲解如何在 SpringBoot 中更简单的发送邮件。

导入 Mail 和 Thymeleaf 依赖

<!--mail依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>
<!--thymeleaf依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
1
2
3
4
5
6
7
8
9
10

在 application.yml 文件中设置参数

邮箱授权码获取教程：Java 使用 JavaMailSenderImpl 实现发送 QQ 邮件

#设置邮箱
spring:
  mail:
    host: smtp.qq.com    #邮箱服务器地址
    username: test@qq.com   #邮箱账号
    password: **********       #邮箱授权码
    default-encoding: utf-8    #默认编码
#邮件发件人
mail:
  fromMail:
    fromAddress: test@qq.com
1
2
3
4
5
6
7
8
9
10
11

编写验证码的生成类

/**
 * @author Jie
 */
@Service
public class VerificationCodeServiceImpl implements VerificationCodeService {

    /**
     * 生产的验证码位数
     */
    private final int generateVerificationCodeLength=4;

    private final String[] metaCode={"0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
            "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O",
            "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};

    @Override
    public String generateVerificationCode() {
        Random random = new Random();
        StringBuilder verificationCode = new StringBuilder();
        while (verificationCode.length()<generateVerificationCodeLength){
            int i = random.nextInt(metaCode.length);
            verificationCode.append(metaCode[i]);
        }
        return verificationCode.toString();
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

编写邮件的服务类

/**
 * @author Jie
 */
@Service
public class EmailServiceImpl implements EmailService {

    @Autowired
    private JavaMailSender mailSender;

    /**
     * 邮件发件人
     */
    @Value("${mail.fromMail.fromAddress}")
    private String fromAddress;

    @Autowired
    TemplateEngine templateEngine;

    @Autowired
    private VerificationCodeService verificationCodeService;


    @Override
    public boolean sendEmailVerificationCode(String toAddress) {
        //调用 VerificationCodeService 生产验证码
        String verifyCode = verificationCodeService.generateVerificationCode();

        //创建邮件正文
        Context context = new Context();
        context.setVariable("verifyCode", Arrays.asList(verifyCode.split("")));

        //将模块引擎内容解析成html字符串
        String emailContent = templateEngine.process("EmailVerificationCode", context);
        MimeMessage message=mailSender.createMimeMessage();
        try {
            //true表示需要创建一个multipart message
            MimeMessageHelper helper=new MimeMessageHelper(message,true);
            helper.setFrom(fromAddress);
            helper.setTo(toAddress);
            helper.setSubject("注册验证码");
            helper.setText(emailContent,true);
            mailSender.send(message);
            return true;
        }catch (MessagingException e) {
            return false;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

编写验证码 HTML 模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>邮箱验证码</title>
    <style>
        table {
            width: 700px;
            margin: 0 auto;
        }

        #top {
            width: 700px;
            border-bottom: 1px solid #ccc;
            margin: 0 auto 30px;
        }

        #top table {
            font: 12px Tahoma, Arial, 宋体;
            height: 40px;
        }

        #content {
            width: 680px;
            padding: 0 10px;
            margin: 0 auto;
        }

        #content_top {
            line-height: 1.5;
            font-size: 14px;
            margin-bottom: 25px;
            color: #4d4d4d;
        }

        #content_top strong {
            display: block;
            margin-bottom: 15px;
        }

        #content_top strong span {
            color: #f60;
            font-size: 16px;
        }

        #verificationCode {
            color: #f60;
            font-size: 24px;
        }

        #content_bottom {
            margin-bottom: 30px;
        }

        #content_bottom small {
            display: block;
            margin-bottom: 20px;
            font-size: 12px;
            color: #747474;
        }

        #bottom {
            width: 700px;
            margin: 0 auto;
        }

        #bottom div {
            padding: 10px 10px 0;
            border-top: 1px solid #ccc;
            color: #747474;
            margin-bottom: 20px;
            line-height: 1.3em;
            font-size: 12px;
        }

        #content_top strong span {
            font-size: 18px;
            color: #FE4F70;
        }

        #sign {
            text-align: right;
            font-size: 18px;
            color: #FE4F70;
            font-weight: bold;
        }

        #verificationCode {
            height: 100px;
            width: 680px;
            text-align: center;
            margin: 30px 0;
        }

        #verificationCode div {
            height: 100px;
            width: 680px;

        }

        .button {
            color: #FE4F70;
            margin-left: 10px;
            height: 80px;
            width: 80px;
            resize: none;
            font-size: 42px;
            border: none;
            outline: none;
            padding: 10px 15px;
            background: #ededed;
            text-align: center;
            border-radius: 17px;
            box-shadow: 6px 6px 12px #cccccc,
            -6px -6px 12px #ffffff;
        }

        .button:hover {
            box-shadow: inset 6px 6px 4px #d1d1d1,
            inset -6px -6px 4px #ffffff;
        }

    </style>
</head>
<body>
<table>
    <tbody>
    <tr>
        <td>
            <div id="top">
                <table>
                    <tbody><tr><td></td></tr></tbody>
                </table>
            </div>

            <div id="content">
                <div id="content_top">
                    <strong>尊敬的用户：您好！</strong>
                    <strong>
                        您正在进行<span>注册账号</span>操作，请在验证码中输入以下验证码完成操作：
                    </strong>
                    <div id="verificationCode">
                        <button class="button" th:each="a:${verifyCode}">[[${a}]]</button>
                    </div>
                </div>
                <div id="content_bottom">
                    <small>
                        注意：此操作可能会修改您的密码、登录邮箱或绑定手机。如非本人操作，请及时登录并修改密码以保证帐户安全
                        <br>（工作人员不会向你索取此验证码，请勿泄漏！)
                    </small>
                </div>
            </div>
            <div id="bottom">
                <div>
                    <p>此为系统邮件，请勿回复<br>
                        请保管好您的邮箱，避免账号被他人盗用
                    </p>
                    <p id="sign">——Romantik</p>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

测试

@SpringBootTest
class ServiceApplicationTests {

    @Autowired
    private EmailService emailService;

    @Test
    void contextLoads() {
        boolean test = emailService.sendEmailVerificationCode("test.com");
        System.out.println(test);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

查看邮件

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/686308