一.邮箱配置
这里以QQ邮箱为例,网易邮箱类似.
设置->账号
二.后端服务搭建
index.js
const express = require('express')
const router = require('./router');
const app = express()
// 使用路由文件
app.use('/',router);
app.listen(3000, () => {
console.log('server running ...');
})router.js
const express = require('express');
const router = express.Router();
const {createSixNum,send}=require('./utils')
//发送邮件
router.get('/getemail', async (req, res) => {
try {
const { mail } = req.query; //获取前端传过来的邮箱
let code = createSixNum(); // 随机生成6位验证码
send(mail, code) //发送邮件的函数,传入邮箱和6位验证码
.then(() => {
res.json({ msg: '验证码发送成功' });
})
.catch((err) => {
console.error(err);
res.json({ msg: '验证码发送失败' });
});
} catch (error) {
console.error(error);
res.status(500).json({ message: '邮件发送失败' });
}
});util.js
安装nodemailer
npm i nodemailerconst nodemailer = require('nodemailer')
// 随机产生六位验证码
function createSixNum() {
let Num = "";
for (var i = 0; i < 6; i++) {
Num += Math.floor(Math.random() * 10);
}
return Num;
}
// 创建一个SMTP客户端对象
let transporter = nodemailer.createTransport({
host: "smtp.qq.com", // 发送方邮箱 qq 通过lib/wel-konw
port: 465,
secure: true, // true for 465, false for other ports
auth: {
user: '2580578725@qq.com', // 发送方邮箱地址
pass:***** // mtp 验证码 这个有了才可以发送邮件，可以qq邮箱去查看自己的码
}
})
//发送邮件
function send(mail,code) {
const mailContent = `
<p>尊敬的用户:</p>
<p>您好！</p>
<p>***为您提供了以下验证码，用于完成您的操作：</p>
<p><span style="font-weight: bold; color: #DC143C;">${code}</span></p>
<p>请注意，此验证码的有效期为5分钟。</p>
<p>感谢您的使用和支持！</p>
<p>祝您一天愉快！</p>
`;
// 邮件信息
let mailobj = {
from: '<2580578725@qq.com>', // 发送方地址自定义
to: mail, // 接收方地址
subject: "注册验证码", // 主题内容
html: mailContent // 使用html属性设置HTML内容
}
return new Promise((reslove, reject) => {
// 发送邮件
transporter.sendMail(mailobj, (err, data) => {
if (err) {
reject()
} else {
reslove()
}
})
})
}
module.exports = { createSixNum ,send}至此发送邮件的后端核心就完成了,接下来我们要将验证码缓存5分钟,给用户进行操作,过了5分钟,验证码会自动失效.
安装node-cache
npm i node-cacherouter.js(全)
...
const NodeCache = require("node-cache");
const myCache = new NodeCache();
...
let code = createSixNum(); // 随机验证码
// 将code存入缓存
myCache.set("code", code, 300); // 缓存5分钟
send(mail, code) //发送邮件的函数,传入邮箱和6位验证码
.then(() => {
res.json({ msg: '验证码发送成功' });
})
.catch((err) => {
console.error(err);
res.json({ msg: '验证码发送失败' });
});
至此后端的服务搭建完毕,我们可以配合登录或者注册来使用.假如是邮箱验证注册,我们在验证码缓存的时候,可以在注册的接口中获取验证码
myCache.get("code");来与前端传过来的验证码进行比对,完成注册.如果比对成功可以用
myCache.del("code");清空缓存,优化性能.
后面我会出一期完整的邮箱验证注册和登录模块.包括密码加密,JWT生成token,用户信息存储到数据库,Cookie实现无感登录和时效性.
三.Vue前端
由于是从项目中扣出来的,这里的axios请求我进行了封装,单个请求封装就有些多余.大家可以改改,能够将邮箱发过去就好了
axios封装
util.js
import axios from "axios";
const http = axios.create({
baseURL: 'http://127.0.0.1:3000', // 注意这里的双斜杠
timeout: 5000
});
// 请求拦截器
http.interceptors.request.use(config => {
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
http.interceptors.response.use(response => {
return response.data;
}, error => {
return Promise.reject(error);
});
export default http;api.js
import http from '@/utils/http';
//email
export async function getEmailAPI(mail) {
const response = await http({
url: 'getemail',
method:'get',
params: {mail}
});
return response; // 返回响应数据
}
这里我传的是params参数,如果你是axios.get('..',mail)... 后端记得修改为req.body
发送请求
import {getEmailAPI} from './api'
//邮件
function sendemail(){
//邮件正则
const qqEmailRegex = /^[1-9]\d{4,10}@qq\.com$/;
if (qqEmailRegex.test(email.value)) {
getEmailAPI(email.value) //email.value input的值
.then(response=>{
console.log(response)
})
.catch(error=>{
console.log(error)
})
} else {
console.log('邮件格式不正确')
}
}后续再加上冷却,多长时间才可以发下一封.以及进行下面的操作.
如果有不对或者优化的地方可以指正,如果使用时出现了问题,可以留言评论,大家一起解决!
