快捷導(dǎo)航

微信小程序接入騰訊云驗證碼的方法步驟

更新時間：2020年01月07日 09:40:14 作者：smile1213

這篇文章主要介紹了微信小程序接入騰訊云驗證碼的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言：最近做了一個小程序抽獎的活動，出現(xiàn)了部分用戶惡意薅羊毛的現(xiàn)象，因此考慮接入騰訊云的驗證碼。

其實騰訊的官方文檔寫的相當(dāng)清晰：https://cloud.tencent.com/doc...
不想啃文檔的筒子們的就往下繼續(xù)看吧~（雖然大同小異）

整體效果

1、小程序觸發(fā)驗證，跳轉(zhuǎn)到驗證碼小程序
2、在驗證碼小程序內(nèi)通過驗證，并攜帶參數(shù)跳回原來的小程序
3、在原來的小程序內(nèi)，監(jiān)測攜帶回的參數(shù)，并作后續(xù)操作

前提條件

驗證碼接入前，需要先在驗證碼控制臺中注冊 AppID 和 AppSecret，注冊完成后，您可以在控制臺的基礎(chǔ)配置中查看 AppID (下文extraData中使用) 以及 AppSecret。

注意，這里的 appId 和 appSecret 和小程序后臺的是不一致的！

接入步驟

1、在你需要的地方，喚起驗證碼小程序

首先在 app.json 配置 navigateToMiniProgramAppIdList，如下：

{
 "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"]
}

這個appId是官方文檔中直接提供的，搬上去就好。

假設(shè)你的喚起方式是通過一個這樣的按鈕事件：

<button bindtap="toTCaptcha">驗證</button>

toTCaptcha: function () {
  wx.navigateToMiniProgram({
   appId: 'wx5a3a7366fd07e119',
   path: '/pages/captcha/index',
   extraData: {
    appId: 'appId' //您申請的驗證碼的 appId
   }
  })
 }

2、在 app.js 獲取驗證結(jié)果

由于小程序間相互跳轉(zhuǎn)過程中產(chǎn)生的數(shù)據(jù)僅能在 app.js 中獲取到，故需要在 app.js 的 onShow 中添加以下代碼，來捕獲驗證結(jié)果 captchaResult

App({
 // ...
 onShow: function(options) {
  // 解決各類回調(diào)的兼容問題
  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 {
    // 用戶關(guān)閉了驗證碼
    // 這里可以加上一些驗證失敗提示
   }
  }
 },
 // ...
});

驗證結(jié)果（captchaResult）參數(shù)說明：

3、將驗證結(jié)果返回至服務(wù)端校驗

在小程序頁面的 onShow 階段，將驗證結(jié)果及待提交的表單數(shù)據(jù)一起提交到服務(wù)器，進行校驗。

// page.js
const app = getApp()

Page({
 data: {
  // ...
 },
 onShow() {
  const captchaResult = app.captchaResult;
  app.captchaResult = null; // 驗證碼的票據(jù)為一次性票據(jù)，取完需要置空
  if (captchaResult && captchaResult.ret === 0) {
   // 將驗證碼的結(jié)果返回至服務(wù)端校驗，以及后續(xù)的操作
   // const ticket = captchaResult.ticket;
   // const randstr = captchaResult.randstr;
  }
 },
 // ...
});

用一個詞描述這個開發(fā)過程：搬上去！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: