SmtpJS发送邮件教程

红太狼 2023-02-16 01:48 49阅读 0赞

### SmtpJS ###

*  什么是SmtpJS？
 *  开通POP3/SMTP服务
 *  导入插件
 *  发送邮件
 *  加密SMTP
 *  含附件

# 什么是SmtpJS？ #

--------------------

[SmtpJS][]是一款通过前端js代码发送邮件的插件，导入插件后，只需简单几行代码就能实现邮件发送。当然了，由于是前端，其安全性自然比后端javamail封装等弱一点，不过SmtpJS十分简易方便，强力安利。

# 开通POP3/SMTP服务 #

--------------------

在介绍SmtpJS使用前，我们需要先准备一个开通POP3/SMTP服务的邮箱，如果已有，可以跳过此步骤。  
我们以QQ邮箱为例，登录QQ邮箱后，设置->账户  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70]  
找到POP3/SMTP服务点击开启  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 1]  
完成相应密保验证  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 2]  
之后获取对应授权码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 3]  
至此你的QQ邮箱就开通了POP3/SMTP服务。

# 导入插件 #

--------------------

去到[SmtpJS官网][SmtpJS]下载smtp.js  
我也上传到了[github][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 4]  
如果不想下载的话也可以用官网地址，不过还是推荐前者。

# 发送邮件 #

--------------------

参数说明

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Host</td> 
   <td>你所用邮箱的smtp地址</td> 
  </tr> 
  <tr> 
   <td>Username</td> 
   <td>你的邮箱用户名（如xxx@qq.com）</td> 
  </tr> 
  <tr> 
   <td>Password</td> 
   <td>你的邮箱密码(之前开通服务的授权码)</td> 
  </tr> 
  <tr> 
   <td>To</td> 
   <td>收件人邮箱地址</td> 
  </tr> 
  <tr> 
   <td>From</td> 
   <td>发件人邮箱地址</td> 
  </tr> 
  <tr> 
   <td>Subject</td> 
   <td>邮件主题</td> 
  </tr> 
  <tr> 
   <td>Body</td> 
   <td>邮件内容</td> 
  </tr> 
 </tbody> 
</table>

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>发送邮件测试</title>
     <%
            pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <script type="text/javascript" src="${APP_PATH}/static/js/smtp.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    Email.send({ 
        Host : "smtp.yourisp.com",
        Username : "username",
        Password : "password",
        To : 'them@website.com',
        From : "you@isp.com",
        Subject : "This is the subject",
        Body : "And this is the body"
    }).then(
      message => alert(message)
    );
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 5]  
至此我们就成功的发送了邮件！(。・∀・)ノ

附上各邮箱的端口及smtp地址：

<table> 
 <thead> 
  <tr> 
   <th>邮箱</th> 
   <th>pop地址</th> 
   <th>smtp地址</th> 
   <th>端口</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>188 邮箱</td> 
   <td>pop3.188.com</td> 
   <td>smtp.188.com</td> 
   <td>25</td> 
  </tr> 
  <tr> 
   <td>163 邮箱</td> 
   <td>pop3.163.com</td> 
   <td>smtp.163.com</td> 
   <td>25</td> 
  </tr> 
  <tr> 
   <td>126 邮箱</td> 
   <td>pop3.126.com</td> 
   <td>smtp.126.com</td> 
   <td>25</td> 
  </tr> 
  <tr> 
   <td>netease 邮箱</td> 
   <td>pop.netease.com</td> 
   <td>smtp.netease.com</td> 
   <td>25</td> 
  </tr> 
  <tr> 
   <td>yeah 邮箱</td> 
   <td>pop.yeah.net</td> 
   <td>smtp.yeah.net</td> 
   <td>25</td> 
  </tr> 
  <tr> 
   <td>QQ 邮箱</td> 
   <td>pop.qq.com</td> 
   <td>smtp.qq.com</td> 
   <td>465或587</td> 
  </tr> 
  <tr> 
   <td>网易企业邮箱</td> 
   <td>pop3.163.com</td> 
   <td>smtp.qiye.163.com</td> 
   <td>994</td> 
  </tr> 
  <tr> 
   <td>腾讯企业邮箱</td> 
   <td>pop.qq.com</td> 
   <td>smtp.exmail.qq.com</td> 
   <td>25</td> 
  </tr> 
 </tbody> 
</table>

# 加密SMTP #

--------------------

在官网点击Encrypt your SMTP Credentials  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 6]  
仍以QQ邮箱为例，点击Generate security token  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 7]  
然后生成了一个密钥  
![在这里插入图片描述][2020060713453196.png]  
替换成你的密钥即可

Email.send({ 
        SecureToken : "密钥",
        To : 'them@website.com',
        From : "you@isp.com",
        Subject : "This is the subject",
        Body : "And this is the body"
    }).then(
      message => alert(message)
    );

# 含附件 #

--------------------

即多一个Attachments参数

Email.send({ 
        SecureToken : "密钥",
        To : 'them@website.com',
        From : "you@isp.com",
        Subject : "This is the subject",
        Body : "And this is the body",
    	Attachments : [
    	{ 
    		name : "smtpjs.png",
    		path : "https://networkprogramming.files.wordpress.com/2017/11/smtpjs.png"
    	}]
    }).then(
      message => alert(message)
    );

> **原创不易，请勿转载**（本不富裕的访问量雪上加霜 ）  
> 博主首页：[https://blog.csdn.net/qq\_45034708][https_blog.csdn.net_qq_45034708]  
> *如果文章对你有帮助，记得关注点赞收藏❤*

[SmtpJS]: https://www.smtpjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200607123708296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200607123854477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200607124143484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200607124244904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[github]: https://github.com/wuzelong/CSDNBLOG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200607124554930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200607135921122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200607133242686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020060713431132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[2020060713453196.png]: https://img-blog.csdnimg.cn/2020060713453196.png
[https_blog.csdn.net_qq_45034708]: https://blog.csdn.net/qq_45034708