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: '驗證碼錯誤',
      })
    })
  }
})

目錄結構與效果圖如下：

發送的短信驗證碼