使用邮箱发送验证码
思路:用户注册的时候,输入邮箱,使用自己的邮箱给用户的邮箱发送验证码,验证码在后端程序发送,然后存到数据库里,当用户发送过来的时候读取出来比对。
设置自己邮箱的 SMTP
可以是 qq 邮箱或网易云。这里以 qq 邮箱举例。
登陆邮箱 –> 设置 –> 账户
然后开发后端逻辑
环境:npm i nodemailer express body-parser cors
var nodemailer = require("nodemailer");
var express = require("express");
var bodyparser = require("body-parser");
var cors = require("cors");
var app = express();
app.use(cors());
app.use(bodyparser.urlencoded({ extend: false }));
var transporter = nodemailer.createTransport({
//邮件传输
host: "smtp.qq.com", //qq smtp服务器地址
secureConnection: false, //是否使用安全连接,对https协议的
port: 465, //qq邮件服务所占用的端口
auth: {
user: "289483936@qq.com", //开启SMTP的邮箱,有用发送邮件
pass: "pyyorvhngqkfbjid", //授权码
},
});
app.post("/getlma", function (req, res) {
//调用指定的邮箱给用户发送邮件
var code = "";
while (code.length < 5) {
code += Math.floor(Math.random() * 10);
}
var mailOption = {
from: "289483936@qq.com", // 发件人
to: "2102193536@qq.com", //收件人
subject: "XX注册校验码", //纯文本
html: "<h1>欢迎注册XX系统,您本次的注册验证码为:" + code + "</h1>",
};
transporter.sendMail(mailOption, function (error, info) {
if (error) {
res.send("error");
return console.info(error);
} else {
res.send("yes");
console.info("Message send" + code);
}
});
});
app.listen(3000, function (err) {
if (err) {
console.info(err);
} else {
console.info("服务器开启成功。。。");
}
});
最后前端
<input type="button" onclick="send()" id="emialcore" value="发送验证码" />
<input type="text" name="code" placeholder="请输入验证码..." id="code" />
// input
var code = document.getElementById("code");
var send = function () {
// 获取验证码
window
.fetch("http://localhost:3000/getlma", {
body: JSON.stringify({ suer: "宋宇" }), // must match 'Content-Type' header
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: {
"user-agent": "Mozilla/4.0 MDN Example",
"content-type": "application/json",
},
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // *client, no-referrer
})
.then((res) => {
console.log(res);
return res.json();
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
};