leanCloud实现微信小程序短信验证功能
LeanCloud 为小程序提供一站式后端云服务,免去服务器维护、证书配置等繁琐的工作,大幅降低开发和运维成本。本文说明了如何在微信小程序中使用 LeanCloud 实现短信验证(前100条免费)。
准备工作
下载小程序开发者工具,在微信公众平台注册小程序,以获得appId和密钥。
微信小程序公众号和微信公众服务号是有区别的。小程序目前不对个体开放,个体若需注测,可去某宝问问。
创建应用
如果你还没有创建过 LeanCloud 应用,请登录 LeanCloud 控制台 创建一个新应用
配置域名白名单
按照leanCloud中 小程序域名白名单配置 的步骤进行配置
安装与初始化
- 前往 下载页,下载最新版本的 av-weapp-min.js,移动到
libs
目录。 av-weapp-live-query-min.js。 - 在 app.js 中使用
const AV = require('./libs/av-weapp-min.js');
获得 AV 的引用。在其他文件中使用时请将路径替换成对应的相对路径。 - 在 app.js 中初始化应用:
// LeanCloud 应用的 ID 和 Key
AV.init({
appId: 'XnviJYlEMwWJc5wekiCLsUaT-gzGzoHsz',
appKey: 'nxtha5CxxOTEV7lef5tJh7ia',
});
最终效果如图:
开启leanCloud短信验证服务
1、注册leanCloud应用后,前往
控制台->应用->消息->设置
在短信选项中勾选启用通用的短信验证码服务(开放 requestSmsCode 和 verifySmsCode 接口)
2、创建新短信签名,提交审核(很容易过的)
3、填写测试手机号(这个填不填无所谓)
代码实现
具体请参leanCloud短信SMS服务使用指南,下面我仅贴出小程序代码示例:
//phoneValidate.wxml
<!--pages/phoneValidate/phoneValidate.wxml-->
<view class="classname">
<form bindsubmit='requestCode'>
<label>手机号</label>
<input placeholder="{{phone == '' ? '请输入手机号' : phone}}" name='phone' type='digit' auto-focus=''></input>
<button type='primary' form-type='submit'>获取验证码</button>
</form>
<form bindsubmit='verifyCode'>
<label>验证码</label>
<input type='digit' placeholder='请输入验证码' name='code'></input>
<button type='primary' form-type='submit'>提交</button>
</form>
</view>
//phoneValidate.js
// pages/phoneValidate/phoneValidate.js
const AV = require('../../libs/av-weapp-min.js');
Page({
/**
1. 页面的初始数据
*/
data: {
phone:''
},
requestCode: function(e) {
var that = this;
console.log(e.detail.value.phone);
AV.Cloud.requestSmsCode({
mobilePhoneNumber: e.detail.value.phone,
name: 'Jzin', //这是短信模板的{{name}}参数
op: '短信验证', //可有可无
ttl: 10 // 验证码有效时间为 10 分钟
}).then(function () {
that.setData({ phone: e.detail.value.phone });
wx.showToast({
title: '发送成功',
})
}, function (err) {
console.log(err);
});
},
verifyCode: function(e) {
AV.Cloud.verifySmsCode(e.detail.value.code, this.data.phone).then(function () {
wx.showToast({
title: '验证成功',
})
}, function (err) {
wx.showToast({
title: '验证码错误',
})
})
}
})
目录结构与效果图如下:
发送的短信验证码
版权声明:本文为weixin_38190650原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。