vue2-element-dict、vue3-element-dict、vue2-vant-dict、vue3-vant3-dict字典包，vue2-water-marker、vue3-water-marker防篡改的水印插件包，vue-axios-optimize请求优化包，大家有兴趣的可在npm官网搜索了解下，有疑问可咨询小布。
http://www.xiaobusoft.com 爆米花小布官方域名，有兴趣的可查阅。
前言
大家好，我是沈小布，勤能补拙，实践是检验真理的唯一标准是我的座右铭，帮助同行人员少走弯路，提高开发效率，提升代码质量是我的初心。
主题
今天的主题是使用egg实现邮箱验证码校验。
邮箱验证码校验
邮箱验证码校验相对短信验证码校验唯一的优点就是——免费。
一般就是点击获取邮箱验证码按钮，就会触发调用获取邮箱验证码接口，获取邮箱验证码接口大致逻辑为SMTP服务的邮箱号发给目标邮箱号六位数的邮箱验证码，并且以目标邮箱号作为redis的key，将六位数的邮箱验证码同时存储到redis缓存中，用于校验邮箱验证码是否正确。
开启POP3/SMTP服务
以163网易邮箱为例
登录网易邮箱，点击设置 ==》 POP3/SMTP/IMAP ==》 开启 POP3/SMTP服务。
按步骤开启POP3/SMTP服务即可，记住授权码。点击确定后就成功开启POP3/SMTP服务了。
egg中实现邮箱验证码校验
1. 安装需要用到的依赖
npm i nodemailer2. 新增配置
// config/config.default.js 设置邮箱服务器config.emailServer = {host: 'smtp.163.com', // 163邮箱的SMTP地址port: 465, // 邮箱的端口号一般都使用465，auth: {user: 'XXX@163.com', // 你自己的邮箱的邮箱地址pass: 'XXX', // 授权码},};
3. 新增服务
// service/send-email.js'use strict';const Service = require('egg').Service;const constant = require('../common/constant');// 引入nodemailerconst nodemailer = require('nodemailer');class sendEmailService extends Service {// 发送邮箱验证码async send(account) {const { ctx, app } = this;// 从配置表中获取授权码 方便修改const emailConfig = await ctx.service.system.config.findOne({ configKey: 'emailAuthCode' });const emailServer = app.config.emailServer;if (emailConfig?.configValue) {emailServer.auth.pass = emailConfig.configValue;}// 生成6位验证码const emailCode = app.rand(6); // 该辅助方法在extend/helper.js中定义// 定义模版const email = {title: 'XXX系统---邮箱验证码',body: `<h1>尊敬的:${account}用户</h1><p style="font-size: 18px;color:#000;">您的验证码为：<span style="font-size: 20px;color:#f00;"> ${emailCode}， </span>您当前正在XXX系统注册账号，验证码告知他人将会导致数据信息被盗，请勿泄露</p><p style="font-size: 1.5rem;color:#999;">该验证码${constant.emailCodeExpiresIn}分钟内有效，请勿泄漏于他人！</p>`,};const emailCotent = {from: emailServer.auth.user, // 发件人地址to: `${account}`, // 收件人地址，多个收件人可以使用逗号分隔subject: email.title, // 邮件标题html: email.body, // 邮件内容};const transporter = nodemailer.createTransport(emailServer);const data = await new Promise(resolve => {transporter.sendMail(emailCotent, function(error, info) {if (!error) {resolve({ code: 0, msg: '验证码发送成功', info, emailCode });} else {resolve({ code: 1, msg: '验证码发送失败，请稍后重试', error });}});});return data;}// 将邮箱验证码存储到redis缓存中async setEmailCodeRedis(data) {const { app } = this;const emailCodeKey = 'emailCode:' + data.account;return app.redis.set(emailCodeKey,data.emailCode,'PX',constant.emailCodeExpiresIn * 60 * 1000 // emailCodeExpiresIn分钟);}// 通过account获取图形验证码的redis缓存 用户校验async getEmailCodeRedisByAccount(account) {const { app } = this;const emailCodeKey = 'emailCode:' + account;const emailCode = await app.redis.get(emailCodeKey);return emailCode;}}module.exports = sendEmailService;
4. 新增rand生成随机数方法
// app/extend/application.jsrand(length = 6) {let Num = '';for (let i = 0; i < length; i++) {Num += Math.floor(Math.random() * 10);}return Num;}
5. 新增控制器
// controller/send-email.js'use strict';const { sendEmailDTO } = require('../api-DTO/send-email');const Controller = require('egg').Controller;class sendController extends Controller {// 发送邮件async send() {const { ctx } = this;sendEmailDTO(ctx);const data = ctx.request.body;const result = await ctx.service.sendEmail.send(data.email);if (result.code !== 0) {ctx.throw(400, result.msg);return;}await ctx.service.sendEmail.setEmailCodeRedis({ emailCode: result.emailCode, account: data.email });ctx.body = { msg: result.msg };}}module.exports = sendController;
6. 新增路由（接口请求地址）
// routers/common/index.jsmodule.exports = app => {const { router, controller } = app;// 发送邮箱验证码router.post('/xiaobuAdmin/common/sendEmail', controller.sendEmail.send);};
egg路由模块化配置可前往egg（二）：router.js实现模块化配置
这样就已经实现发送邮箱验证码功能了。
使用
校验代码
// 获取该邮箱在redis缓存中的 验证码const emailCode = await ctx.service.sendEmail.getEmailCodeRedisByAccount(data.email);if (!emailCode) {ctx.throw(400, '邮箱验证码已过期！');return;} if (emailCode !== data.emailCode) {ctx.throw(400, '邮箱验证码错误！');return;}
测试
经测试，发送邮箱验证码成功，且校验也成功。
获取邮箱验证码按钮推荐使用vue-message-code，vue3用户使用vue3-message-code 点击阅读此篇vue项目轻松实现获取短信验证码
总结
这就是egg实现邮箱验证码校验的功能！希望对您有所帮助，感谢支持。
写在最后
希望我的文章能够或多或少帮助到大家，如果有点帮助，可分享给更多人，予人玫瑰，手有余香。最后可以的话三连击是对小编写文最大的动力。
公众号：爆米花小布专注分享web前端相关技术文章、工具包、软件工具等，如果喜欢我的分享，给 小布 点一个赞👍 或者 ➕关注都是对我最大的支持。
