uni-app微信小程序接入人臉核身SDK


這幾天使用uni-app開發某銀行的一個微信小程序,須要集成接入騰訊雲的人臉核身SDK,如上圖所示,記錄下整合接入過程及踩的一些坑,幫助後面須要的朋友們。關於uni-app接入人臉核身SDK有不懂的地方能夠在下面提問,看到會及時回覆。javascript

申請服務

不是全部的企業都可以申請的,須要符合如下行業要求的客戶才能申請
政務:政府機構或事業單位
金融:銀行、保險
醫療:公立醫療機構
運營商:電信運營商
教育:公立教育機構
交通:航空、客運、網約車、交通卡、共享交通、軌道交通、租車
旅遊:酒店
物流:快遞、郵政、物流前端

因爲SDK會調用小程序原生的wx.startFacialRecognitionVerify方法,因此總共得申請2個服務
SDK服務申請人臉核身服務
小程序查看申請流程(須要發送郵件申請,使用該服務的小程序的appid,後面開發也是用的這個)
重要的事情說3遍
以上這2個服務都須要申請,缺一不可。
以上這2個服務都須要申請,缺一不可。
以上這2個服務都須要申請,缺一不可。java

下載SDK

因爲不是我申請的,因此怎麼下載我也不知道,聽羣裏的人說的是SDK騰訊雲下發給客戶的。json

SDK目錄結構

image.png

SDK接入

參考騰訊雲文檔的接入方法:https://cloud.tencent.com/document/product/1007/31071
文檔是針對原生小程序寫的,因此頁面引入的方法有所不一樣
因爲uni-app不支持直接引入小程序的原生頁面,因此這裏能想到的就是將它看成成一個微信小程序的組件,而後uni-app的頁面引入這個組件小程序

解壓引入SDK

在uni-app項目中新建wxcomponents目錄,將SDK解壓後放到該目錄
image.png
pages.jsonglobalStyle中全局引入小程序的組件,注意引用的路徑後端

"usingComponents": {
  "verify-mpsdk": "/wxcomponents/verify_mpsdk/index/index"
}

image.png

新建人臉核身頁面

pages中新建人臉核身的頁面face(名字能夠隨意,根據本身的須要起名),
pages.json中配置頁面
image.png
face頁面中引入verify-mpsdk組件
image.png
最終的人臉核身的頁面訪問就是/pages/face/face微信小程序

初始化SDK

在須要的頁面初始化SDK,若有個頁面須要點擊按鈕進行人臉核身,就在這個頁面進行初始化。
這個直接照着文檔快速入門中的來就好了,這裏就直接使用uni-app默認的index頁面,
適當修改下便可,大概代碼以下:api

<template>
  <view class="content">
    <button type="primary"
      @tap="gotoVerify">
      進入人臉核身
    </button>
  </view>
</template>

<script>
    export default {
        data() {
            return {
                BizToken: ''
            }
        },
        onLoad() {
            // 初始化慧眼實名核身組件
            const Verify = require('@/wxcomponents/verify_mpsdk/main.js')
            Verify.init()
        },
        methods: {
            // 單擊進入人臉核身按鈕時,觸發該函數
            gotoVerify () {
                this.BizToken = '' // 這裏須要咱們去客戶後端調用DetectAuth接口獲取BizToken
                // 調用實名核身功能
                wx.startVerify({
                        data: {
                            token: this.BizToken // BizToken
                        },
                        success: (res) => { // 驗證成功後觸發
                                // res 包含驗證成功的token, 這裏須要加500ms延時,防止iOS下不執行後面的邏輯
                                setTimeout(() => {
                                    // 驗證成功後,拿到token後的邏輯處理,具體以客戶自身邏輯爲準
                                    console.log(res)
                                }, 500)
                        },
                        fail: (err) => {  // 驗證失敗時觸發
                                // err 包含錯誤碼,錯誤信息,彈窗提示錯誤
                                setTimeout(() => {
                                        console.log(err)
                                        wx.showModal({
                                            title: "提示",
                                            content: err.ErrorMsg,
                                            showCancel: false
                                        })
                                }, 500)
                        }
                })
            }
        }
    }
</script>

注意下這裏的BizToken,須要調用後端服務接口來獲取,
須要後端的同窗調用騰訊雲提供的DetectAuth來返回前端須要的BizToken
調試開發階段咱們能夠先經過騰訊雲提供的工具
API 3.0 Explorer
直接來獲取這個BizToken
若是服務申請成功後控制檯通常能找到SecretIdSecretKeyRuleId
注意EndpointRegion選擇的地區得保持和申請時選擇的地區一致。
填寫完成後點擊在線調用中的發送請求按鈕,若是填的都對的話返回信息裏面會有BizToken
拿到BizToken後就能夠直接使用了,修改下上面的代碼:
xxxxxxxxxxxxxxxxx就是拿到的BizToken微信

this.BizToken = 'xxxxxxxxxxxxxxxxx' // 這裏須要咱們去客戶後端調用DetectAuth接口獲取BizToken

image.png

開發調試

上面都作完後就能夠進行調試了
須要先在項目中manifest.json中配置上小程序的appid,這個appid就是上面申請服務中的appid,否則沒法開啓調試。
image.png
而後運行到微信開發工具(這裏就很少說了),若是提示不是開發人員,就讓該appid的管理員將你加到開發組裏面就好了。
運行成功後點擊開發者工具的真機調試,掃描二維碼開啓真機調試模式。
接下來就是踩坑了,會出現各類問題。微信開發

