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,展示給用戶,認證到此結束。

认è¯ç»æ

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章