微信小程序接入騰訊云驗(yàn)證碼的方法步驟

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

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

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

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

整體效果

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

前提條件

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

注意，這里的 appId 和 appSecret 和小程序后臺(tái)的是不一致的！

接入步驟

1、在你需要的地方，喚起驗(yàn)證碼小程序

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

{
 "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"]
}

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

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

<button bindtap="toTCaptcha">驗(yàn)證</button>

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

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

由于小程序間相互跳轉(zhuǎn)過程中產(chǎn)生的數(shù)據(jù)僅能在 app.js 中獲取到，故需要在 app.js 的 onShow 中添加以下代碼，來(lái)捕獲驗(yàn)證結(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)閉了驗(yàn)證碼
    // 這里可以加上一些驗(yàn)證失敗提示
   }
  }
 },
 // ...
});

驗(yàn)證結(jié)果（captchaResult）參數(shù)說(shuō)明：

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

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

// page.js
const app = getApp()

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

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

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

您可能感興趣的文章: