文档

PC或移动端H5网页SDK集成

更新时间:

本文介绍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极速浏览器

厂商内置浏览器

小米、三星等部分机型支持

说明

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

扫脸认证

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

说明

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

PC认证流程

启动刷脸

  1. 在代码中引入如下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值。

  2. 调用您自己的业务接口或金融级实人认证服务端初始化接口,获取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>
            

结果解析

CertifyUrlReturnUrl参数为商户自定义参数,认证结果会在扫脸认证完成后拼接在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>

路由模式

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

错误码

错误码

是否计费

错误码文案

错误码描述

1000

刷脸成功

用户完成了刷脸过程,认证建议结果为通过。该结果仅供参考,可通过调用服务端DescribeFaceVerify接口获取最终认证结果。

1001

系统错误

表示系统错误。

1003

验证中断

表示验证中断。

2002

网络错误

表示网络错误。

2003

客户端设备时间错误

表示客户端设备时间错误。

2006

刷脸失败

用户完成了刷脸过程,认证建议结果为未通过。该结果仅供参考,可通过调用服务端DescribeFaceVerify接口获取最终认证结果、未通过的详细原因。

表 3. subCode说明

错误码

描述

Z5050

人脸验证成功。

Z5051

上传刷脸图片失败。

Z5052

数据错误或程序异常。

Z5053

网络错误。

Z5054

摄像头无权限或无法获取摄像头数据。

Z5055

用户退出。

Z5056

重试次数过多。

Z5057

视频上传超时。

Z5058

视频格式不满足要求。

Z5059

视频中无有效人脸。

Z5128

验证不是同一个人。