借助云开发10行代码实现短信验证码的发送

简介: 借助云开发10行代码实现短信验证码的发送

最近在做小程序验证码登陆时,用到了短信发送验证码的需求,自己也研究了下,用云开发结合云函数来实现验证码短信发送还是很方便的。

老规矩,先看效果图



这是我调用腾讯云的短信平台发送的登陆验证码。核心代码其实只有下面这么多



是不是感觉实现起来特别简单,怎么说呢,我们代码调用其实就这么几行,就可以实现短信的发送,但是腾讯云短信模板的审核比较繁琐,还有我们先去申请短信模板,短信模板审核通过后才可以使用。

我们就先来说代码实现,然后再带大家简单的学习下短信模板的申请。


一,安装node类库


其实我们这里用到了云开发的云函数,我们是在云函数里调用短信发送的。为什么要在云函数里调用呢,因为我们做短信发送,需要用到腾讯云的一个短信发送的类库,而这个类库是node库,所以只能在云函数里调用了。

在安装这个类库之前,我们需要先创建一个云函数,关于云函数的创建,我其实已经讲过很多遍了,不知道的同学,去翻看下我的历史文章,或者看下我录制的云开发入门视频《5小时零基础入门小程序云开发》

我后面也会把这节内容录制出视频出来。

创建完云函数后,右键点击在终端中打开,打开终端后,在终端中输入以下命令来安装qcloudsms_js类库

npm install qcloudsms_js


这里需要注意,我们安装类库前需要先下载node并配置npm环境变量,这里我也有写文章的

《nodeJs的安装与npm全局环境变量的配置》


二,编写云函数


上面类库安装好以后,我们就可以来编写云函数了。

其实代码编写起来很简单,就下面这些,对应的注解我也都已经写出来了。



这里要发送的手机号,和随机验证码需要动态传进来的。


三,调用云函数


调用云函数这里也很简单,我们需要传入手机号和验证码



手机号这里,我做了一个输入框,可以动态的输入。验证码的话,我写了一个方法来随机生成数字和字母的组合验证码。



我等下会把完整的代码贴出来给大家。



这样我们输入完手机号以后,点击发送短信按钮,就可以成功的发送短信给到对应的手机号了。


可以看到我们生成的随机验证码如下



我们手机接受到的短信验证码如下



这样我们做登陆或者做校验时,用户手机短信收到的验证码,和我们随机生成的验证码一样,即代表用户验证成功。
完整的index.js代码给大家贴出来

var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
let phone = ''
Page({
  //获取随机验证码,n代表几位
  generateMixed(n) {
    var res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    return res;
  },
  //调用云函数发送短信
  sendSMS() {
    if (phone.length != 11) {
      wx.showToast({
        icon: 'none',
        title: '输入11位手机号',
      })
      return
    }
    let code = this.generateMixed(4)
    console.log('本地生成的验证码', code)
    wx.cloud.callFunction({
      name: "sendSms",
      data: {
        phone: phone,
        code: code //生成4位的验证码
      }
    }).then(res => {
      console.log('发送成功', res)
    }).catch(res => {
      console.log('发送失败', res)
    })
  },
  //获取要发送的手机号
  getPhone(event) {
    console.log(event.detail.value)
    phone = event.detail.value
  },
})

index.wxml如下



到这里我们的短信验证码的发送就完整的实现了,是不是很简单。


短信发送参数的设置与获取


首先是去腾讯云自己开通短信功能,然后需要自己去申请模板,填写签名。



我这里把所需要的参数,都给大家标准出来了。大家只需要自己去官网设置对应的模板和签名,然后审核通过后,把对应的参数放到我们的云函数里即可。


短信验证的原理讲解


在网上找了一张短信验证的原理图,如下



大家可以对照这看下,这个原理图。对应的源码我上面其实已经给大家贴出来了。

相关文章
|
1月前
|
移动开发 运维 监控
应用研发平台EMAS常见问题之收到通知后对应的onNotification方法没有调用如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
25 0
|
1月前
|
运维 监控 网络安全
应用研发平台EMAS产品常见问题之小米辅助通道注册失败如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
|
2月前
|
API 开发工具 数据安全/隐私保护
API接口的对接流程和注意事项
随着互联网技术的发展和应用的普及,API接口已经成为不同系统、不同应用之间进行交互和数据交换的重要方式。API接口使得不同的系统能够互相调用对方的功能,提高了系统的灵活性和扩展性。但是,在进行API接口对接的过程中,需要注意一些流程和事项,以确保对接的顺利进行和系统的稳定运行。
|
10月前
|
自然语言处理 算法 安全
语音验证码短信原理和应用场景分析(附Java 接入代码)
语音验证码短信原理和应用场景分析(附Java 接入代码)
143 0
|
11月前
|
小程序 JavaScript 开发者
小程序短信验证码登录,1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
小程序短信验证码登录,1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
518 0
|
11月前
|
小程序 开发工具 数据库
借助小程序云开发实现小程序支付功能第4节(代码实现)
借助小程序云开发实现小程序支付功能第4节(代码实现)
150 0
|
11月前
|
小程序 安全 JavaScript
小程序群发短信,借助云开发5行代码实现短信群发功能
小程序群发短信,借助云开发5行代码实现短信群发功能
263 0
|
11月前
|
小程序 JavaScript 数据安全/隐私保护
借助云开发5行代码获取小程序用户的手机号
借助云开发5行代码获取小程序用户的手机号
303 0
|
11月前
|
小程序 安全 IDE
借助小程序云开发实现小程序支付功能(含源码)
借助小程序云开发实现小程序支付功能(含源码)
108 0
|
小程序 开发者
微信小程序模板消息接口下线了,不用慌,调用统一服务消息接口来实现相同功能
做过微信开发的应该都有一点感触,就是他的开发文档不是一成不变的,接口有时候会被下线,但也不是一下子就不能用了,一般会兼容旧接口,然后提醒你使用新接口有更多好处。如果接口真的直接下线了,也会提供另一种能够实现相同功能的接口给你替换。所以有天你以为代码都写好了,没有bug了,悠哉悠哉的时候,忽然产品经理说微信的哪个接口不能用了,快去改一下,不要惊讶,老老实实去改就对了哈。
636 0
微信小程序模板消息接口下线了,不用慌,调用统一服务消息接口来实现相同功能