专栏首页小程序云开发入门借助云开发实现小程序短信验证码的发送
原创

借助云开发实现小程序短信验证码的发送

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

老规矩,先看效果图

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

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

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

一,安装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如下
    到这里我们的短信验证码的发送就完整的实现了,是不是很简单。

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

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

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

短信验证的原理讲解

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

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

如果大家觉得不完整,我也已经把完整源码放到网盘里了,有需要的同学可以到我公号里回复“短信”获取源码。

后面我还会分享更多小程序相关的知识点出来,请持续关注。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3行代码实现小程序直播,带美颜,优惠券,抽奖,回放等功能

    注意我们上图红色框里的一些要求。必须要满足这些条件,才可以开通直播功能。更详细些的如下:

    编程小石头
  • 小程序webview组件,小程序内联h5页面,webview实现微信支付

    先说下实现原理吧,实现原理就是我们在webview的h5页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传...

    编程小石头
  • 借助云开发实现小程序朋友圈的发布与展示

    这里就不多说了,如果你还不知道如何创建小程序项目可以去翻看下我之前的文章,也可以看下我录制的《10小时零基础入门小程序开发》

    编程小石头
  • 金融行业平台常见安全漏洞与防御

    ? 一、前言 互联网金融是这两年来在金融界的新兴名词,也是互联网行业一个重要的分支,但互联网金融不是互联网和金融业的简单结合,而是在实现安全、移动等网络技术水...

    FB客服
  • 解决网站漏洞修复之短信验证码被盗刷

    公司的商城网站刚上线运营不到一个星期,网站就被攻击了,导致公司网站的短信通道被人恶意刷了几万条短信,损失较大,同时服务器也遭受到了前所未有的攻击。CPU监控看到...

    技术分享达人
  • 什么是智能钛机器学习平台(TI-ONE)

    钛(Ti)是一种轻量级、高强度的金属,也是制造钢铁侠飞行战衣的材料。在人工智能快速发展的今天,智能钛机器学习平台(TI-ONE)作为腾讯AI战略发展(Tence...

    TI MAKER
  • 【2020腾讯广告算法大赛】什么是智能钛机器学习平台(TI-ONE)

    钛(Ti)是一种轻量级、高强度的金属,也是制造钢铁侠飞行战衣的材料。在人工智能快速发展的今天,智能钛机器学习平台(TI-ONE)作为腾讯AI战略发展(Tence...

    腾讯智能钛AI开发者
  • 【产品】什么是智能钛机器学习平台(TI-ONE)

    钛(Ti)是一种轻量级、高强度的金属,也是制造钢铁侠飞行战衣的材料。在人工智能快速发展的今天,智能钛机器学习平台(TI-ONE)作为腾讯AI战略发展(Tence...

    jennyxu
  • 40种语言、9项推理任务,谷歌发布新的NLP基准测试Xtreme

    目前,全球存在着超过6900种语言,这是自然语言处理研究者们的巨大噩梦。因为大多数语言都是数据稀疏的,研究者找不到足够多的数据来单独训练成熟模型。

    大数据文摘
  • 【整合】input标签JS改变Value事件处理方法

      某人需要在时间控件给文本框赋值时,触发事件函数。实现的效果:   1、文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件。阻塞在于失去焦点后才触...

    SmileSmith

扫码关注云+社区

领取腾讯云代金券