怎么利用node實(shí)現(xiàn)發(fā)送QQ郵箱驗(yàn)證碼

這篇文章主要介紹“怎么利用node實(shí)現(xiàn)發(fā)送QQ郵箱驗(yàn)證碼”，在日常操作中，相信很多人在怎么利用node實(shí)現(xiàn)發(fā)送QQ郵箱驗(yàn)證碼問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么利用node實(shí)現(xiàn)發(fā)送QQ郵箱驗(yàn)證碼”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

開(kāi)通QQ郵箱POP3/SMTP服務(wù)

登錄QQ郵箱網(wǎng)址，進(jìn)入設(shè)置選擇賬戶(hù)tab頁(yè)翻到最低下開(kāi)啟此服務(wù)

獲取qq郵箱授權(quán)碼

搭建node接口服務(wù)

思路

• 創(chuàng)建index.js文件

• 安裝connect、body-parser、nodemailer模塊

• 編寫(xiě)引入connect框架

• 編寫(xiě)引入bodyParser模塊

• 引入nodemailer模塊

開(kāi)始安裝插件

使用cmd命令提示或者Git一次執(zhí)行以下安裝命令

開(kāi)始編寫(xiě)index.js文件程序

引入各個(gè)模塊

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

聲明并定于發(fā)送郵件函數(shù)

async function sendMail(text,receive) {
	let user = "703669046@qq.com";//自己的郵箱
	let pass = "sfsdfsdfsggxcew"; //qq郵箱授權(quán)碼
	let to = `${receive}@qq.com`; //對(duì)方的郵箱
	let transporter = nodemailer.createTransport({
		host: "smtp.qq.com",
		port: 587,
		secure: false,
		auth: {
			user: user, // 用戶(hù)賬號(hào)
			pass: pass, //授權(quán)碼,通過(guò)QQ獲取
		},
	});
	let info = await transporter.sendMail({
		from: `測(cè)試node發(fā)送郵箱<${user}>驗(yàn)證碼`, // sender address
		to: `測(cè)試驗(yàn)證碼<${to}>`, // list of receivers
		subject: "測(cè)試驗(yàn)證碼", // Subject line
		text: text, // plain text body
	});
}

編寫(xiě)connect、body-parser解析模塊

var app = connect()
	.use(bodyParser.json())   //JSON解析
	.use(bodyParser.urlencoded({ extended: true }))
	//use()方法還有一個(gè)可選的路徑字符串，對(duì)傳入請(qǐng)求的URL的開(kāi)始匹配。
	//use方法來(lái)維護(hù)一個(gè)中間件隊(duì)列

跨域請(qǐng)求設(shè)置

	.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', '*');   //允許任何類(lèi)型
		res.writeHead(200, { "Content-Type": "text/plain;charset=utf-8" });    //utf-8轉(zhuǎn)碼
		next();  //next 方法就是一個(gè)遞歸調(diào)用
	})

編寫(xiě)發(fā)送qq郵箱驗(yàn)證碼接口

	.use('/emails', function (req, res, next) {
		let qqEmail= req.body.email;
		var obj = {
			code:Math.ceil(Math.random()*1000)
		};
		let text=`驗(yàn)證碼：${obj.code}.您正在使用登錄功能，驗(yàn)證碼提供他人可能導(dǎo)致賬號(hào)被盜，請(qǐng)勿轉(zhuǎn)發(fā)或泄漏`
		sendMail(text,qqEmail)
		res.end(JSON.stringify(obj))
		next();
	})

設(shè)置端口

在var app = connect()后面接上

.listen(3331);

啟動(dòng)node服務(wù)

在index.js當(dāng)前文件下開(kāi)啟cmd命令提示符或者Git命令框執(zhí)行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">獲取驗(yàn)證碼</el-button>
            </el-form-item>
            <el-form-item label="驗(yàn)證碼" 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請(qǐng)求代碼部分

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>

發(fā)送qq驗(yàn)證給用戶(hù)

成功收到郵箱驗(yàn)證碼

到此，關(guān)于“怎么利用node實(shí)現(xiàn)發(fā)送QQ郵箱驗(yàn)證碼”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！