云开发系列（一）：实现验证码登录

const fs = require('fs');
const redis = require('ioredis');
const tencentcloud = require('tencentcloud-sdk-nodejs');
const queryParse = require('querystring')
const expireTime = 5 * 60;//验证码有效期5分钟
const express = require('express')
const app = express();
const http = require('http')
const https = require('https');

//跨域处理
app.all("*",function (req,res,next) {
    
    res.header("Access-Control-Allow-Origin","*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");

    next();
});
//路由
app.get('/sms', function(req,res,next){
  let queryString = event.query // get形式
  next(queryString);
})

app.post('/sms',function(req,res,next){
  let queryString = queryParse.parse(req.body)
  next(queryString);
}
app.use(function (queryString,req, res) {
  
  if(!queryString || !queryString.method || !queryString.phone) {
    return {
      codeStr: 'InValidParam',
      msg: "缺少参数"
    }
  }
  const redisStore = new redis({
    port: 6369, // Redis instance port, redis实例端口
    host: process.env.REDIS_HOST, // Redis instance host, redis实例host
    family: 4,
    password: process.env.REDIS_PASSWORD, // Redis instance password, redis实例密码
    db: 0
  });
  if(queryString.method === "getSms") {
    return await getSms(queryString, redisStore)
  } else if(queryString.method === "login") {
    return await loginSms(queryString, redisStore)
  }
})

//业务逻辑
/*
* 功能：登录，校验验证码
*/
async function loginSms(queryString, redisStore) {
  if(!queryString.code) {
    return {
        codeStr: 'MissingCode',
        errorMessage: "缺少验证码参数"
    }
  }
  const redisResult = await redisPromise(redisStore, queryString)
  if(!redisResult) {//没有找到记录
    return {
      codeStr: 'CodeHasExpired',
      msg: "验证码已过期"
    }
  }
  let result = JSON.parse(redisResult)
  
  if(!result || result.used || result.num >= 3) {
    return {
      codeStr: 'CodeHasValid',
      msg: "验证码已失效"
    }
  }
  
  if(result.code == queryString.code) { //验证码校验正确
    updateRedis(redisStore, queryString.phone, result, true) //将验证码更新为已使用
    // 验证码校验通过，执行登录逻辑
    console.log('校验验证码成功')
    return {
      codeStr: 'Success',
      msg: '校验验证码成功'
    }
  } else { // 验证码校验失败
    updateRedis(redisStore, queryString.phone, result, false)
    return {
      codeStr: 'CodeIsError',
      msg: "请检查手机号和验证码是否正确"
    }
  }
}
// 更新redis状态
function updateRedis(redisStore, phone, result, used) {
  const sessionCode = {
    code: result.code,
    sessionId: result.sessionId,
    num: ++result.num, //验证次数，最多可验证3次
    used: used //true-已使用，false-未使用
  }
  redisStore.set('sms_' + phone, JSON.stringify(sessionCode));
  if(used) {
    redisStore.expire('sms_' + phone, 0);
  } else {
    redisStore.expire('sms_' + phone, expireTime);
  }
}
/*
 * 功能：根据手机号获取短信验证码
 */
async function getSms(queryString, redisStore) {
  const code = Math.random().toString().slice(-6);//生成6位数随机验证码
  const sessionCode = {
      code: code,
      num: 0, //验证次数，最多可验证3次
      used: false //false-未使用，true-已使用
  }
  redisStore.set('sms_' + queryString.phone, JSON.stringify(sessionCode));
  redisStore.expire('sms_' + queryString.phone, expireTime);

  let queryResult = await sendSms(queryString.phone, code)
  return queryResult
}
/*
 * 功能：通过sdk调用短信api发送短信
 * 参数 手机号、短信验证码
 */
async function sendSms(phone, code) {
  const SmsClient = tencentcloud.sms.v20190711.Client;
  const Credential = tencentcloud.common.Credential;
  const ClientProfile = tencentcloud.common.ClientProfile;
  const HttpProfile = tencentcloud.common.HttpProfile;
  const secretId = TENCENTCLOUD_SECRETID;
  const secretKey = ENCENTCLOUD_SECRETKEY;
  const token = ENCENTCLOUD_SESSIONTOKEN;
  //改为自己的代码

  let cred = new Credential(secretId, secretKey, token);
  let httpProfile = new HttpProfile();
  httpProfile.endpoint = "sms.tencentcloudapi.com";
  let clientProfile = new ClientProfile();
  clientProfile.httpProfile = httpProfile;
  let client = new SmsClient(cred, "ap-guangzhou", clientProfile);

  let req = {
      PhoneNumberSet: ["+" + phone], //大陆手机号861856624****
      TemplateID: process.env.SMS_TEMPLATE_ID, //腾讯云短信模板id
      Sign: process.env.SMS_SIGN, //腾讯云短信签名
      TemplateParamSet: [code],
      SmsSdkAppid: process.env.SMS_SDKAPPID //短信应用id
  }
  
  let queryResult = await smsPromise(client, req)
  return queryResult
}

async function smsPromise(client, req) {
  return new Promise((resolve, reject) => {
      client.SendSms(req, function(errMsg, response) {
          if (errMsg) {
              reject(errMsg)
          } else {
              if(response.SendStatusSet && response.SendStatusSet[0] && response.SendStatusSet[0].Code === "Ok") {
                  resolve({
                      codeStr: response.SendStatusSet[0].Code,
                      msg: response.SendStatusSet[0].Message
                  })
              } else {
                  resolve({
                      codeStr: response.SendStatusSet[0].Code,
                      msg: response.SendStatusSet[0].Message
                  })
              }
          }                
      });
  })
}

async function redisPromise(redisStore, queryString) {
  return new Promise((res, rej) => {
    redisStore.get('sms_' + queryString.phone, function (err, result) {
      if (err) {
        rej(err)
      }
      res(result)
    });
  })
}

//服务启动

let httpServer = http.createServer(app);
let httpsServer = https.createServer({
    key: fs.readFileSync('./cert/privatekey.pem', 'utf8'), 
    cert: fs.readFileSync('./cert/certificate.crt', 'utf8')
}, app);

let PORT = 80;
let SSLPORT = 443;

httpServer.listen(PORT, function() {
    console.log('HTTP Server is running on: http://localhost:%s', PORT);
});
httpsServer.listen(SSLPORT, function() {
    console.log('HTTPS Server is running on: https://localhost:%s', SSLPORT);
});

//vue<script src="//unpkg.com/vue/dist/vue.js"></script>
<template>
  <div id="app">
    <el-form :model="form" class="demo-form-inline">
      <el-form-item label="手机号">
        <el-input v-model="form.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCode" :disable="this.buttonTime>0?'disabled':'false'’">
        获取验证码{{this.buttonTime <= 0?"":this.buttonTime}}
        </el-button>
      </el-form-item>
      <el-form-item label="验证码">
         <el-input v-model="form.code" placeholder="验证码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlelogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios';
import elementUI from 'element-ui'
export default {
    data() {
      return {
        form: {
          phone: '',
          code: '',
          buttonTime:0 //按钮是否可以按
        }
      }
    },
    methods: {
      handleLogin() {
        const host = ....;
        //get
        axios.get(`/${host}/sms?phone=${this.phone}&code=${this.code}`)
          .then(function (response) {
          console.log(`登陆成功，回调为:${response`);
        })
        .catch(function (error) {
          console.log(`登陆失败，失败信息为:${error}`)
        });
        //post
        axios.post(`/${host}/sms`, {
          phone: this.phone,
          code: this.code
        })
        .then(function (response) {
          console.log(`登陆成功，回调为:${response`);
        })
        .catch(function (error) {
          console.log(`登陆失败，失败信息为:${error}`)
        });
      },     
      getCode(){
         const host = ....;
         setButtonDisabled();
         axios.get(`/${host}?phone=${this.phone}`)
          .then(function (response) {
          console.log(`登陆成功，回调为:${response`);
        })
        .catch(function (error) {
          console.log(`登陆失败，失败信息为:${error}`)
        });
        //post
        axios.post('/${host}', {
          phone: this.phone,
        })
        .then(function (response) {
          console.log(`发送成功，回调为:${response}`);
        })
        .catch(function (error) {
          console.log(`发送失败，失败信息为:${error}`)
        });
      },
      setButtonDisable(){
       this.buttonTime = 60;
         let timer = setInterval(()=>{
             if(this.buttonTime == 0){
                clearInterval(timer)
                return;
             }
             this.buttonTime--;
         },1000)
      }
     
  }
}
</script>

const cloudbase = require("@cloudbase/js-sdk");
const extSms = require("@cloudbase/extension-sms");

const app = cloudbase.init({
  env: "您的环境ID"
});

cloudbase.registerExtension(extSms);

demo();

async function demo() {
  try {
    let phone = ""; // 输入用户手机号
    // 发送短信验证码
    await cloudbase.invokeExtension(extSms.name, {
      action: "Send",
      app,
      phone
    });

    let smsCode = ""; // 用户填写验证码
    // 验证码校验
    await cloudbase.invokeExtension(extSms.name, {
      action: "Verify",
      app,
      phone,
      smsCode
    });

    // 验证码登录
    await cloudbase.invokeExtension(extSms.name, {
      action: "Login",
      app,
      phone,
      smsCode
    });
    console.log("登录成功，目前是正式用户");
  } catch (err) {
    console.log(JSON.stringify(err, null, 4));
  }
}