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

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

老规矩，先看效果图

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

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

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

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

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

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

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

短信验证的原理讲解

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解如何使用微信小程序云函数发送短信验证码

    其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 1.安装 下载后的SDK在cloudfunctions文件夹下会包含3个云函数文件夹,如下: 由于目前IDE没有云函数导入功能,您需要手工创建同名的云函数,然后将云函数下的文件手工拷进去 注:下载的SDK是一个

  • 微信小程序发送短信验证码完整实例

    微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class="container"> <view class='row'> <input placeholder='请输入姓名' bindinput='bindNameInput'/> </view> <view class='row'> <inpu

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

    最近在做小程序验证码登陆时,用到了短信发送验证码的需求,自己也研究了下,用云开发结合云函数来实现验证码短信发送还是很方便的. 老规矩,先看效果图 这是我调用腾讯云的短信平台发送的登陆验证码.核心代码其实只有下面这么多 是不是感觉实现起来特别简单,怎么说呢,我们代码调用其实就这么几行,就可以实现短信的发送,但是腾讯云短信模板的审核比较繁琐,还有我们先去申请短信模板,短信模板审核通过后才可以使用. 我们就先来说代码实现,然后再带大家简单的学习下短信模板的申请. 一,安装node类库 其实我们这里用到

  • mpvue网易云短信接口实现小程序短信登录的示例代码

    上一篇简单介绍了mpvue实现快递单号查询,慢慢发现mpvue真的和vue很像,但它有几乎十分的吻合小程序的语法规范,刚开始用起来会觉得特点的爽,但涉及到细节却是有很多采坑的地方.今天利用网上的网易云接口,再结合mpvue简单写一写小程序短信验证登录. 简单封装的一个网络请求文件,网易云接口网上大佬们GitHub上还是比较的多而且开源 const baseURL = "https://*****:1717"; //基路径 exports.http = function({url,met

  • Android开发中通过手机号+短信验证码登录的实例代码

    首先,需要一个电话号码,目前很多账户都是将账户名设置成手机号,然后点击按钮获取手机验证码. 其次,你需要后台给你手机短信的验证接口,各个公司用的不一样,这个身为前端,不需要你来考虑,你只要让你后台给你写好接口,你直接调用就好了. activity_login.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr

  • Springboot实现阿里云通信短信服务有关短信验证码的发送功能

    Springboot实现阿里云通信短信服务有关短信验证码的发送功能

    前言 短信验证码是通过发送验证码到手机的一种有效的验证码系统.主要用于验证用户手机的合法性及敏感操作的身份验证. 现在市面上的短信服务平台有很多.大家在选择的时候未免会有些不好抉择.本人建议选择短信服务商应遵循以下几点: 服务商知名度高,业务流量大.(这样的平台可信度高) 服务稳定,不能经常宕机.(保证自身业务的流畅运行) 文档全面详细.(没文档怎么玩?) 最近的一个项目中,注册和修改密码时需要用到短信验证码校验手机号的功能.本人也是对比几家后,直接选择阿里云通信的短信服务.(本身项目服务器也是

  • 用Laravel Sms实现laravel短信验证码的发送的实现

    本文介绍了用Laravel Sms实现laravel短信验证码的发送的实现,分享给大家,具体如下: 阿里云短信服务 使用Laravel Sms这个扩展包实现短信验证码的发送,这里以阿里云的短信服务为例: 首先,要创建短信签名和短信模板,具体申请详情如下, 接下来,需要创建AccessKey,由于AccessKey是访问阿里云API的密钥,具有你所登陆的账户完全的权限,为了安全起见,建议使用子用户AccessKey,为其分配一定的权限即可. 接下来,在项目根目录执行命令: composer req

  • IOS开发中如何设计短信验证码防刷机制

    最近遇到一个关于防止短信验证码被刷的产品设计问题,后来在面试一个前来应聘JAVA开发的程序员的时候,他也提到了他以前公司的系统也遭遇过这个被刷短信的问题.因此,就"如何设计短信验证码防刷机制"作一个总结和分享. 1.时间限制:60秒后才能再次发送 从发送验证码开始,前端(客户端)会进行一个60秒的倒数,在这一分钟之内,用户是无法提交多次发送信息的请求的.这种方法虽然使用得比较普遍,但是却不是非常有用,技术稍微好点的人完全可以绕过这个限制,直接发送短信验证码. 2.手机号限制:同一个手机

  • 教你用Python实现短信验证码的发送

    目录 1. 短信API平台 2. 使用官方提供的SDK实现短信发送 2.1 安装SDK 2.2 使用官方的测试用例进行测试 2.3 参数及其参数的查看 3. 单例模式实现短信发送 总结 1. 短信API平台 使用的短信API平台为:容联云(https://www.yuntongxun.com/) 开发者文档:http://doc.yuntongxun.com/pe/5a531a353b8496dd00dcdfe2 2. 使用官方提供的SDK实现短信发送 Python SDK 文档 Python

  • Spring Security 实现短信验证码登录功能

    之前文章都是基于用户名密码登录,第六章图形验证码登录其实还是用户名密码登录,只不过多了一层图形验证码校验而已:Spring Security默认提供的认证流程就是用户名密码登录,整个流程都已经固定了,虽然提供了一些接口扩展,但是有些时候我们就需要有自己特殊的身份认证逻辑,比如用短信验证码登录,它和用户名密码登录的逻辑是不一样的,这时候就需要重新写一套身份认证逻辑. 开发短信验证码接口 获取验证码 短信验证码的发送获取逻辑和图片验证码类似,这里直接贴出代码. @GetMapping("/code/

  • 基于 antd pro 的短信验证码登录功能(流程分析)

    概要 最近使用 antd pro 开发项目时遇到个新的需求, 就是在登录界面通过短信验证码来登录, 不使用之前的用户名密码之类登录方式. 这种方式虽然增加了额外的短信费用, 但是对于安全性确实提高了不少. antd 中并没有自带能够倒计时的按钮, 但是 antd pro 的 ProForm components 中倒是提供了针对短信验证码相关的组件. 组件说明可参见: https://procomponents.ant.design/components/form 整体流程 通过短信验证码登录的

  • 基于Redis实现短信验证码登录项目示例(附源码)

    目录 Redis短信登录流程描述 短信验证码的发送 短信验证码的验证 是否登录的验证 源码分析 模拟发送短信验证码 短信验证码的验证 校验是否登录 登录验证优化 Redis短信登录流程描述 短信验证码的发送 用户提交手机号,系统验证手机号是否有效,毕竟无效手机号会消耗你的短信验证次数还会导致系统的性能下降.如果手机号为无效的话就让用户重新提交手机号,如果有效就生成验证码并将该验证码作为value保存到redis中对应的key是手机号,之所以这么做的原因是保证key的唯一性,如果使用固定字符串作为

随机推荐