1. 程式人生 > >H5 -- (功能)App內嵌h5網頁實現芝麻認證的接入

H5 -- (功能)App內嵌h5網頁實現芝麻認證的接入

1、需求:由於高貴的IOS提審時不能出現支付寶相關字眼及相關SDK,所以我們app芝麻認證只有通過內嵌H5頁面實現
2、分析:通過調研 “芝麻認證”官方技術文件 ,接入芝麻認證的流程如下圖(圖片來自官方文件):

芝麻認證流程 要想完成這個功能,需要業務辦理人員、後臺api人員及前端h5人員共同的合作,每一環都很重要。在此僅大部分從前端角度出發,如何根據以上流程圖一步步完成這個需求。。

3、過程
接入前準備工作

準備工作不包括在以上的流程圖中,但卻是所有業務的基礎:要在自己的app中使用支付寶開放產品的介面能力,需要業務辦理人員先去螞蟻金服開放平臺,在管理中心中建立登記你的app,並提交稽核,稽核通過後會為您生成應用唯一標識(APPID),並且可以申請開通開放產品使用許可權,通過APPID你的app才能呼叫開放產品的介面能力。(需要詳細瞭解開放平臺建立應用步驟請參考

《開放平臺應用建立指南》

第一步:前端調取後臺芝麻認證api

① 前端h5頁面引導使用者輸入真實姓名及身份證號碼,調取後臺芝麻認證api 在這裡插入圖片描述 ② 後臺調取SDK芝麻認證初始化介面zhima.customer.certification.initialize,生成biz_no(本次認證唯一標識) 重點1:初始化時的認證場景碼(biz_code)一定不要傳 “FACE_SDK”(這個只能是native呼叫,如果h5呼叫跳轉認證請求URL後會報‘出錯了’),我專案傳的是 “FACE認證場景碼 ③後臺調取SDK芝麻認證開始認證介面zhima.customer.certification.certify,生成認證請求連結url 重點2:生成認證請求 URL時必須要傳回調地址 return_url,回撥支援在支付寶 App 開啟(示例:alipays://www.taobao.com )、在瀏覽器開啟(示例:

https://www.taobao.com )、在商戶 App 開啟(使用商戶 scheme 協議) 我專案使用的是商戶App開啟,定義scheme,讓使用者跳轉支付寶認證完成後可以跳回app,使用者體驗更好~

第二步:前端拿到後臺返回的biz_no及認證請求連結url

① 前端h5頁面將後臺返回的biz_no及使用者輸入的姓名和身份證號存入localStorage,以便後續的查詢操作

localStorage.setItem('name', self.name)
localStorage.setItem('certNo', self.idCard)
localStorage.setItem('bizNo', res.data.data.bizNo)

② 跳轉後臺返回的認證請求連結url ,進入芝麻認證引導頁 在這裡插入圖片描述 ② 勾選我已閱讀並同意認證服務協議,點選開始認證按鈕,喚起支付寶客戶端進行刷臉認證 支付寶客戶端進行刷臉認證

第三步:跳轉支付寶客戶端進行刷臉認證(必須安裝支付寶且處於登入狀態)

①不管認證成功還是失敗,均會跳轉到後臺配置的回撥地址 return_url,重新跳轉回app內,客戶端重新開啟認證h5頁面,並在地址上掛上已經跳轉到支付寶認證完畢的標記,例如:?sign=1 在這裡插入圖片描述 ② h5頁面識別地址上的標記(包含sign),將localStorage中儲存的biz_no及使用者的姓名和身份證號當成引數傳給後臺,後臺調取SDK芝麻認證認證查詢介面zhima.customer.certification.query,並將認證結果返給前端h5,展示給使用者,認證到此結束。 認證結束