PC或移动端H5网页SDK的接入流程_实人认证(ID Verification)-阿里云帮助中心

本文介绍PC或移动端H5网页SDK的接入流程。

移动端H5浏览器支持列表

浏览器名称	Android版本	iOS版本
Edge	Android 4.0及以上版本	iOS 14.3及以上版本
FireFox
Chrome
Opera
QQ
百度
Android Browser 5.0+
Safari	不支持	iOS 11及以上版本
UC	Android 4.0及以上版本	不支持
UC极速浏览器	Android 4.0及以上版本	不支持
厂商内置浏览器	小米、三星等部分机型支持

说明

受制于浏览器兼容性碎片化问题，建议您在流程设计上引导用户使用推荐的浏览器完成认证。若您在手机应用App内集成该方案，可能会因为内嵌浏览器原因无法兼容，您可以参考App内集成H5移动端SDK兼容性配置减少兼容性问题或集成Native SDK。若您是通过微信公众号或者小程序集成，由于微信运营审核规则的限制，可能出现无法避免的兼容性问题，建议您使用纯服务端（API）接入方式。

扫脸认证

为了提升用户刷脸认证体验，URL默认自带扫脸认证引导页，用户同意认证后可以开始使用扫脸认证服务。微信公众号场景下，扫脸认证引导页是必须存在的，否则会导致摄像头无法唤起，引发黑屏现象。

说明

扫脸认证当前不支持自定义主题色，如需设置主题色，建议您集成SDK或API，自行封装处理。

PC认证流程

启动刷脸

在代码中引入如下JS文件，并调用函数getMetaInfo()获取MetaInfo。
```
<script type="text/javascript" src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js" ></script>
```
说明
在调用实人认证服务端发起认证请求时需要传入获取的MetaInfo值。
调用您自己的业务接口或金融级实人认证服务端初始化接口，获取CertifyUrl，并在浏览器中加载该链接进行实人认证。服务端如何发起认证请求，请参见服务端集成。
说明
初始化接口返回的认证CertifyUrl在30分钟有效且仅能认证提交一次，请您在有效期内应用，避免重复使用。

代码示例

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
        <!--   引入该JS，全局注入getMetaInfo方法   -->
    <script type="text/javascript" src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js" ></script>
  </head>
  <body>
  <div></div>
    <script>
      // 在调用实人认证服务端发起认证请求时需要传入该MetaInfo值
      var MetaInfo = window.getMetaInfo();

      // 接下来您进行调用您自己的业务接口或调用实人认证服务端初始化接口获取CertifyUrl
        var CertifyUrl = ''; // 此处值应为调用实人认证服务端初始化接口返回的CertifyUrl

      // 接下来直接跳转CertifyUrl即可开始刷脸认证
      window.location.href = CertifyUrl;
    </script>
  </body>
</html>

结果解析

CertifyUrl中ReturnUrl参数为商户自定义参数，认证结果会在扫脸认证完成后拼接在ReturnUrl后作为参数返回给商户。由于您传入路由方式的可能不同，因此response解析结果会有差异。

路由模式	ReturnUrl示例	认证后打开的ReturnUrl示例
普通网页	https://aliyundoc.com	https://aliyundoc.com/？response=%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
普通网页	https://aliyundoc.com/index.html	https://aliyundoc.com/index.html?response=%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
history不带锚点	https://aliyundoc.com/xxx/	https://aliyundoc.com/xxx?response=%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
history带锚点	https://aliyundoc.com/xxx/#xxx	https://aliyundoc.com/xxx?response=%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#xxx
hash	https://aliyundoc.com/#/aaa/bbb	https://aliyundoc.com/?response=%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/#/aaa/bbb

说明

hash路由和history原理介绍，请参见浅谈前端路由原理hash和history。

解析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 = {
            //     code: '',
            //     subCode: '',
            //     reason: '',
            //     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 = {
            //     code: '',
            //     subCode: '',
            //     reason: '',
            //     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 = {
            //     code: '',
            //     subCode: '',
            //     reason: '',
            //     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 = {
            //     code: '',
            //     subCode: '',
            //     reason: '',
            //     extInfo: { certifyId: '' }
            // }
        </script>
    </body>
</html>

错误码说明

错误码	错误码文案	错误码描述
1000	刷脸成功	代表刷脸成功，该结果仅供参考，可通过调用服务端DescribeFaceVerify接口获取最终认证结果。
1001	系统错误	表示系统错误。
1003	验证中断	表示验证中断。
2002	网络错误	表示网络错误。
2003	客户端设备时间错误	表示客户端设备时间错误。
2006	刷脸失败	表示刷脸失败，如需获取更详细的失败原因，需调用服务端DescribeFaceVerify接口获取。

subCode说明

表 3. subCode说明
错误码	描述
Z5050	人脸验证成功。
Z5051	上传刷脸图片失败。
Z5052	数据错误或程序异常。
Z5053	网络错误。
Z5054	摄像头无权限或无法获取摄像头数据。
Z5055	用户退出。
Z5056	重试次数过多。
Z5057	视频上传超时。
Z5058	视频格式不满足要求。
Z5059	视频中无有效人脸。
Z5128	验证不是同一个人。