如何利用node实现发送QQ邮箱验证码

开通QQ邮箱POP3/SMTP服务

登录QQ邮箱网址，进入设置选择账户tab页翻到最低下开启此服务

获取qq邮箱授权码

搭建node接口服务

思路

• 创建index.js文件

• 安装connect、body-parser、nodemailer模块

• 编写引入connect框架

• 编写引入bodyParser模块

• 引入nodemailer模块

开始安装插件

使用cmd命令提示或者Git一次执行以下安装命令

开始编写index.js文件程序

引入各个模块

let connect = require('connect'),         // 引入connect模块
   bodyParser = require('body-parser'),  // 引入body-parser解析模块
   nodemailer = require('nodemailer');   // 引入nodemailer模块

声明并定于发送邮件函数

async function sendMail(text,receive) {
let user = "703669046@qq.com";//自己的邮箱
let pass = "sfsdfsdfsggxcew"; //qq邮箱授权码
let to = `${receive}@qq.com`; //对方的邮箱
let transporter = nodemailer.createTransport({
host: "smtp.qq.com",
port: 587,
secure: false,
auth: {
user: user, // 用户账号
pass: pass, //授权码,通过QQ获取
},
});
let info = await transporter.sendMail({
from: `测试node发送邮箱<${user}>验证码`, // sender address
to: `测试验证码<${to}>`, // list of receivers
subject: "测试验证码", // Subject line
text: text, // plain text body
});
}

编写connect、body-parser解析模块

var app = connect()
.use(bodyParser.json())   //JSON解析
.use(bodyParser.urlencoded({ extended: true }))
//use()方法还有一个可选的路径字符串，对传入请求的URL的开始匹配。
//use方法来维护一个中间件队列

跨域请求设置

.use(function (req, res, next) {
//跨域处理
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');  //允许任何源
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');  //允许任何方法
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', '*');   //允许任何类型
res.writeHead(200, { "Content-Type": "text/plain;charset=utf-8" });    //utf-8转码
next();  //next 方法就是一个递归调用
})

编写发送qq邮箱验证码接口

.use('/emails', function (req, res, next) {
let qqEmail= req.body.email;
var obj = {
code:Math.ceil(Math.random()*1000)
};
let text=`验证码：${obj.code}.您正在使用登录功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏`
sendMail(text,qqEmail)
res.end(JSON.stringify(obj))
next();
})

设置端口

在var app = connect()后面接上

.listen(3331);

启动node服务

在index.js当前文件下开启cmd命令提示符或者Git命令框执行node index.js命令

前端模块

我是使用vue-cli+elementui

• html代码部分

<template>
   <div>
       <el-form
           :model="ruleForm"
           status-icon
           ref="ruleForm"
           label-width="100px"
           class="demo-ruleForm"
       >
           <el-form-item label="QQ" prop="email">
               <el-input type="email" v-model="ruleForm.email" autocomplete="off"></el-input>
               <el-button @click="handleCode">获取验证码</el-button>
           </el-form-item>
           <el-form-item label="验证码" prop="code">
               <el-input v-model.number="ruleForm.code"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
               <el-button @click="resetForm('ruleForm')">重置</el-button>
           </el-form-item>
       </el-form>
   </div>
</template>

效果图

js请求代码部分

import ajax from '../../utli/request'

export const getCheckCode = param => ajax.$post('/emails', param || {});

js事件部分

<script>
import {getCheckCode} from './api/form'
export default {
   data() {
       return {
           ruleForm: {
               email: "",
               checkPass: "",
               code: ""
           },
       };
   },
   methods: {
       submitForm(formName) {
           this.$refs[formName].validate(valid => {
               if (valid) {
                   alert("submit!");
               } else {
                   console.log("error submit!!");
                   return false;
               }
           });
       },
       resetForm(formName) {
           this.$refs[formName].resetFields();
       },
       async handleCode(){
           let params= {
               email:this.ruleForm.email
           }
           let res = await getCheckCode(params);
           if(res.state==200){
               console.log(res)
           }
       }
   }
};
</script>

发送qq验证给用户

成功收到邮箱验证码

来源：https://juejin.cn/post/7085698172571353095