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

目录结构与效果图如下:
这里写图片描述

发送的短信验证码
这里写图片描述


版权声明:本文为weixin_38190650原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。