Open the QQ mailbox POP3/SMTP service

Login QQ mailbox website, enter the Settings, select the account TAB page to the bottom to open this service

Obtain qq mailbox authorization code

Set up the Node interface service

Train of thought

  1. Create the index.js file
  2. Install connect, Body-Parser, and NodeMailer modules
  3. Write the introduction of the CONNECT framework
  4. Write to introduce bodyParser module
  5. Introduce the Nodemailer module

Start installing plug-ins

Use the CMD command prompt or Git to execute the following installation commands in one go

Start writing the index.js file program

Introduce modules

BodyParser = require('body-parser'), Nodemailer = require('nodemailer'); // Import the nodemailer moduleCopy the code

Declare and schedule the sending mail function

async function sendMail(text,receive) { let user = "[email protected]"; // let pass = "sfsdfsdfsggxcew"; // let to = '${receive}@qq.com'; . / / the other email from = nodemailer createTransport ({host: "smtp.qq.com", port: 587, secure: false, the auth: {user: User, // user account pass: pass, // authorization code, obtained through QQ},}); Let info = await transporter.sendMail({from: 'test node send email <${user}> verification code', // sender address to: ${to}> ', // List of Receivers: "Receivers ", // Subject line text: text, // plain text body}); }Copy the code

Compile connect and Body-parser modules

Var app = connect().use(bodyParser.json()) // json parser. Use (bodyParser.urlencoded({extended: The true})) // Use () method also has an optional path string that matches the start of the incoming request URL. The use method maintains a middleware queueCopy the code

Cross-domain request Settings

.use(function (req, res, SetHeader (' access-Control-allow-origin ', '*'); // 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 ', '*'); WriteHead (200, {" content-type ": "text/plain; charset=utf-8" }); / / utf-8 code next (); // Next is a recursive call})Copy the code

Write send QQ mailbox verification code interface

.use('/emails', function (req, res, next) { let qqEmail= req.body.email; var obj = { code:Math.ceil(Math.random()*1000) }; Let text= 'verification code: 'sendMail(text,qqEmail) res.end(json.stringify (obj)) next(); ${obj.code}. })Copy the code

Set port

Var app = connect()

.listen(3331);
Copy the code

Starting the Node Service

Run the node index.js command in the current file at the CMD prompt or Git command box

The front-end module

I am using VUe-CLI +elementui

  1. HTML code section
<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')"> Submit </el-button> <el-button @click="resetForm('ruleForm')"> </el-form> </div> </template>Copy the code

rendering

Js request code part

import ajax from '.. /.. /utli/request' export const getCheckCode = param => ajax.$post('/emails', param || {});Copy the code

Js event section

<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>Copy the code

Send QQ authentication to the user

The email verification code is successfully received. Procedure

Think I write wide to collect once, later continue to update technical post, there are objections to the comment area to see, I rookie do not like not to spray, we grow together technology progress together!!