**接入前的準備工作**

接入之前，在頂象官網（[https://www.dingxiang-inc.com/business/captcha](https://www.dingxiang-inc.com/business/captcha?plan=無感驗證&unit=小程式滑動驗證)）註冊一個賬號。

註冊後，登入管理平臺。找到左側選單欄的“無感驗證”模組，並點選“免費試用”按鈕。接下來，管理平臺會提示填寫應用名稱、應用網址、應用場景、應用偏好。我們可以根據自己運營的小程式的相關情況填寫。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200515210011352.png)

在填寫完成之後，會自動進入應用管理介面，記錄應用金鑰，在稍後的接入過程中需要用到。在這裡，我們可以閱讀開發文件，檢視接入的步驟與相關程式碼。

**如何接入小程式驗證碼**

登入微信公眾平臺的小程式管理頁面，選擇“關聯小程式”，然後就可以輕鬆接入驗證碼小程式。

![undefined](https://img-blog.csdnimg.cn/20200515210257854.png)

**接入方式有兩種：跳轉式接入和 外掛式接入。步驟略有不同，下面詳細介紹。**

- **跳轉式接入**

首先，登入微信的小程式管理平臺，在“開發管理”中搜尋：wx82db4a59175bdfdf（頂象驗證碼小程式的ID），新增並關聯頂象驗證碼小程式。

![undefined](https://img-blog.csdnimg.cn/20200515210330780.png)

然後，把開發文件的示例程式碼複製、並貼上到小程式中。

![undefined](https://img-blog.csdnimg.cn/20200515210346554.png)

在Appid中填寫之前獲取的金鑰id，這樣就完成了前端部分的整合（需要注意的是，微信模擬器可能會因為BUG無法顯示，我們可以實際執行看是否能夠執行跳轉）。

![undefined](https://img-blog.csdnimg.cn/20200515210401472.png)

在後端的整合方面，我們需要在頂象開發文件中下載整合SDK，然後在開發文件的幫助下填寫secret進行鑑權。如果填寫正確，執行之後會返回驗證成功的引數。

- **外掛式接入**

管理員身份登入微信公眾平臺，並使用需要接入小程式的相關賬號。接下來，依次點選設定-第三方服務-新增外掛，然後輸入關鍵字“頂象”並搜尋（輸入），選擇搜尋結果中的“頂象驗證碼”新增外掛。

![undefined](https://img-blog.csdnimg.cn/20200515210426344.png)

此時，平臺會提示填寫申請說明，如果申請長時間無法透過，可以諮詢頂象技術的客服詢問原因或是重新提交申請。

透過之後，需要在app.json中宣告外掛，並在頁面.json中引入自定義元件。

先來看一下宣告外掛，我們只需要在預設的.json檔案基礎上加這些程式碼即可（具體程式碼可以從開發說明文件之中複製）。

![undefined](https://img-blog.csdnimg.cn/2020051521044047.png)

為了驗證效果，我們可以寫一個簡單的登入介面表單，包括賬號+密碼+登入按鈕（這裡表單用了微信的weui）。根據文件說明，先在需要增加的頁面index.xwml中新增如下程式碼：

![undefined](https://img-blog.csdnimg.cn/20200515210600640.png)

可以看到，登入介面已經出現點選驗證的控制元件了，之後我們需要在當前頁面index.js中新增監聽事件，並填寫之前拿到的金鑰中的APPID即可。

無論哪種方式，都可以快速使用接入小程式，讓小程式使用者擯棄“反人類”的複雜驗證碼，透過滑動的方式快捷透過驗證，還可以防範機器行為、薅羊毛、虛假裂變、賬號欺詐等惡意行為，大大提升使用者的體驗和安全性。

小程式接入滑動驗證

相關文章