node发送手机验证码，koa接入短信demo（云信通），云信通提供免费开发测试账号
2024-05-17 09:31:34
提示：node发送手机验证码，koa接入短信demo（云信通）
文章目录
- 前言
- 一、云信通配置
- 二、使用步骤
- 1.vue中Login.vue
- 2.vue中axios.js
- 3.koa中routes.js
- 4.koa中phoneCode.js
- 5.koa中app.js
- 总结
前言
node发送手机验证码，koa接入短信demo（云信通）
一、云信通配置
1、云信通注册登陆地址：
https://www.yuntongxun.com/user/login
2、账号信息，接入参数ACCOUNT SID、AUTH TOKEN、App ID
3、短信接入文档
https://doc.yuntongxun.com/pe/5a533de33b8496dd00dce07c
4、配置参数
（1）拼接请求地址
（2）SigParameter规则
（3）请求头部以及Authorization规则
（4）请求数据data，模板短信
二、使用步骤
1.vue中Login.vue
代码如下（示例）：
<template><div class="login_box"><div class="login_list"><el-form:model="user"status-icon:rules="rules"ref="loginForm"label-width="80px"class="login_form"><el-form-item v-if="loginType='regist'" label="电话" prop="phone" class="login_list_item"><el-input v-model.number="user.phone"></el-input></el-form-item><el-form-item v-if="loginType='regist'" label="验证码" prop="code" class="login_list_item"><div class="login_item"><el-input v-model.number="user.code"></el-input><el-button type="primary" @click="getPhoneCode" round>获取验证码</el-button></div></el-form-item></el-form></div></div>
</template><script>
import { getPhoneCode } from "@/axios/index";
export default {name: "Login",data() {var validatePhone = (rule, value, callback) => {let reg=/^1[34578]\d{9}$/;if (value === "") {callback(new Error("请输入电话"));} else if (!reg.test(this.user.phone)) {callback(new Error("请输入正确的电话号码"));} else {callback();}};var validateCode = (rule, value, callback) => {if (value === "") {callback(new Error("请输入验证码"));} else {callback();}};return {imgUrl: null,msg: "用户注册",loginType: "regist",user: {phone: "",code: "",},rules: {phone: [{required: false},{ validator: validatePhone, trigger: "blur" }],code: [{required: false},{ validator: validateCode, trigger: "blur" }],},};},methods: {async getPhoneCode(){if(!this.user.phone||this.user.phone==''){this.$message({type:'error',message: "请填写正确电话号码"});return;}const obj = await getPhoneCode({phone:this.user.phone});console.log(obj,"++++++++++++")}},
};
</script>
<style scoped lang="scss">
.login_box {position: relative;height: 100%;.login_list {width: 400px;position: absolute;box-sizing: border-box;top: 50%;left: 50%;transform: translate(-50%, -50%);.login_title {font-size: 16px;text-align: center;}.login_item{display: flex;.el-button.is-round{padding: 0 14px;margin-left: 30px;height: 26px;position: relative;top: 8px;}}}
}
</style>
<style>.login_box .login_list .el-form-item__label{text-align: justify;height: 40px;overflow: hidden;
}
.login_box .login_list .el-form-item__label::after{content: "";display: inline-block;width: 100%;height: 100%;
}
</style>2.vue中axios.js
代码如下（示例）：
import axios from 'axios';
import { Loading, Message } from 'element-ui';let urlData = { basicUrl: "http://127.0.0.1:3002" }let loading;const instance = axios.create({baseURL: urlData.basicUrl,timeout: 1000,headers: { "X-Requested-With": "XMLHttpRequest" },withCredentials: false,
});// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么loading = Loading.service({lock: true, // 是否锁屏text: '正在加载...', // 加载动画的文字spinner: 'el-icon-loading', // 引入的loading图标background: 'rgba(0, 0, 0, 0.3)', // 背景颜色})return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
instance.interceptors.response.use(function (response) {loading.close();// 对响应数据做点什么return response.data;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});export const getPhoneCode = async (data) => {return instance.post('/getPhoneCode', data);
}export default instance;
3.koa中routes.js
代码如下（示例）：
import Router from 'koa-router';
import fs, { readFileSync } from 'fs';
import { phoneCode } from './phoneCode.js'const router = new Router();const getPhoneCode = async ctx =>{const data = await phoneCode(ctx.request.body.phone);console.log(data)ctx.body = {code:200,data:data,msg:'success'}
}
router.post('/getPhoneCode ',getPhoneCode );export default router;
4.koa中phoneCode.js
代码如下（示例）：
import md5 from 'md5';
import axios from 'axios';
import { Base64 } from 'js-base64';const getTimeString = ()=>{let date = new Date();// date.getMonth()获取当前月份(0-11,0代表1月) 需要+1let timeArr = [ date.getFullYear(),date.getMonth()+1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds() ]let timeString = '';timeArr.forEach(num=>{ timeString+=num>9?''+num:'0'+num; });return timeString;}export const phoneCode = async (phone)=> {/** 业务URL格式：/2013-12-26/Accounts/{accountSid}/SMS/{funcdes}?sig={SigParameter}* 在URL格式中 {}内的内容表示为参数，非{}的内容固定不变。*/let ACCOUNT_SID = '8aaf0708802d0d8501804ac40bef0768';let AUTH_TOKEN = '9a383fdf39a84084891443c63393e410';let App_ID = '8aaf0708802d0d8501804ac40cec076f';/** accountSid String 必选 开发者主账户ACCOUNT SID（登陆官网在管理控制台获取）* SigParameter String 必选 REST API 验证参数，生成规则如下1.使用MD5加密（账户Id + 账户授权令牌 + 时间戳）。其中账户Id和账户授权令牌根据url的验证级别对应主账户。时间戳是当前系统时间，格式'yyyyMMddHHmmss'。时间戳有效时间为24小时，如：201404161420302.SigParameter参数需要大写，如不能写成sig=abcdefg而应该写成sig=ABCDEFG*/let timeString = getTimeString();let sig = md5(ACCOUNT_SID+AUTH_TOKEN+timeString).toUpperCase(); //这里不大写也可以let url = 'https://app.cloopen.com:8883/2013-12-26/Accounts/'+ACCOUNT_SID+'/SMS/TemplateSMS?sig='+sig;/** Accept String 必选 客户端响应接收数据格式：application/xml、application/json* Content-Type String 必选 类型：application/xml;charset=utf-8、application/json;charset=utf-8* Content-Length String 必选 Content-Length* Authorization String 必选 验证信息，生成规则详见下方说明1.使用Base64编码（账户Id + 冒号 + 时间戳）其中账户Id根据url的验证级别对应主账户2.冒号为英文冒号3.时间戳是当前系统时间，格式'yyyyMMddHHmmss'，需与SigParameter中时间戳相同。*/let Authorization = Base64.encode(ACCOUNT_SID+':'+timeString);let headers = {'Accept':'application/json','Content-Type':'application/json;charset=utf-8',// 'Content-Length':JSON.stringify(data).length+'', //这里可以不传，传必须是请求数据stringify的length'Authorization':Authorization}/** to String 必选 短信接收端手机号码集合，用英文逗号分开，每批发送的手机号数量不得超过200个* appId String 必选 应用Id，官网控制台应用列表获取* templateId String 必选 模板Id，官网控制台模板列表获取。测试模板id是1。测试模板的内容是：【云通讯】您使用的是云通讯短信模板，您的验证码是{1}，请于{2}分钟内正确输入* datas Array 可选 内容数据外层数组节点* data String 可选 内容数据，用于替换模板中{序号}，模板如果没有变量，此参数可不传，多个变量，使用数组的数据格式* subAppend String 可选 扩展码，四位数字 0~9999* reqId String 可选 第三方自定义消息id，最大支持32位，同账号下同一自然天内不允许重复。*///生成验证码let codeStr = '';for(let i=0;i<6;i++){codeStr += Math.floor(Math.random()*10);}let data = {to:phone,appId:App_ID,templateId:'1',datas:[codeStr,'1']}let resData = {codeStr}await axios({headers,method:'POST',url,data}).then(res=>{resData.data = res.dataconsole.log(res.data,'+++++++++++++')}).catch(err=>{console.log(err,'err')});return resData;
}
5.koa中app.js
代码如下（示例）：
import koa from 'koa';
import cors from 'koa-cors';
import router from './routes/routes.js';
import staticFiles from 'koa-static';
import koaBody from 'koa-body';
import session from 'koa-session'import path from 'path';const __dirname = path.resolve();
const app = new koa();app.use(cors({ // 指定一个或多个可以跨域的域名origin: function (ctx) { // 设置允许来自指定域名请求if (ctx.url === '/') {return "*"; // 允许来自所有域名请求, 这个不管用}// return 'http://localhost:8000'; // 这样就能只允许 http://localhost:8000 这个域名的请求了return '*'; // 这样就能只允许 http://localhost:8000 这个域名的请求了},maxAge: 5, // 指定本次预检请求的有效期，单位为秒。credentials: true, // 是否允许发送CookieallowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 设置所允许的HTTP请求方法allowHeaders: ['Content-Type', 'Authorization', 'Accept'], // 设置服务器支持的所有头信息字段exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] // 设置获取其他自定义字段
}))const sessionConfig = {key: 'koa:sess', // cookie的key,默认koa:sessmaxAge: 1000*5, // 过期时间，毫秒msautoCommit: true, // 提交到响应头overwrite: true, // 重写httpOnly: true, // 无法获得Cookie信息signed: true, // 签名rolling: true, // 每次刷新renew: false, // 快过期刷新
};
app.keys = ["long long age"]; // signed签名key
app.use(session(sessionConfig, app)); //第二个参数是app ----------------//解析formdata过来的数据
app.use(koaBody({ multipart: true,formidable: {//上传文件存储目录uploadDir: path.join(__dirname, `/public/uploads/`),//允许保留后缀名keepExtensions: true,multipart: true,},jsonLimit:'10mb',formLimit:'10mb',textLimit:'10mb'
}));
app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFiles(__dirname + '/public'));
app.listen('3002');
console.log("项目启动,访问：","localhost:3002");
总结
踩坑路漫漫长@~@
node发送手机验证码，koa接入短信demo（云信通），云信通提供免费开发测试账号相关推荐
- his医院系统接入短信功能的注意事项及流程
医院信息化系统HIS接入短信功能的注意事项及流程 数字化医院信息系统的一些使用场景,如移动医嘱.康复跟踪.短信挂号.病患关怀.体检结果.信息化办公等,都需要用到短信或者语音通知与相关人员进行信息推送, ...
- 医院信息化系统HIS接入短信功能的流程及注意事项
数字化医院信息系统的一些使用场景,如移动医嘱.康复跟踪.短信挂号.病患关怀.体检结果.信息化办公等,都需要用到短信或者语音通知与相关人员进行信息推送,医院信息化系统HIS接入短信接口后,可极大的提升用 ...
- NODE.JS手机验证码短信发送demo
以下为您介绍如何用node.js实现短信发送验证码 /* * 接口类型:互亿无线触发短信接口,支持发送验证码短信.订单通知短信等. 账户注册:请通过该地址开通账户 http://user.ihuyi. ...
- UNIAPP实战项目笔记57 发送手机验证码 接入短信SDK
UNIAPP实战项目笔记57 发送手机验证码 接入短信SDK 注册时候需要发送验证 通过验阿里云或腾讯云等短信sdk供应商 实际案例图片 后端接口文件 index.js var express = r ...
- 腾讯云短信服务实现 Java 发送手机验证码（SpringBoot+Redis 实现）
文章目录 腾讯云短信服务实现 Java 发送手机验证码(SpringBoot+Redis 实现) 1.打开腾讯云短信服务 2.创建短信签名 3.创建短信正文模板 4.等待全部审核完毕即可 5.发送短信 ...
- SpringBoot+vue 使用阿里云的短信功能发送手机验证码
前言: 小编后端用的是Springboot 前端用的是vue ,小编主要是写后台,前端页面比较简陋,后期还要调优,写的不对处还望多多包涵. 环境: 需要先准备好阿里云的账号和一些必要的参数.详情见我的 ...
- 手机验证码平台，怎么发送手机验证码，php开发手机验证码短信接口功能
通过前面的学习, 你已经掌握怎么在腾讯短信平台上设置项目, 添加短信签名, 设置短信模板, 把手机验证码注册页面写好. 今天子恒老师来跟你分享怎么实现发送手机验证码给用户, 注意我们使用的是php开发 ...
- springMVC+阿里云API = 实现发送手机验证码短信
springMVC+阿里云API = 实现发送手机验证码短信 前段时间vue框架做了一个旅游APP软件,其中在用户登录APP的时候,我不仅提供了用户可以自己手动先去注册账号在进行登陆App.然后我还提 ...
- 【日常记录】接入短信发送功能，为实现完整的注册功能做准备
接入阿里短信发送接口: 1.直接去阿里云[云市场]搜索[短信]随便选一个试用测试就行 打开后有相应的api说明 调用地址以及请求参数,可以自己去postman调试或者使用自带的[调试工具:去调试]. ...
最新文章
- 如何轻松应对DNS劫持
- PVUVIP之间的区别和联系
- JAVA 学到什么水平就可以转战 Android 了？
- BCS和ECCS等合并系统简单对比
- 搞科研，从好好读论文开始：沈向洋带你读论文了
- Deeplab unexpected label
- 初一模拟赛总结（6.6 my brother高考前一天，加油！(｡･｀ω´･｡)）
- java开发者工具开源版_JArchitect对Java开源贡献者免费
- 视频号直播带货成交的三大关键
- iOS - UIActivityIndicatorView
- C++第五章课后习题-输入n个字符串，把其中以字母A打头的字符串输出
- 深度学习里面的正态分布
- #1.4股市预测数学的产生原因
- beyond compare密钥
- markdown编辑器和富文本编辑器区别
- Excel如何一键删除重复行？Leo老师告诉你
- JavaScript 基本数据类型 字符型 String
- windows下虚拟串口软件VSPD
- 苹果呼叫转移设置不了_苹果手机也可以开启电信VoLTE！
- 2018：5G标准关键年