Vue与Node.js实现手机短信验证登录

手机短信使用的第三方平台是联容云&＃xff0c;注册就送8块钱体验费&＃xff0c;足够自己用用了&＃xff0c;注册完自己建一个应用就能拿到需要使用的配置了&＃xff0c;如图

注册完之后1就可以使用了。

Node.js后端使用了Express框架

"js-base64": "^3.7.2","blueimp-md5": "^2.19.0","moment": "^2.29.1","request": "^2.88.2"

这里引入了四个依赖

获取手机段短信方法

var md5 &＃61; require("blueimp-md5");
var moment &＃61; require("moment");
var Base64 &＃61; require("js-base64").Base64;
var request &＃61; require("request");/*生成指定长度的随机数*/
function randomCode(length) {var chars &＃61; ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];var result &＃61; ""; //统一改名: alt &＃43; shift &＃43; Rfor (var i &＃61; 0; i }
// console.log(randomCode(6));
exports.randomCode &＃61; randomCode;/*
向指定号码发送指定验证码*/
function sendCode(phone, code, callback) {var ACCOUNT_SID &＃61; "";var AUTH_TOKEN &＃61; "";var Rest_URL &＃61; "";var AppID &＃61; "";//1. 准备请求url/*1.使用MD5加密&＃xff08;账户Id &＃43; 账户授权令牌 &＃43; 时间戳&＃xff09;。其中账户Id和账户授权令牌根据url的验证级别对应主账户。时间戳是当前系统时间&＃xff0c;格式"yyyyMMddHHmmss"。时间戳有效时间为24小时&＃xff0c;如&＃xff1a;201404161420302.SigParameter参数需要大写&＃xff0c;如不能写成sig&＃61;abcdefg而应该写成sig&＃61;ABCDEFG*/var sigParameter &＃61; "";var time &＃61; moment().format("YYYYMMDDHHmmss");sigParameter &＃61; md5(ACCOUNT_SID &＃43; AUTH_TOKEN &＃43; time);var url &＃61;Rest_URL &＃43;"/2013-12-26/Accounts/" &＃43;ACCOUNT_SID &＃43;"/SMS/TemplateSMS?sig&＃61;" &＃43;sigParameter;//2. 准备请求体var body &＃61; {to: phone,appId: AppID,templateId: "1",datas: [code, "1"],};//body &＃61; JSON.stringify(body);//3. 准备请求头/*1.使用Base64编码&＃xff08;账户Id &＃43; 冒号 &＃43; 时间戳&＃xff09;其中账户Id根据url的验证级别对应主账户2.冒号为英文冒号3.时间戳是当前系统时间&＃xff0c;格式"yyyyMMddHHmmss"&＃xff0c;需与SigParameter中时间戳相同。*/var authorization &＃61; ACCOUNT_SID &＃43; ":" &＃43; time;authorization &＃61; Base64.encode(authorization);var headers &＃61; {Accept: "application/json","Content-Type": "application/json;charset&＃61;utf-8","Content-Length": JSON.stringify(body).length &＃43; "",Authorization: authorization,};//4. 发送请求, 并得到返回的结果, 调用callback// callback(true);request({method: "POST",url: url,headers: headers,body: body,json: true,},function (error, response, body) {callback(body.statusCode &＃61;&＃61;&＃61; "000000");});
}
exports.sendCode &＃61; sendCode;


使用&＃xff1a;引入上面的方法&＃xff0c;将请求的mobile和生成的code验证码传入进行保存在sendCodeP数组中进行保存&＃xff0c;并开启计时器在120s后进行删除。

const { randomCode, sendCode } &＃61; require("../utils/getMessage");
const { valid } &＃61; require("../utils/valid")
var sqlQuery &＃61; require("../utils/dbconfig");
const jwt &＃61; require("../utils/token");let sendCodeP &＃61; []
//倒计时
setTime &＃61; function (mobile, code) {sendCodeP.push({mobile:mobile,code:code})let i &＃61; 0let timer &＃61; setInterval(() &＃61;> {i &＃43;&＃61; 1console.log(i)if (i &＃61;&＃61; 120) {const index &＃61; sendCodeP.findIndex(e &＃61;> {return e.mobile &＃61;&＃61; mobile})sendCodeP.splice(index, 1)clearInterval(timer)}}, 1000);
}sendMobileCode &＃61; (req, res) &＃61;> {const { mobile } &＃61; req.queryconsole.log(mobile)if (!valid.mobileFormatting.test(mobile)) {res.send({msg: "手机号格式错误",status: 402,});} else {const index&＃61;sendCodeP.findIndex(e&＃61;>{return e.mobile&＃61;&＃61;&＃61;mobile})if (index!&＃61;-1) {res.send({status: 402,msg: "已经发送过",});}else {let code &＃61; randomCode(6);sendCode(mobile, code, function (success) {if (success) {setTime(mobile, code)res.send({status: 0,msg: &＃39;短信验证码已发送&＃39;});} else {res.send({status: 402,msg: "短信验证码发送失败"});}});}}
}login &＃61; async function (mobile) {var sql &＃61; &＃96;select * from cms_user where mobile&＃61;&＃39;${mobile}&＃39;&＃96;;let arr &＃61; []let data &＃61; await sqlQuery(sql, arr)return data
}//验证码登陆
codePhoneLogin &＃61; async (req, res) &＃61;> {let { mobile, Verification } &＃61; req.query;console.log(sendCodeP, mobile)//验证手机号是否发送过验证码const index&＃61;sendCodeP.findIndex(e&＃61;>{return e.mobile&＃61;&＃61;&＃61;mobile})console.log(index)if (index!&＃61;-1) {//验证验证码与手机号是否匹配if (Verification&＃61;&＃61;sendCodeP[index].code) {const loginData &＃61; await login(mobile)if (loginData && loginData.length !&＃61; 0) {delete loginData[0]["password"];const tokenstr &＃61; jwt.encrypt({ gadID: loginData[0].id }, "2h");res.send({data: loginData[0],token: tokenstr,msg: &＃96;登录成功&＃96;,status: 0,});} else {res.send({msg: &＃96;无账号信息&＃96;,status: 402,});}} else {res.send({status: 402,msg: "验证码错误",});}} else {res.send({status: 402,msg: "请先获取验证码",});}
};
module.exports &＃61; {sendMobileCode,codePhoneLogin
}

Vue调用接口即可实现手机短信验证

附上前端短信登录代码 

 手机短信验证登录就是这么简单&＃xff0c;看过就能自己实现一个了。