SmtpJS发送邮件教程

什么是SmtpJS?


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

开通POP3/SMTP服务


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

导入插件


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

<script src="https://smtpjs.com/v3/smtp.js">
</script>

发送邮件


参数说明

参数说明
Host你所用邮箱的smtp地址
Username你的邮箱用户名(如xxx@qq.com)
Password你的邮箱密码(之前开通服务的授权码)
To收件人邮箱地址
From发件人邮箱地址
Subject邮件主题
Body邮件内容
<%@ 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>

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

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

邮箱pop地址smtp地址端口
188 邮箱pop3.188.comsmtp.188.com25
163 邮箱pop3.163.comsmtp.163.com25
126 邮箱pop3.126.comsmtp.126.com25
netease 邮箱pop.netease.comsmtp.netease.com25
yeah 邮箱pop.yeah.netsmtp.yeah.net25
QQ 邮箱pop.qq.comsmtp.qq.com465或587
网易企业邮箱pop3.163.comsmtp.qiye.163.com994
腾讯企业邮箱pop.qq.comsmtp.exmail.qq.com25

加密SMTP


在官网点击Encrypt your SMTP Credentials
在这里插入图片描述
仍以QQ邮箱为例,点击Generate security token
在这里插入图片描述
然后生成了一个密钥
在这里插入图片描述
替换成你的密钥即可

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
如果文章对你有帮助,记得关注点赞收藏❤

评论 33
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吾仄lo咚锵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值