eKYC_跳轉頁面接入 - ID Verification

ID Verification提供Web SDK，協助您在瀏覽器或內嵌webview中實現eKYC遠程身分識別驗證功能。本文介紹通過PC或移動端H5網頁接入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的重複使用也會報錯。

啟動eKYC

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

<script type="text/javascript" src="https://hkwebcdn.yuncloudauth.com/cdn/jsvm_all.js" ></script>

說明

在調用ID Verification服務端發起認證請求時，需傳入擷取的MetaInfo值。

調用您自己的商務服務端介面初始化，擷取 TransactionUrl，並在瀏覽器中載入該連結進行認證。

程式碼範例

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Title</title>
        <!--   引入該JS，全域注入getMetaInfo方法   -->
        <!--   Introduce this JS, inject the getMetaInfo method globally   -->
    <script type="text/javascript" src="https://hkwebcdn.yuncloudauth.com/cdn/jsvm_all.js" ></script>
  </head>
  <body>
  <div></div>
    <script>
      // 在調用服務端初始化請求時需要傳入該MetaInfo值
      var MetaInfo = window.getMetaInfo();

      // 接下來您進行調用服務端初始化請求擷取TransactionUrl
      var TransactionUrl = ''; // 此處值應為調用服務端初始化介面返回的TransactionUrl

      // 接下來直接跳轉TransactionUrl即可開始服務
      window.location.href = TransactionUrl;
    </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
isPcOcrCameraCaptureSupported	String	否	是否開啟OCR網路攝影機採集，取值範圍： 0：不開啟(預設) 1：開啟說明該參數適用於PC整合情境。	0
region	String	否	移動端阿里雲介面請求地區上車點，其中 region 值和地區對應關係如下： `{ "HK": "香港", "US": "美東", "US-CA": "美西", "SG": "新加坡", "MY": "馬來西亞", "ID": "印尼", "PH": "菲律賓", "DE": "德國", "SA": "沙特" }` 說明傳入此參數可指定調用阿里雲介面的服務地區。如不指定，預設就近訪問。	HK

結果解析

在服務端初始化請求中傳入ReturnUrl參數為商戶自訂參數，認證結果會在認證完成後拼接在ReturnUrl後作為參數返回給商戶。由於傳入路由模式的不同，response解析結果會有差異。

路由模式	ReturnUrl樣本	認證後開啟的ReturnUrl樣本
普通網頁	https://aliyundoc.com	https://aliyundoc.com/？response=%7B%22resultCode%22%3A%22%22%2C%22resultMessage%22%3A%22%22%2C%22ocrResult%22%3A%7B%22code%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%2C%22faceResult%22%3A%7B%22code%22%3A%22%22%2C%22subCode%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%7D
普通網頁	https://aliyundoc.com/index.html	https://aliyundoc.com/index.html?response=%7B%22resultCode%22%3A%22%22%2C%22resultMessage%22%3A%22%22%2C%22ocrResult%22%3A%7B%22code%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%2C%22faceResult%22%3A%7B%22code%22%3A%22%22%2C%22subCode%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%7D
history路由不帶頁面錨點（#）	https://aliyundoc.com/xxx/	https://aliyundoc.com/xxx?response=%7B%22resultCode%22%3A%22%22%2C%22resultMessage%22%3A%22%22%2C%22ocrResult%22%3A%7B%22code%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%2C%22faceResult%22%3A%7B%22code%22%3A%22%22%2C%22subCode%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%7D
history路由帶頁面錨點（#）	https://aliyundoc.com/xxx/#xxx	https://aliyundoc.com/xxx?response=%257B%2522resultCode%2522%253A%2522%2522%252C%2522resultMessage%2522%253A%2522%2522%252C%2522ocrResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%252C%2522faceResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522subCode%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%257D#xxx
hash路由	https://aliyundoc.com/#/aaa/bbb	https://aliyundoc.com/?response=%257B%2522resultCode%2522%253A%2522%2522%252C%2522resultMessage%2522%253A%2522%2522%252C%2522ocrResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%252C%2522faceResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522subCode%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%257D/#/aaa/bbb

解析response程式碼範例

普通網頁

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            // 假設window.location.href為：
            // window.location.href = https://aliyundoc.com
            // 或
            // window.location.href = https://aliyundoc.com/index.html

            // 初始化url對象
            var url = new URL(window.location.href);
            // 解析response
            var response = JSON.parse(url.searchParams.get('response'));
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

history路由不帶頁面錨點（#）

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            // 假設window.location.href為：
            // window.location.href = https://aliyundoc.com/xxx

            // 初始化url對象 
            var url = new URL(window.location.href);
            // 解析response
            var response = JSON.parse(url.searchParams.get('response'));
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

history路由帶頁面錨點（#）

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            // 假設window.location.href為：
            // window.location.href = https://aliyundoc.com/xxx/#xxx

            // 初始化url對象
            var url = new URL(window.location.href);
            // 解析response
            var response = JSON.parse(
                decodeURIComponent(url.searchParams.get('response'))
            );
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

hash路由

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            // 假設window.location.href為：
            // window.location.href = https://aliyundoc.com/#/aaa/bbb

            // 初始化url對象
            var url = new URL(window.location.href);
            // 解析response
            var response = JSON.parse(
                decodeURIComponent(url.searchParams.get('response'))
            );
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

用戶端結果碼說明

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