快捷導(dǎo)航

nodejs實(shí)現(xiàn)郵箱發(fā)送驗(yàn)證碼功能

更新時(shí)間：2024年07月17日 08:29:19 作者：前端梭哈攻城獅

開發(fā)個(gè)人網(wǎng)站時(shí),注冊頁面可以使用郵箱驗(yàn)證,于是記錄一下如何用nodejs/express服務(wù)器實(shí)現(xiàn)郵箱發(fā)送驗(yàn)證碼,不僅可以在郵箱注冊時(shí)使用,還可以拓展用于各種安全驗(yàn)證,本文給大家介紹了使用nodejs實(shí)現(xiàn)郵箱發(fā)送驗(yàn)證碼功能,需要的朋友可以參考下

1、前言

開發(fā)個(gè)人網(wǎng)站時(shí)，注冊頁面可以使用郵箱驗(yàn)證，于是記錄一下如何用nodejs/express服務(wù)器實(shí)現(xiàn)郵箱發(fā)送驗(yàn)證碼，不僅可以在郵箱注冊時(shí)使用，還可以拓展用于各種安全驗(yàn)證。

2、依賴包

nodejs服務(wù)器需要 express，另外就是我們發(fā)送郵箱的包 nodemailer , cors解決跨域用于測試

npm i express nodemailer cors

3、使用qq郵箱獲取授權(quán)碼

1）首先封裝 nodemailer.js 文件，添加基本配置，配置前需要得到郵箱類型的 port 和 secure 還有郵箱stmp授權(quán)碼。

2）//node_modules/nodemailer/lib/well-known/services.json 可以查看相關(guān)的配置，比如這里是qq郵箱，port為465，secure為true。

3）郵箱---設(shè)置--賬戶--POP3/SMTP服務(wù)---開啟---獲取stmp授權(quán)碼

最終獲取到授權(quán)碼

4、代碼實(shí)現(xiàn)

1）創(chuàng)建nodemailer.js文件

const nodemailer = require('nodemailer')

let nodeMail = nodemailer.createTransport({
  service: "qq", //類型qq郵箱
  port: 465, //上文獲取的port
  secure: true, //上文獲取的secure
  auth: {
    user: "779217162@qq.com", // 發(fā)送方的郵箱，可以選擇你自己的qq郵箱
    pass: "上文獲取的stmp授權(quán)碼", // 上文獲取的stmp授權(quán)碼
  },
});

module.exports = nodeMail

2）創(chuàng)建app.js

//app.js
const express = require("express");
const cors = require("cors");
const nodeMail = require("./nodemailer.js");

const app = express();
app.use(express.static("public"));

app.use(express.json());
app.use(cors());

app.post("/api/email", async (req, res) => {
  const email = req.body.email;
  const code = String(Math.floor(Math.random() * 1000000)).padEnd(6, "0"); //生成6位隨機(jī)驗(yàn)證碼
  //發(fā)送郵件
  const mail = {
    from: `"faker前端開發(fā)"<779217162@qq.com>`, // 發(fā)件人
    subject: "驗(yàn)證碼", //郵箱主題
    to: email, //收件人，這里由post請求傳遞過來
    // 郵件內(nèi)容，用html格式編寫
    html: `
             <p>您好！</p>
             <p>您的驗(yàn)證碼是：<strong style="color:orangered;">$[code]</strong></p>
             <p>如果不是您本人操作，請無視此郵件</p>
         `,
  };
  await nodeMail.sendMail(mail, (err, info) => {
    if (!err) {
      res.json({ msg: "驗(yàn)證碼發(fā)送成功" });
    } else {
      res.json({ msg: "驗(yàn)證碼發(fā)送失敗，請稍后重試" });
    }
  });
});

app.listen(3123, () => {
  console.log("服務(wù)開啟成功 , http:www.localhost:3123");
});

3）創(chuàng)建/public/index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>發(fā)送郵件</title>
  </head>
  <body>
    <button onclick="sendMail()">發(fā)送郵件</button>
    <script>
      async function sendMail() {
        console.log("發(fā)送郵件");
        const res = await fetch("/api/email", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: "991584844@qq.com",
          }),
        });
        const data = await res.json();
        console.log(data);
      }
    </script>
  </body>
</html>

目錄結(jié)構(gòu)為：