【NodeJS】 API Key 实现 短信验证码功能

这里使用的平台是 短信宝
整体来讲还是挺麻烦的平台必须企业才行,个人是无法使用该平台的
平台必须完成 身份信息认证 和 企业认证
 这里就需要 “营业执照”了 ,没有 “营业执照” 的朋友还是后退一步吧

后端我用的是NodeJS ,使用第三方库 router 来制作 api访问地址接口,然后在 验证码api 访问地址接口内“ 使用 axios 向 “https://api.smsbao.com/sms” 发送请求 ” ,当用户访问这个地址就执行,最后把失败或成功的值返回给前端 ,然后在做一个post接口,用来核对用户填写的验证码是否和发生至 接收手机号 的短信验证码一致 ,成功返回什么 ? 失败返回什么? 就这样 !
 

import express from 'express'
const router = express.Router()
import axios from 'axios'
// 替换为你的API账号信息
const apiUsername = 'your account number'
const apiPassword = 'your password md5'
const apiUrl = 'https://api.smsbao.com/sms'// 发送短信验证码的函数
async function sendSMS (mobile, content) {try {// `https://api.smsbao.com/sms?u=${apiUsername}&p=${apiPassword}&m=${mobile}&c=${content}`const response = await axios.get(apiUrl, {params: {u: apiUsername, //用户名p: apiPassword, //密码m: mobile,     //手机号c: content     //短信发送内容}})// 处理响应,根据需要进行进一步的处理console.log('SMS Sent:', response.data)return response.data} catch (error) {console.error('Error sending SMS:', error)throw error}
}function generateRandomCode (length) {const min = Math.pow(10, length - 1)const max = Math.pow(10, length) - 1return Math.floor(Math.random() * (max - min + 1) + min).toString()
}//存储验证码
let mobileCodeNumber//发送验证码
router.get('/Test/MobileCodeNumber', async (req, res) => {console.log(`这是用户传递来的信息`, req.query)if (!req.query.mobile)return res.status(400).json({ code: 400, message: 'mobile参数必传' })try {const mobileNumber = req.query.mobile // 替换为实际的手机号码const verificationCode = generateRandomCode(6) // 生成或获取实际的验证码console.log(`验证码`, verificationCode)await sendSMS(mobileNumber,`【短信宝】您的验证码是${verificationCode},30秒内有效`)mobileCodeNumber = verificationCoderes.status(200).json({ code: 200, message: 'SMS sent successfully!' })} catch (error) {console.error(error)res.status(400).json({ code: 400, message: 'Failed to send SMS.' })}
})//核对用户填写验证码是否和接收到的一致
router.post('/Test/login', async (req, res) => {if (req.body.code == mobileCodeNumber) {res.status(200).send({ code: 200, message: '登录成功' })} else {res.status(400).send({ code: 400, message: '验证码错误' })}
})
export default router

前端V3简单做了一下样式功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./style/vant@3.css" /><title>Document</title>
</head><body><div id="mobileCodeNumber"><van-cell-group inset><van-field v-model="mobile" type="tel" label="手机号"></van-field><van-field v-model="mobileCode" center clearable label="短信验证码" placeholder="请输入短信验证码"><template #button><van-button size="small" type="primary" :disabled="counting" @click="sendSms">{{ counting ? `${count}s 后重新发送` : '发送验证码' }}</van-button></template></van-field><van-button round block type="success" @click="GotoLogin">登录</van-button></van-cell-group></div><script src="https://gitee.com/just-once-1/utils/tree/master/utils/Vue3.js"></script><script src="https://gitee.com/just-once-1/utils/tree/master/utils/vant.min.js"></script><script src="https://gitee.com/just-once-1/utils/tree/master/utils/axios.js"></script><script src="https://gitee.com/just-once-1/utils/tree/master/utils/VantPlugin.js"></script><script>const { createApp, ref } = Vue;const mobile = ref('')const counting = ref(false)const count = ref(60)const mobileCode = ref('')let domain = 'http://127.0.0.1:3009'const app = createApp({data() {return {mobile,counting,count,mobileCode}},setup() {const sendSms = () => {if (!counting.value) {counting.value = true;useSendMobileCode()const timer = setInterval(() => {if (count.value > 0) {count.value--;} else {counting.value = false;count.value = 60;clearInterval(timer);}}, 1000);}};const useSendMobileCode = async () => {try {const res = await axios({url: domain + `/Test/MobileCodeNumber?mobile=${mobile.value}`,method: 'get'})console.log(': ', res)} catch (err) {console.log(': ', err.response)}}const GotoLogin = async () => {try {const res = await axios({url: domain + '/Test/login',method: 'post',data: {mobile: mobile.value,code: mobileCode.value}})console.log('GotoLogin: ', res)} catch (err) {console.log('GotoLogin: ', err.response)}}return {sendSms,useSendMobileCode,GotoLogin};},});app.use(VantPlugin);app.mount('#mobileCodeNumber');</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/186905.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java ——异常机制详解】

Java异常是Java提供的一种识别及响应错误的一致性机制&#xff0c;java异常机制可以使程序中异常处理代码和正常业务代码分离&#xff0c;保证程序代码更加优雅&#xff0c;并提高程序健壮性。本文综合多篇文章后&#xff0c;总结了Java 异常的相关知识&#xff0c;希望可以提升…

统信UOS和vue.js的一个兼容问题

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 这事到现在说起还很奇怪&#xff0c;在UOS20&#xff08;硬件为华为鲲鹏服务器&#xff0c;arm架构&#xff0c;g8.3&#xff09;上部署uve.js&#xff0…

Excel 使用技巧

Excel 使用技巧 注意&#xff1a; excel 中设计计算的字符尽量使用英文。 拼接两段文字&#xff08;字符串拼接&#xff09; 方法一 在需要计算的单元格上,键入 点击 A1(点击需要拼接的单元格) & C1(点击需要拼接的单元格) 举例: 姓名栏想要拼接 姓 和 名 两列点击姓名这一…

Leetcode 450 删除二叉搜索树中的节点

删除二叉搜索树的节点要比插入一个节点更难&#xff0c;区别在于&#xff0c;我们总能找到一个叶子节点&#xff0c;把我们要插入的值缀在后面。 但是删除节点不总是删除叶子节点&#xff0c;还有可能删除一个中间节点&#xff0c;这就需要额外的操作。 我们需要分情况来讨论。…

企业微信HOOK开发接口调用,发送语音消息

简要描述 发送语音消息 可以从CDN/CDN文件上传中上传silk文件(silk文件可以自己用mp3转换&#xff0c;或者用语音接收消息的值进行发送)&#xff0c;拿到发送值 操作码 101019 请求说明 参数名必选类型说明username是string用户名password是string密码name否string昵称 请…

linux NAT网卡配置static

由于是内网&#xff0c;资料无法拷贝&#xff0c;借助参考资料&#xff0c;整理发出。 镜像安装 基本操作。 查看VM配置 图1&#xff0c;有几个信息。一个是NAT借用了网卡里的VMnet8适配器。 子网IP是从192.168.142.0 子网掩码255.255.255.255&#xff0c;对应下面配置的N…

Java 的第二十章:多线程

创建线程 继承Thread 类 Thread 类时 java.lang 包中的一个类&#xff0c;从类中实例化的对象代表线程&#xff0c;程序员启动一个新线程需要建立 Thread 实例。 Thread 对象需要一个任务来执行&#xff0c;任务是指线程在启动时执行的工作&#xff0c;start() 方法启动线程&am…

SpringBoot学习笔记-实现微服务:匹配系统(中)

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义&#xff0c;课程链接&#xff1a;AcWing SpringBoot 框架课。 CONTENTS 1. 同步玩家位置1.1 游戏信息的记录1.2 实现多线程同步移动 2. 同步碰撞检测3. 实现游戏结束界面4. 持久化游戏状态4.1 创建数据库表4.2 保存游戏对局信息…

入门Python+Vue 全栈开发高级BI数据的可视化实战项目几个技术点总结

PythonVue全栈开发是一种强大的技术组合&#xff0c;可以用于构建高级BI数据可视化项目。在这篇文章中&#xff0c;我将总结几个关键技术点&#xff0c;以帮助读者入门并实战这个领域。 数据处理和分析&#xff1a;Python是一种流行的数据处理语言&#xff0c;它提供了丰富的库…

11-30 JavaWeb

修改与删除操作 防止空指针异常 localhost:8080 -> 分页查询 修改流程&#xff1a;(先查后改(两个servlet)) 修改&#xff1a; 传用户id(用户id怎么得到 -> 循环一次得到一个user 对象 user对象里用user.getId()得到用户id) UpdateUserQueryServlet.java &#xff08;…

从浏览器控制台发送get,post请求

---------------------get请求--------------------------- fetch(url, { method: get, }) .then(response > response.json()) .then(data > { // 获取到响应的数据后的处理逻辑 console.log(data); }) .catch(error > { // 请求发生错误的处理逻…

Oracle存储过程返回DataSet(多个DataTable)给C#

一、存储过程 CREATE OR REPLACE PROCEDURE GET_SENDEXCEL_XY ( ZGJ182X OUT SYS_REFCURSOR , ZGJ182Y OUT SYS_REFCURSOR , ZXN182X OUT SYS_REFCURSOR , ZXN182Y OUT SYS_REFCURSOR , ZLH182X OUT SYS_REFCURSOR …

Vue模块与小程序生命周期

文章目录 一、Vue中五个模块1、state2、getters3、mutations4、actions5、modules 二、小程序中的生命周期 一、Vue中五个模块 1、state 是用来存储数据的地方&#xff0c;我们需要传递的数据或者需要保存的数据都会在state中声明。 2、getters 类似于Vue中的计算属性&…

html/css中位置position的绝对位置absolute顺时针盒子案例图片排序

目标图片&#xff1a; Dreamweaver界面&#xff1a; 代码部分&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <style type"text/css">.red{background-color:r…

element中el-form-item设置label-width=‘auto‘报错

文章目录 一、问题二、解决三、最后 一、问题 el-form中的设置了全局标题宽度是200px&#xff0c;此时想要对el-form-item取消标题宽度&#xff0c;设置了label-widthauto&#xff0c;结果&#xff0c;报错了~~~ <el-form label-width"200px" label-position&quo…

python的itertools库

itertools常用的方法如下&#xff1a; import itertools 1. 生成的列表累加&#xff0c;在生成新的列表x itertools.accumulate(range(10))print(list(x))结果&#xff1a;[0, 1, 3, 6, 10, 15, 21, 28, 36, 45] 2. 连接多个列表或者迭代器x itertools.chain(range(3), rang…

强大的Kubernetes工具的完整指南

在容器化应用程序编排方面&#xff0c;Kubernetes是市场的领导者。它允许用户在多主机环境中管理容器&#xff0c;提供工作负载分配和网络处理。 此外&#xff0c;它还提供了许多在DevOps过程中至关重要的特性&#xff0c;例如自动扩展、自动修复和负载平衡。这些功能解释了Kub…

Android问题笔记四十八:蓝牙obtainMessage数据传输部分数据丢失乱序问题

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

YOLOv8改进 | 2023 | 通过RFAConv重塑空间注意力(深度学习的前沿突破)

一、本文介绍 本文给大家带来的改进机制是RFAConv&#xff0c;全称为Receptive-Field Attention Convolution&#xff0c;是一种全新的空间注意力机制。与传统的空间注意力方法相比&#xff0c;RFAConv能够更有效地处理图像中的细节和复杂模式(适用于所有的检测对象都有一定的…

springboot+jsp+java房屋销售出租赁网站的ssm设计与实现7xcvq

三、研究方案&#xff08;主要研究内容、目标、研究方法等&#xff09; 主要研究内容 房屋租售网站采用的开发框架为springboot框架&#xff0c;也就是Spring mvc、Spring、MyBatis这三个框架&#xff0c;页面设计用的是jsp技术作为动态页面文件设计&#xff0c;jsp文件里可以对…