"api工厂" 使用手册

api接口开箱即用,云后台管理,助力前端,解放后端开发;

不懂编程也能独立开发应用,小步快跑,快速创业!

旨为更懂你!

短信验证码例子

前言


本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:


《创建 HelloWorld 项目》

《使用 “apifm-wxapi” 快速开发小程序》

《免费注册开通后台,获得专属域名》


功能说明


很多安全场合,都需要使用到短信验证码功能,来确保操作者是本人;

一般app都会使用 “手机号码 + 短信验证码” 的方式来实现用户注册 / 登录;

当忘记密码的时候,一般也会使用 “手机号码 + 短信验证码” 来重置登录密码;


所以,本例就带大家来编写一个可发送验证码、收到验证码后输入正确的验证码进行校验是否正确的微信小程序


准备工作


  1. 申请短信验证码发送通道
    本案例展示的是真实发送手机短信验证码,所以需要你先开通短信通道,目前有很多平台都可以申请(免费试用)短信通道;“apifm-wxapi” 支持以下短信运营商,你可前往注册账号后一般即可获得试用的免费体验短信条数:阿里云、腾讯云、示远科技、赛邮·云通讯、创瑞、云之讯、八米科技、上海助通
    有特殊需求,可留言我们为你增加新的短信运营商的支持
  2. 回顾 “图形验证码” 教程
    为安全性考虑,防止短信机器人进行短信轰炸,正如现有很多 app 的做法一样,在获取短信验证码之前,你需要先手动填入一个图形验证码;只有你填写的图形验证码是正确的,才会下发验证码短信至你填写的手机号码
    《小程序图形验证码输入校验例子》


后台配置


开启 “短信验证码” 模块


登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理


找到 “短信验证码” 模块,点击 “启用模块” ,然后 F5 刷新一下后台界面,你将可以看到新的菜单: “短信设置” -> “验证码设置”;


配置短信通道


点击上面的 “验证码设置” 菜单,根据你申请的短信通道的运营商,点击进入进行配置;

正确配置后,你即可以继续往下的章节,体验发送短信了;


查看短信发送记录


左侧菜单 “短信设置” -> “短信记录” ,详细记录了每一次获取短信验证码的短信发送记录,以备后续有需要的时候进行查询;


小程序实现


效果演示



wxml代码


 1<view class="page">
 2  <view class="page__bd">
 3    <view class="weui-cells weui-cells_after-title">
 4      <view class="weui-cell ">
 5        <view class="weui-cell__bd">
 6          <input class="weui-input" type="number" placeholder="请输入手机号码" value="{{mobile}}" bindinput="mobileChange" />
 7        </view>
 8      </view>
 9      <view class="weui-cell ">
10        <view class="weui-cell__bd">
11          <input class="weui-input" type="number" placeholder="请输入右侧验证码" value="{{piccode}}" bindinput="piccodeChange" />
12        </view>
13        <view class="weui-cell__ft">
14          <image bindtap="changePic" class="iconScan" src="{{ picurl }}"></image>
15        </view>
16      </view>
17      <view wx:if="{{smsCodeSend}}" class="weui-cell ">
18        <view class="weui-cell__bd">
19          <input class="weui-input" type="number" placeholder="输入短信验证码" value="{{code}}" bindinput="codeChange" />
20        </view>
21      </view>
22    </view>
23
24    <view class="weui-btn-area">
25      <button wx:if="{{!smsCodeSend}}" class="weui-btn" type="primary" bindtap="get">获取短信验证码</button>
26      <button wx:if="{{smsCodeSend}}" class="weui-btn" type="warn" bindtap="check">校验输入是否正确</button>
27    </view>
28  </view>
29</view>


js代码


  1const WXAPI = require('apifm-wxapi')
  2WXAPI.init('gooking')
  3
  4Page({
  5  data: {
  6    key: Math.random(),
  7    picurl: undefined,
  8    mobile: undefined,
  9    piccode: undefined,
 10    code: undefined,
 11    smsCodeSend: false, // 短讯是否已发送
 12  },
 13  onLoad: function (options) {
 14
 15  },
 16  onShow: function () {
 17    this.changePic()
 18  },
 19  changePic(){
 20    const _key = Math.random()
 21    this.setData({
 22      code: null,
 23      key: _key,
 24      picurl: WXAPI.graphValidateCodeUrl(_key)
 25    })
 26  },
 27  piccodeChange(e){
 28    this.setData({
 29      piccode: e.detail.value
 30    })
 31  },
 32  codeChange(e){
 33    this.setData({
 34      code: e.detail.value
 35    })
 36  },
 37  mobileChange(e){
 38    this.setData({
 39      mobile: e.detail.value
 40    })
 41  },
 42  get() {
 43    if (!this.data.mobile){
 44      wx.showToast({
 45        title: '手机号码不能为空',
 46        icon: 'none'
 47      })
 48      return
 49    }
 50    if (!this.data.piccode){
 51      wx.showToast({
 52        title: '图形验证码不能为空',
 53        icon: 'none'
 54      })
 55      return
 56    }
 57    WXAPI.smsValidateCode(this.data.mobile, this.data.key, this.data.piccode).then(res => {
 58      console.log(res)
 59      if (res.code == 0) {
 60        wx.showToast({
 61          title: '短信已发送',
 62          icon: 'success'
 63        })
 64        this.setData({
 65          smsCodeSend: true
 66        })
 67      } else {
 68        wx.showToast({
 69          title: res.msg,
 70          icon: 'none'
 71        })
 72        this.changePic()
 73      }
 74    })
 75  },
 76  check() {
 77    if (!this.data.mobile){
 78      wx.showToast({
 79        title: '手机号码不能为空',
 80        icon: 'none'
 81      })
 82      return
 83    }
 84    if (!this.data.code){
 85      wx.showToast({
 86        title: '验证码不能为空',
 87        icon: 'none'
 88      })
 89      return
 90    }
 91    WXAPI.smsValidateCodeCheck(this.data.mobile, this.data.code).then(res => {
 92      console.log(res)
 93      if (res.code == 0) {
 94        wx.showToast({
 95          title: '输入正确',
 96          icon: 'success'
 97        })
 98      } else {
 99        wx.showToast({
100          title: res.msg,
101          icon: 'none'
102        })
103      }
104    })
105  }
106})


WXAPI.init('gooking')  这句代码是将你的小程序链接到你的后台,其中  gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明);


总结


本案例主要使用了 apifm-wxapi 的以下2个方法:


1WXAPI.smsValidateCode(mobile, key, picCode)
2WXAPI.smsValidateCodeCheck(mobile, code)


如果后台不开启图形验证码校验的话,第一个方法的 2,3 两个参数是可以不传的,只是这样的话,要慎用,防止短信轰炸


关于  apifm-wxapi 更多的使用方法:


《apifm-wxapi使用说明》


本案例Demo代码下载:


《apifm-wxapi使用Demo程序》


期待你的进步!

感谢!