iframe_内嵌接入 - ID Verification

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	否	错误次数超出上限。