博客

实现一个短信验证来完成注册和登录的功能，首先需要申请阿里云的短信服务，这里自行申请，不再多说，直接上代码，希望能够帮助到需要的人，有什么不足之处，还希望路过的大佬指点，不胜感激。

一 ,前端部分

，

此处布局方面不再赘述，只介绍逻辑流程。

axios({
	method: 'get',
	//将以下的IP和端口改为自己的express服务器的ip和端口，this.phoneNum为前端请
	//请求的电话号码
	url: 'http://123.123.123.123:3000/login?phoneNum='+this.phoneNum
})
.then(res=>{
    console.log(res);
    console.log(res.data);
})
.catch(err=>{
    console.log(err);
})

我这里使用的是axios，其他也可，axios详细的使用请参考官网

二，nodejs部分


主要的功能还是在nodejs，这里使用express

代码如下：

app.js

//引入routes中的文件
const loginRouter = require('./routes/login');

//解决跨域问题
app.all("*",function(req,res,next){
  res.header("Access-Control-Allow-Origin","*"); //允许所有访问者跨域请求
  next();
})

//使用
app.use('/login',loginRouter);

routes部分


sdk安装 npm i @alicloud/sms-sdk （在express的项目下安装）

短信模板和签名请参考阿里云的具体流程进行申请

还有AccessKey（不要轻易让别人知道，很重要）

const express = require('express');
const router = express.Router();
//这里的url模块用来获取前端的手机号码
const url=require("url");
// 

//产生随机数
function getCode(){
    let str="";
    for(let i=0;i<4;i++){
        str+=parseInt(Math.random()*10);
    }
    return str;
};

router.get("/",function(req,resout,next){
let str1=getCode();
const obj = url.parse(req.url,true).query;

//引入SDK
const SMSClient = require('@alicloud/sms-sdk')
// accessKeyId /secretAccessKey 根据实际申请的账号信息进行替换
const accessKeyId = '';
const secretAccessKey = '';
//初始化sms_client
let smsClient = new SMSClient({accessKeyId, secretAccessKey});
    //发送短信
    smsClient.sendSMS({
        PhoneNumbers: obj.phoneNum,//必填:待发送手机号。支持以逗号分隔的形式进行批量调用，批量上限为1000个手机号码,批量调用相对于单条调用及时性稍有延迟,验证码类型的短信推荐使用单条调用的方式；发送国际/港澳台消息时，接收号码格式为：国际区号+号码，如“85200000000”
        //以下短信签名和模板填入自己申请的即可
        SignName: '',//必填:短信签名-可在短信控制台中找到
        TemplateCode: '',//必填:短信模板-可在短信控制台中找到，发送国际/港澳台消息时，请使用国际/港澳台短信模版
        TemplateParam: `{"code":'${str1}'}`//可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时。
    }).then(function (res) {
        let {Code}=res
        if (Code === 'OK') {
            //这里返回的数据自行确定
            let obj={
                msg:"ok",
                code:str1  //str1是自行产生的手机验证码，返回到前端以做验证
            }
            resout.send(obj);
            //调试阶段打印出来便于调试
            console.log(res);
        }
    },function(err) {
        let obj={
            msg:"fail"
        }
        resout.send(obj);
        console.log(err);
    })
})

module.exports =router;

设置ip和端口,在bin/www下

var port = normalizePort(process.env.PORT || '3001');//端口号
app.set('port', port);
app.set('host', "你的ip");

启动服务器，前端进行请求，返回的数据如下：

到这里基本功能就已经实现了

有什么不足还望路过的大佬指正！！！感……感……激，激……不尽……