当前位置: 首页 > article >正文

邮箱发送验证码(nodemailer)

邮箱发送验证码

    • 打开`SMTP` 服务
    • 使用 Node.js 邮件发送模块(nodemailer)
    • 封装验证码组件

开发中经常会遇到需要验证码,不过手机验证码需要money,不到必要就不必花费,所以可以使用邮箱发送验证码

打开SMTP 服务

根据自己想使用的邮箱,在官网找到并打开smtp服务

在这里插入图片描述

不同邮箱服务商的 SMTP 服务器配置有所不同,如 QQ 邮箱的 SMTP 服务器是 smtp.qq.com,端口一般是 465(SSL)或 587(TLS)

使用 Node.js 邮件发送模块(nodemailer)

npm install nodemailer

配置nodemailer配置项

'use strict';

const nodemailer = require('nodemailer');

exports.main = async (event, context) => {
	const { mail } = event;

	// 创建6位随机验证码
	const code = Math.floor(Math.random() * 900000) + 100000;

	// 创建一个 SMTP 服务器配置对象
	let transporter = nodemailer.createTransport({
		service: 'QQ', // 使用 QQ 邮箱服务
		auth: {
			user: '', // 发送方邮箱
			pass: '' // 发送方邮箱授权码,需要替换为实际的授权码
		}
	});

	// 邮件内容
	let mailOptions = {
		from: '', // 发送方邮箱
		to: mail, // 接收方邮箱
		subject: '验证码', // 邮件主题
		text: '您的验证码是:' + code, // 邮件正文(纯文本)
		// html: '<b>您的验证码是:' + code + '</b>' // 邮件正文(HTML 格式)
	};

	try {
		// 发送邮件
		const info = await transporter.sendMail(mailOptions);
		console.log('Message sent: %s', info.messageId);
		// 预览邮件链接
		console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));

		// 返回数据给客户端
		return {
			code: 0,
			data: {
				mail,
				code
			},
			msg: '发送成功'
		};
	} catch (error) {
		console.error(error);
		return {
			code: 1,
			msg: '发送失败'
		};
	}
};

注意:nodemailer是在node环境中使用的,所以要在云函数中使用

封装验证码组件

一般情况下,登陆、注册、忘记密码等功能都会需要使用到验证码功能,所以将获取验证码封装为一个组件可以提高复用率

尽量将相关的计算操作都涵盖到组件,比如验证码有效期定时器、邮箱验证、云函数调用等

<template>
	<view class="code-container">
		<button @click="getCode">{{ getFlag?`还剩${countdown}秒`:`获取验证码` }}</button>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		ref,
		onBeforeUnmount
	} from 'vue';
	const props = defineProps({
		email: {
			type: String,
			default: ''
		}
	});
	const emits = defineEmits(['transmitcode']);

	// 是否获取验证码的标志位
	const getFlag = ref(false);
	// 定时器
	const timer = ref(null);
	// 倒计时,验证码有效期
	const countdown = ref(60);

	const getCode = () => {
		if (getFlag.value) return;
		// 判断邮箱是否为空
		if (!props.email) return;
		// 验证邮箱格式
		const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
		if (!reg.test(props.email)) {
			uni.showToast({
				title: '请输入正确的邮箱格式',
				icon: 'none'
			});
			return;
		};


		// 发送验证码
		uniCloud.callFunction({
			name: 'getCode',
			data: { mail: props.email },
			success: res => {
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
				// 将获得的验证码交给父组件进行判断
				emits('transmitcode', res.result.data.code);
				getFlag.value = true;
				timer.value = setInterval(() => {
					countdown.value--;
					if (countdown.value <= 0) {
						clearInterval(timer.value);
						getFlag.value = false;
						countdown.value = 60;

					}
				}, 1000);
			},
			fail: err => {
				uni.showToast({
					title: '验证码发送失败',
					icon: 'none'
				});
			}
		});


	};
	// 组件销毁时清除定时器
	onBeforeUnmount(() => {
		clearInterval(timer.value);
	});
</script>

http://www.kler.cn/a/501599.html

相关文章:

  • MySQL Binlog 同步工具go-mysql-transfer Lua模块使用说明
  • 计算机网络(四)——网络层
  • 战略与规划方法——深入解析波士顿矩阵(BCG Matrix):分析产品组合的关键工具
  • UML系列之Rational Rose笔记七:状态图
  • 设计一篇利用python爬虫获取1688详情API接口的长篇软文
  • 对话新晋 Apache SeaTunnel Committer:张圣航的开源之路与技术洞察
  • Babylon第二阶段测试网发布
  • Linux第一课:c语言 学习记录day10
  • AWS简介
  • 每年一问:Java日期格式化中周所在年引发的bug
  • 香港云服务器的ip可以更换的吗?
  • PMP–一、二、三模、冲刺–分类–7.成本管理
  • Vue 开发者的 React 实战指南:快速入门与思维转换
  • 从项目代码看 React:State 和 Props 的区别及应用场景实例讲解
  • iOS - Objective-C语言的动态性
  • MacOS15 bash 终端怎么使用网络代理
  • 《拉依达的嵌入式\驱动面试宝典》—操作系统篇(五)
  • Kotlin 极简小抄 P5(异常、异常处理、自定义异常)
  • 三天学完微服务其二
  • 【江协STM32】10-4/5 I2C通信外设、硬件I2C读写MPU6050
  • Web3 重塑隐私保护:构建数字安全新防线
  • Flutter:吸顶效果
  • git打补丁
  • 010:传统计算机视觉之大津算法初探
  • centos7.6 安装nacos 2.0.4与恢复nacos的mysql
  • 【Ubuntu与Linux操作系统:八、Ubuntu桌面应用】