小程序接入

最近更新时间:2019-08-20 10:34:37

前提条件

验证码接入前,需要先在 验证码控制台 中注册 AppID 和 AppSecret,注册完成后,您可以在控制台的 基础配置 中查看 AppID 以及 AppSecret。

接入步骤

1. 小程序唤起验证码
通过 wx.navigateToMiniProgram 跳转至验证码小程序,用户完成或关闭验证码后,将返回至调用方的小程序。
在 app.json 配置 navigateToMiniProgramAppIdList,如下:

{
  "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"]
}

wxml 如下:

<button bindtap="toTCaptcha">验证</button>

js 如下:

toTCaptcha: function () {
    wx.navigateToMiniProgram({
      appId: 'wx5a3a7366fd07e119',
      path: '/pages/captcha/index',
      extraData: {
        appId: 'appId'//您申请的验证码的 appId
      }
    })
  }

2. 在 app.js 获取验证结果
验证成功后,验证码小程序页面关闭,验证结果会返回给调用验证码的小程序页面。由于小程序间相互跳转过程中产生的数据仅能在 app.js 中获取到,故需要在 app.js 的 onShow 中添加以下代码,来捕获验证结果 captchaResult。

App({
  // ...
  onShow: function(options) {
    // 解决各类回调的兼容问题
    if (!this.captchaTicketExpire) this.captchaTicketExpire = {};

    if (options.scene === 1038 && options.referrerInfo.appId === 'wx5a3a7366fd07e119') {
      const result = options.referrerInfo.extraData;
      if (result.ret === 0) {
        const ticket = result.ticket;
        if (!this.captchaTicketExpire[ticket]) {
          this.captchaResult = result;
          this.captchaTicketExpire[ticket] = true;
        }
      } else {
        // 用户关闭了验证码
      }
    }
  },
  // ...
});

验证结果(captchaResult) 参数说明:

参数名 类型 说明
ret Number
  • 0:验证成功。
  • 1:验证失败。
  • 2:用户主动关闭验证码。
  • ticket String 验证成功的票据,用于后台校验验证合法性,仅验证成功时会生成,
    randstr String 用于后台校验验证票据的随机字符串,仅验证成功时会生成。

    3. 将验证结果返回至服务端校验
    在小程序页面的 onShow 阶段,将验证结果及待提交的表单数据一起提交到服务器,进行校验。

    // page.js
    const app = getApp()
    
    Page({
      data: {
        // ...
      },
      onShow() {
        const captchaResult = app.captchaResult;
        app.captchaResult = null; // 验证码的票据为一次性票据,取完需要置空
        if (captchaResult && captchaResult.ret === 0) {
          // 将验证码的结果返回至服务端校验
          // const ticket = captchaResult.ticket;
          // const randstr = captchaResult.randstr;
        }
      },
      // ...
    });

    至此,验证码客户端接入已完成,您可以进行 后台 API 接入 操作。