新手指南：頂象驗證碼如何接入微信小程式？
自2017年小程式釋出以來，經過4年的快速發展，小程式已然成為企業互聯網布局不可或缺的一環。無論是網際網路企業還是擁抱網際網路的傳統企業，無論是服務導向型企業還是產品導向型企業，小程式都為使用者提供了一種輕量化的產品體驗方式。當小程式越來越多的被不同群體所接受，對於小程式的開發也越來越“水漲船高”。
微信小程式面臨的三類安全風險
無論是社交電商、O2O模式以及遊戲、社群，抑或是其他形式的小程式開發，其終極目的是提升使用者體驗、更好地幫助商家連線線上線下服務獲取客戶。小程式的安全穩定運營與驗證在這一過程中起到了至關重要的作用。小程式的安全問題主要集中在以下三方面：
- 小程式與微信互動存在安全問題。與微信的互動只能使用其提供的API進行，對這些API規範的使用會導致安全問題。
- 小程式與第三方伺服器的業務邏輯互動存在問題。這是安全最薄弱的環節，業務邏輯多種可能存在風險或漏洞，如使用者資訊洩漏、訂單盜刷、資訊保安。
- 第三方伺服器Web服務風險。Web伺服器中存在的風險，如儲存型XSS攻擊、SQL注入、管理員口令洩露。具體的風險包括，薅羊毛、仿冒山寨、資料爬取等問題。小程式雖然業務模組相較APP會精簡許多，但是仍然會有註冊、登入等重要的業務入口。這些入口在傳統平臺上往往也是機器流量攻擊的首要目標。
統計顯示，在2021年上半年資料中，小程式端的驗證資料主要來源於登入註冊，其次是搜尋查詢和支付下單。
頂象“無感驗證”驗證碼如何接入微信小程式？
頂象“無感驗證”集裝置指紋、行為校驗、操作校驗、地理位置校驗等多項功能與一身，基於操作者行為及環境資訊等資料資訊，結合模型和風控分析。根據使用者的風險程度，採取不同難度的驗證方式，安全使用者無感知通過，避免惡意攻擊帶來的業務損失，留存真實使用者，能夠保障百萬小程式安全執行。
目前，頂象“無感驗證”驗證碼接入微信小程式的方式有兩種，一種是外掛式接入，一種是跳轉式接入。
外掛式接入微信小程式
1）用管理員身份登入微信公眾平臺，請使用需要接入小程式的相關賬號（微信公眾平臺採用不同賬號區分，公眾號的後臺和小程式的後臺分別為不同賬號），依次點選：設定-第三方服務-新增外掛，然後輸入關鍵字“頂象”並搜尋，如下圖所示：
2）獲取金鑰。未註冊使用者可在頂象官網進行賬號註冊，建立應用獲取應用金鑰AppID和AppSecret。
3）整合外掛。宣告外掛：在app.json中宣告外掛。
跳轉式接入微信小程式
1）用管理員身份登入微信公眾平臺，請使用需要公眾號的相關賬號（微信公眾平臺採用不同賬號區分，公眾號的後臺和小程式的後臺分別為不同賬號），依次點選：小程式-小程式管理-新增-關聯小程式，然後輸入小程式AppID“wx82db4a59175bdfdf”並搜尋，如下圖所示：
2）獲取金鑰。未註冊使用者可在頂象官網進行賬號註冊，建立應用獲取應用金鑰AppID和AppSecret。
3）小程式整合。
首先，通過navigator元件跳轉至頂象驗證碼。
.wxml<navigator target="miniProgram"app-id="wx82db4a59175bdfdf"path="/pages/captcha/captcha"extra-data="{{options}}">
<button>登陸</button></navigator>
.jsPage({
data: {
options: {
appId: '這裡填寫在頂象官網申請到的appId',
customStyle: {
panelBg: '',
captchaBgColor: ''
}
}
}
})
引數說明：
| 引數 |
值 |
說明 |
| appId |
String |
這裡填寫在頂象官網申請到的appId，注意必須填寫正確，否則會報：功能無法使用 |
| customStyle |
Object |
自定義樣式物件,panelBg為整個頁面的background屬性，captchaBgColor為驗證碼的background-color屬性 |
然後，在頂象驗證碼中驗證。
最後，驗證成功。驗證結果會在呼叫方app.js中頂onShow生命週期方法中取到。
if (options.scene === 1038 && options.referrerInfo.appId === 'wx82db4a59175bdfdf') {
const result = options.referrerInfo.extraData;
if (result) {
console.log('返回結果:', result)
} else {
// 使用者點選右上角關閉了驗證碼
}
}
驗證結果說明：
| 引數 |
值 |
說明 |
| success |
Boolean |
驗證成功失敗 |
| token |
String |
驗證成功才有：token |
| msg |
String |
驗證失敗或引數不合法才有：錯誤資訊 |
頂象“無感驗證”微信小程式的常見問題
問：生產控制檯配置的是圖示點選方式，小程式裡顯示的為什麼還是滑塊方式？
答：小程式的驗證碼型別目前首次只支援滑塊驗證，二次驗證方式只支援圖文點選驗證。 請確認小程式的配置驗證方式正確，可在 控制檯->無感驗證->場景管理頁面 ，選擇對應的場景（你所接入的小程式名）來編輯驗證方式。
問：微信小程式如何接入ConstIDServer地址？
答：小程式ConstIDServer地址以 /udid/ w1 結尾，如http://host/udid/w1。
問：返回 INVALID_APP_ID 是什麼問題？
答：如上所述，是傳入的Appid 錯誤，應填寫在頂象控制檯建立的產品Appid。 可以登入控制檯，在系統管理選單下進入產品管理頁面，檢視對應產品的Appid。
問：小程式的版本號如何修改？
答：在app.json中宣告外掛時，修改版本號即可
{"plugins": {
"captcha": {
"version": "1.2.5",
"provider": "wxbf8483dfc5ac6817"
}
}
}
問：一直顯示“智慧載入中”，怎麼辦？
答：請檢查當前網路連線是否正常。