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


Posted in Javascript onJanuary 06, 2020

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

老规矩,先看效果图

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

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

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

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

一,安装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如下

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

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

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

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

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

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

短信验证的原理讲解

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 #Javascript
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
JS实现音乐导航特效
Jan 06 #Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 #Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP教程 预定义变量
2009/10/23 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP发送短信代码分享
2015/08/11 PHP
php实现微信发红包
2015/12/05 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
中专生求职自荐信范文
2013/12/22 职场文书
先进集体获奖感言
2014/02/13 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
司仪主持词两篇
2014/03/22 职场文书
大学生个人学年总结
2015/02/15 职场文书
公司联欢会主持词
2015/07/04 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书