leanCloud实现微信小程序短信验证功能

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: '验证码错误',
      })
    })
  }
})

目录结构与效果图如下：

发送的短信验证码