本文檔將指導(dǎo)您如何在微信小程序中，通過小程序插件接入驗(yàn)證碼。

前提條件

使用小程序插件接入驗(yàn)證碼前，需要先在 驗(yàn)證碼控制臺 中注冊小程序插件 AppID 和 AppSecret，注冊完成后，您可以在驗(yàn)證碼控制臺的驗(yàn)證詳情的基礎(chǔ)配置中，查看 AppID 以及 AppSecret。

注意：

小程序插件 AppID 僅限小程序插件接入方式使用，請勿使用在 Web 前端接入。

接入步驟

步驟1：添加插件

1. 用管理員身份登錄 微信公眾平臺，且需使用接入小程序的相關(guān)賬號。
2. 選擇【設(shè)置】>【第三方設(shè)置】>【添加插件】，在搜索框內(nèi)輸入關(guān)鍵字“天御驗(yàn)證碼”查找插件，并單擊【添加】，如下圖所示：
   

步驟2：集成插件

1. 引入驗(yàn)證碼小程序插件。
   使用驗(yàn)證碼插件前，需要在 app.json 中聲明驗(yàn)證碼小程序插件，如下：

   復(fù)制

   復(fù)制成功

   {
    "plugins": {
        "myPlugin": {
            "version": "1.0.0",
            "provider": "wxb302e0fc8ab232b4"
        }
    }
   }

2. 引入驗(yàn)證碼小程序組件。
   需要在頁面.json文件中需要引入自定義組件，js 代碼如下：

   復(fù)制

   復(fù)制成功

   {
    "usingComponents": {
     "t-captcha": "plugin://myPlugin/t-captcha"
    }
   }

步驟3：使用小程序插件

1. 在自定義的.wxml文件中，使用驗(yàn)證碼插件，wxml 代碼如下：

   復(fù)制

   復(fù)制成功

   <t-captcha
    id="captcha"
    app-id="小程序插件驗(yàn)證碼AppID"
    bindverify="handlerVerify"
    bindready="handlerReady"
    bindclose="handlerClose"
    binderror="handlerError" />
   <button bindtap='login'>登錄</button>

   • 組件參數(shù)說明：

     字段名	值類型	默認(rèn)值	說明
     appId	String	無	場景 ID
     size	String	normal	尺寸，可選 normal、small、mini
     lang	String	zh-CN	語言，可選 zh-CN、zh-TW、en
     themeColor	String	#1A79FF	主題色

   • 組件事件說明：

     事件名	參數(shù)	說明
     ready	無	驗(yàn)證碼準(zhǔn)備就緒
     verify	{ret, ticket}	驗(yàn)證碼驗(yàn)證完成
     close	無	驗(yàn)證碼彈框準(zhǔn)備關(guān)閉
     error	無	驗(yàn)證碼配置失敗

   • 組件方法說明：
     • show： 展示驗(yàn)證碼。
     • destroy： 銷毀驗(yàn)證碼。
     • refresh： 重置驗(yàn)證碼。

2. 在自定義的.js文件中，監(jiān)聽事件，js 代碼如下：

   復(fù)制

   復(fù)制成功

   Page({
    data: {},
    login: function () {
        this.selectComponent('#captcha').show()
        // 進(jìn)行業(yè)務(wù)邏輯，若出現(xiàn)錯誤需重置驗(yàn)證碼，執(zhí)行以下方法
        // if (error) {
        // this.selectComponent('#captcha').refresh()
        // }
    },
    // 驗(yàn)證碼驗(yàn)證結(jié)果回調(diào)
    handlerVerify: function (ev) {
        // 如果使用了 mpvue，ev.detail 需要換成 ev.mp.detail
        if(ev.detail.ret === 0) {
            // 驗(yàn)證成功
            console.log('ticket:', ev.detail.ticket)
        } else {
            // 驗(yàn)證失敗
            // 請不要在驗(yàn)證失敗中調(diào)用refresh，驗(yàn)證碼內(nèi)部會進(jìn)行相應(yīng)處理
        }
    },    
    // 驗(yàn)證碼準(zhǔn)備就緒
    handlerReady: function () {
        console.log('驗(yàn)證碼準(zhǔn)備就緒')
    },    
    // 驗(yàn)證碼彈框準(zhǔn)備關(guān)閉
    handlerClose: function () {
        console.log('驗(yàn)證碼彈框準(zhǔn)備關(guān)閉')
    },
    // 驗(yàn)證碼出錯
    handlerError: function (ev) {
        console.log(ev.detail.errMsg)
    }
   })

后續(xù)步驟

至此，驗(yàn)證碼微信小程序接入已完成，驗(yàn)證碼后臺需二次核查驗(yàn)證碼小程序插件票據(jù)結(jié)果，您需要進(jìn)行 后臺小程序插件 API 接入 操作，確保驗(yàn)證安全性。