踩坑及解決方法

Component is not found in path

這裏開發者工具裏面都是顯示正常的,不會報這個錯,
手機掃碼進入調試後控制檯會出現這個報錯,
提示組件找不到,可是咱們的路徑都是對的,
Component is not found in path "wxcomponents/verify_mpsdk/index/index"
image.png
問題出在這裏將verify_mpsdk當成自定義組件了,
小程序自定義組件引入的時候須要在文件JSON中指定"component": true
找到wxcomponents\verify_mpsdk\index\index.json文件,加入"component": true便可
從新開啓調試掃碼後上面的報錯就沒了。 
image.png

navigateTo:fail page

點擊按鈕調用gotoVerify後會報一個頁面找不到的錯
navigateTo:fail page "verify_mpsdk/index/index?isNotice=false" is not found
image.png
SDK默認的是跳轉驗證頁面的地址是verify_mpsdk/index/index
文檔找了半天也沒找到相應的配置地址,最後在SDK裏面搜索找到了這個地址。
因此只須要把這個地址改爲咱們所須要的地址就好了。
找到wxcomponents\verify_mpsdk\main.js,裏面搜索verify_mpsdk/index/index,
找到後修改爲上面人臉核身頁面的地址pages/face/face
保存後重試就能跳轉到人臉核身的頁面了。

無操做、無報錯大坑

進入人臉核身的頁面後會發現啥操做都沒,控制檯也沒報錯,
image.png
一度認爲我本身弄的有問題,搞了很久也沒弄好,也提了個工單(騰訊雲工單反饋率仍是很快的,幾分鐘後就有人回覆了,這點贊一個),
將代碼和相關操做在工單裏描述了下,對方也以爲的沒問題,按照快速入門的代碼應該是沒問題的,對方也沒找到啥問題,就讓我加了一個騰訊雲慧眼小助手的微信,
本想着下午加人家看看啥問題的,中午吃完飯閒着的時候將SDK裏面的文件都格式化後終於在index.js裏面找到問題所在了。
wxcomponents\verify_mpsdk\index\index.js文件中有個onLoad生命週期,
image.png
正常原生微信小程序進入到這個頁面的時候會執行onLoad裏面的代碼,
可是咱們上面將這個SDK看成是一個自定義組件了,
在uni-app中組件是不存在onLoad這個生命週期的,這個是頁面所屬的生命週期。
找到問題所在就好解決了,咱們能夠在人臉核身的頁面pages/face/face手動執行onLoad
修改下pages/face/face的代碼,以下:

<template>
  <view class="face">
    <verify-mpsdk ref="verifyMpsdk"></verify-mpsdk>
  </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        onLoad(i) {
            // 頁面onLoad的時候手動調用
            this.$refs.verifyMpsdk.onLoad(i)
        }
    }
</script>

保存後重試,就能正常顯示了
image.png

SDK圖片異常

點擊快速驗證進入下一步及後面的步驟的時候發現,頁面的圖片都掛掉了不顯示,
一開始我一直用的真機調試,頁面上也不會出現破圖,控制檯也不會報圖片異常的錯誤,
致使我不知道怎麼進行拍攝身份證,覺得會自動識別身份證而後自動下一步,
最後在開發者工具裏面跑了一遍才知道是圖片找不到了,而後拍照的圖片按鈕天然也就顯示不了了。
image.png
image.png
最後在SDK裏面搜索/verify_mpsdk/images,在下面文件中找到關鍵詞,
wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml
image.png
既然這種形式致使運行的時候圖片找不到,咱們能夠把SDK所用的圖片都複製到項目的static目錄裏
static中新建verify_mpsdk目錄,將SDK中的圖片即wxcomponents\verify_mpsdk\images
複製到static\verify_mpsdk中,最終造成如下目錄形式
image.png
最後將wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml中的/verify_mpsdk/images批量替換成
/static/verify_mpsdk/images後重試便可,而後就都正常了。
image.png
image.png

完整流程

最後用真機調試完整跑一把
image.png
image.png
image.png
image.png

備註:若是最上面的 wx.startFacialRecognitionVerify服務沒有申請到此時點擊下一步的會彈出一個無權限的彈窗沒法進行下一步

image.png
image.png

這裏就是活體人臉檢測了,須要將臉對準框框,點擊開始後須要讀幾個數字,

image.png

最後驗證經過後會回到以前的頁面(調用gotoVerify()方法的頁面),
驗證成功後,會拿到一個BizToken
能夠在wx.startVerify回調函數success中打印自行查看。
拿到BizToken後能夠調用後端的接口,後端經過調用 GetDetectInfo 接口獲取並返回本次核身的詳細信息,包括身份證上的信息和身份證證圖片等信息。
前端拿到這些信息後根據本身的程序須要作處理。

結語

整合過程當中遇到很多問題,百度加google也找不到相關的詳細信息,人臉核身的相關文檔都很簡單,出現問題後無從下手,只能慢慢本身摸索解決了,最後寫篇文章記錄下整個過程,也能幫到後面須要集成這個SDK的朋友們。

相關文章
相關標籤/搜索