Vue+Egg.js使用阿里云短信服务发送验证码保姆教程

1、进入阿里云官网，搜索短信服务点击免费开通

 快速学习，我这边全部学习完成，新用户需要先申请签名。

2、 申请签名

*签名：签名最好使用你的真实应用名或者真实姓名，例如：李四的博客，使用你的项目名有可能会审核不通过。

*签名来源：学生这边就选择测试或学习

*适用场景：选择验证码就好了

*场景链接：和签名一样就好了

*场景说明：可以说明在登录或者注册时使用验证码

填写完成后选择提交，等待审核就好了，审核通过会给你发送短信。

3、申请模板

*关联签名：选择你之前审核通过的签名

*模板名称：可以自定义，也可以跟之前的签名一样

*场景链接和*场景说明和之前一样就好了

选择完成点击添加等待审核通过

 国内消息也可以查看已经通过审核和未通过审核的签名和模板

接下来需要申请key

安全提示选择继续使用就好了，

点击创建AccessKey

 在国内消息->模板管理->详情查看自己的模板CODE，后面代码里面需要用到

 

在egg.js项目controller层中创建alisms.js，controller层具体代码

 service>alisms.js

const Service = require('egg').Service;
const SMSClient = require('@alicloud/sms-sdk');
const config = {
  AccessKeyId: '您的秘钥', //秘钥编号
  AccessKeySecret: '您的秘钥', //秘钥
};
const sign = {
  SignName: '您的签名', //签名
  TemplateCode: '您的模板CODE', //模板CODE
};
class AlismsService extends Service {
  async getRandomNum() {
    let num = '';
    for (var i = 0; i < 4; i++) {
      num += Math.floor(Math.random() * 10);
    }
    return num;
  }
  async sendnote(tel) {
    const { ctx, app } = this;
    const codeRandom = await this.getRandomNum(); //获取随机数
    const templateParams = JSON.stringify({ code: codeRandom.toString() });

    const accessKeyId = config.AccessKeyId;
    const secretAccessKey = config.AccessKeySecret;
    const smsClient = new SMSClient({ accessKeyId, secretAccessKey });
    var params = {
      SignName: '您的签名',
      TemplateCode: '您的模板CODE',
      PhoneNumbers: `${tel}`,
      // `"code":"${codeRandom}"`
      TemplateParam: `{\"code\":\"${codeRandom}\"}`,
    };
    var getphone = await this.gettel(tel);
    if (getphone != '') {
      let result = await ctx.model.Users.findOne({
        where: { telephone: tel, status: 0 },
      });
      if (result) {
        let user_username = result.username;
        let user_id = result.id;
        var token = app.jwt.sign(
          { user_username, user_id },
          app.config.jwt.secret
        );
      } else {
        return { msg: '使用该手机号的用户已被封禁！', sta: -1 };
      }
      // console.log('params', params);
      try {
        const rs = await this.sendSms(smsClient, params);
        console.log('res.code=======', rs);
        if (rs.Code === 'OK') {
          ctx.session.smscode = JSON.parse(params.TemplateParam).code;
          return { user: getphone, code: codeRandom, data: token, sta: 1 };
        }
        return { msg: '发送失败！', sta: -1 };
      } catch (err) {
        // 短信限制
        console.log(err);
        if (err.data.Code === 'isv.BUSINESS_LIMIT_CONTROL') {
          return { msg: err.data.Message.match(/(\s*)Permits/)[1], sta: 0 };
        }
        return { msg: '只能向已回复授权信息的手机号发送！', sta: -1 };
      }
    } else {
      return { msg: '电话号不存在！', sta: -1 };
    }
  }
  // 发送短信
  /**
   *
   * @param {*} smsClient SDK实例
   * @param {*} params 参数信息
   * @returns
   */
  sendSms(smsClient, params) {
    console.log('smsClient', smsClient);
    console.log('params', params);
    return new Promise((resolve, reject) => {
      smsClient.sendSMS(params).then(
        (result) => {
          resolve(result);
        },
        (ex) => {
          reject(ex);
        }
      );
    });
  }
  // 判断电话号码是否存在
  async gettel(tel) {
    const ctx = this.ctx;
    let phone = await ctx.app.mysql.query(
      `select * from t_users where telephone = ${tel}`
    );
    if (phone != undefined) {
      return phone;
    } else {
      return false;
    }
  }
}

module.exports = AlismsService;

 前端页面：

 

data中的数据

        getstatus: false,    判断是否获取验证码成功，成功则显示几秒后重新获取。

        time:' '                   倒计时，几秒后获取

 methods：

async gettelcode() {
      if (this.telephone == '') {
        this.$message.error('请填写手机号！');
        return;
      }
      let res = await this.$http.post('/sendalinote', {
        telephone: this.telephone,
      });
      if (res.data.sta == -1) {
        console.log(res.data.msg);
        this.$message.error(res.data.msg);
        return;
      } else if (res.data.sta == 1) {
        this.getstatus = true;
        this.time = 60;
        var timer = setInterval(() => {
          this.time--;
          if (this.time <= 0) {
            clearInterval(timer);
            this.getstatus = false;
          }
        }, 1000);
        this.$message.success('发送验证码成功！');
        this.code = res.data.code;
        this.token = res.data.data;
        this.user = res.data.user[0];
      }
    },