Node.js 实现 QQ 邮箱验证码发送完整教程

作者:栖木

时间:2026-10-25

浏览:612

本文详解如何使用 Node.js 搭建服务发送 QQ 邮箱验证码。涵盖开启 POP3/SMTP 服务、获取授权码、安装 connect 等依赖,以及编写后端接口与前端 Vue 交互的完整代码示例,帮助开发者快速实现邮箱验证功能。

文章目录

开通QQ邮箱POP3/SMTP服务

在账户页面滚动至最底部,找到并开启 POP3/SMTP 服务选项。

开通QQ邮箱POP3/SMTP服务

开启服务后,系统会生成一个用于第三方登录的授权码,请妥善保存该授权码。

开通QQ邮箱POP3/SMTP服务

接下来开始构建 Node.js 后端接口服务,用于处理邮件发送请求。

整体实现思路包括:创建入口文件、安装必要依赖库、引入框架模块、定义发送函数、配置解析中间件、处理跨域请求、编写具体接口逻辑以及设置服务端口。

  • 在项目根目录下创建 index.js 作为主程序入口文件。
  • 使用包管理器安装 connect、body-parser 以及 nodemailer 这三个核心模块。
  • 在代码中引入 connect 框架,用于构建简易的 HTTP 服务器。
  • 同时引入 bodyParser 模块,用于解析 HTTP 请求体中的数据。
  • 引入 nodemailer 模块,这是 Node.js 中用于发送邮件的标准库。

执行插件安装步骤,确保所有依赖已正确下载。

打开 CMD 命令提示符或 Git Bash,依次执行以下安装命令以获取所需模块。

开通QQ邮箱POP3/SMTP服务

开始编写 index.js 文件中的具体业务逻辑代码。

在文件头部引入之前安装的各个模块,包括 connect、bodyParser 和 nodemailer。

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

声明并定义一个异步函数 sendMail,用于封装发送邮件的核心逻辑。

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 应用实例,并挂载 bodyParser 中间件以解析 JSON 和 URL 编码的请求体。

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() 方法指定端口。

.listen(3331);

完成代码编写后,启动 Node.js 服务以运行程序。

在 index.js 所在目录打开命令行工具,执行 node index.js 命令启动服务。

前端部分采用 Vue CLI 配合 Element UI 组件库进行开发。

前端技术栈选定为 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>

前端界面展示效果如图,包含邮箱输入及操作按钮。

开通QQ邮箱POP3/SMTP服务

编写 JavaScript 请求代码,封装调用后端接口的逻辑。

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

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

定义前端事件处理函数,响应用户点击获取验证码的操作。

<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 邮箱地址发送至后端。

开通QQ邮箱POP3/SMTP服务

后端处理成功后,用户将收到包含验证码的 QQ 邮件。

开通QQ邮箱POP3/SMTP服务

总结整个实现过程,确保各环节配置无误。

至此,关于利用 Node.js 实现发送 QQ 邮箱验证码的教程介绍完毕,更多相关内容可搜索本站历史文章或继续浏览后续文章,感谢支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章