通過 iframe 在移動 H5 頁面嵌入安全 eKYC - 身分識別驗證

ID Verification提供Web SDK，協助您在瀏覽器或內嵌webview中實現eKYC遠程身分識別驗證功能。本文介紹移動端H5網頁通過iframe接入ID Verification的流程。

前提條件

支援的最低作業系統版本：Android 5+、iOS 11+。
支援的瀏覽器：
- iOS：Safari。從iOS 14.3開始支援Chrome、Firefox、Microsoft Edge和WKWebView。
- 安卓：推薦Chrome60+、Firefox58+。對於Android中的其他瀏覽器，行為可能因裝置而異。
要求的權限：網路和網路攝影機，媒體採集需要HTTPS部署。
採用豎屏模式：手機橫屏狀態可能會引發頁面互動的不適配，建議引導使用者參考頁面提示調整豎屏模式認證。
相容性：受制於瀏覽器安全色性片段化問題，建議您在流程設計上引導使用者使用推薦的瀏覽器完成認證。
若您在手機應用App內整合該方案，可能會因為內嵌瀏覽器原因無法相容，您可以參考App內整合H5移動端SDK相容性配置減少相容性問題或整合Native SDK。

重要

整合過程中，不要對TransactionUrl做任何操作或修改，否則會報錯。
為保障認證安全有效，認證URL僅能使用一次，URL的重複使用也會報錯。

啟動認證

在代碼中引入如下JS檔案，並調用getMetaInfo函數擷取MetaInfo。
```

<script type="text/javascript" src="https://hkwebcdn.yuncloudauth.com/cdn/verify.js" ></script>
```
說明
在調用ID Verification服務端發起認證請求時，需傳入擷取的MetaInfo值。
調用您自己的商務服務端介面初始化，擷取 TransactionUrl，並在瀏覽器中載入該連結進行認證。

執行 startVerify 啟動認證邏輯。

// TransactionUrl 和 Protocol 通過初始化介面擷取
window.startVerify({ CertifyUrl: TransactionUrl, Protocol: Protocol });

完整程式碼範例

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <!-- 引入該JS，全域注入startVerify和getMetaInfo方法 -->
        <script type="text/javascript" src="https://hkwebcdn.yuncloudauth.com/cdn/verify.js"></script>
    </head>
    <body>
        <div></div>
        <script>
    // 在調用ID Verification服務端發起認證請求時需要傳入該MetaInfo值
    let MetaInfo = window.getMetaInfo();

    // 請求認證業務介面擷取TransactionUrl
    fetch('http://<認證初始化介面地址>', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(MetaInfo)
    })
      .then(response => response.json())
      .then(data => {
        console.log('data:', data)
        // 擷取TransactionUrl發起認證
        window.startVerify({CertifyUrl: data.TransactionUrl, Protocol: data.Protocol}).then((res)=>{
        /* startVerify是個 Promise 函數，可以通過 await  或者 then 擷取認證結果。
            認證結束，根據res判斷認證結果
            res的資料結構
            { 
                resultCode, // 結果碼 
                extInfo, // 擴充資訊
            }
        */
          console.log('認證結果', res);
        })
      });
    </script>
    </body>
</html>

用戶端自訂配置

ID Verification WebSDK 整合方式，支援通過在 TransactionUrl 中傳入參數實現端側自訂功能。

您可以將參數通過&拼接在 TransactionUrl 後，以使配置生效，樣本如下：

TransactionUrl：

https://xxxx.com?clientcfg=xxx&callbackurl=xxx&paramSign=xxx&guideFlow=ekyc

拼接 initTimeout：

https://xxxx.com?clientcfg=xxx&callbackurl=xxx&paramSign=xxx&guideFlow=ekyc&initTimeout=30

支援的功能如下表：

參數名稱	類型	是否必選	描述	樣本值
initTimeout	String	否	用戶端驗證初始化逾時時間（從頁面 loading 到進入人臉/OCR頁面的時間），單位為秒。	30
clientLivenessTimeout	String	否	人臉活體檢測單次逾時時間，單位為秒。	30
clientLivenessRetryCount	String	否	人臉活體檢測重試次數，單位次。	5
ocrTimeout	String	否	OCR單次檢測逾時時間，單位秒。	20
ocrRetryCount	String	否	OCR重試次數，單位次。	10
region	String	否	移動端阿里雲介面請求地區上車點，其中 region 值和地區對應關係如下： `{ "HK": "香港", "US": "美東", "US-CA": "美西", "SG": "新加坡", "MY": "馬來西亞", "ID": "印尼", "PH": "菲律賓", "DE": "德國", "SA": "沙特" }` 說明傳入此參數可指定調用阿里雲介面的服務地區。如不指定，預設就近訪問。	HK

用戶端結果碼說明

結果碼	是否計費	結果碼描述
1000	是	使用者完成了刷臉過程，認證建議結果為通過。該結果僅供參考，可通過調用服務端CheckResult介面擷取最終認證結果，進行下一步處理。
1001	是	使用者完成了刷臉過程，認證建議結果為未通過。該結果僅供參考，可通過調用服務端CheckResult介面擷取最終認證結果，進行下一步處理。
1002	否	系統錯誤。
1003	否	SDK初始化失敗，請確認用戶端時間是否正確。
1004	否	相機許可權錯誤。請參考以下步驟嘗試解決：在認證前請先確保App已擷取到相機許可權。如已授權仍提示無許可權，請嘗試清除App緩衝後重試。
1005	否	網路錯誤。
1006	否	使用者退出。
1007	否	TransactionId無效.
1009	否	用戶端時間戳記錯誤。
1011	否	提交證件類型錯誤。
1012	否	識別出的證件關鍵資訊缺失或格式校正失敗。
1013	否	圖片品質不佳。
1014	否	錯誤次數超出上限。