本文中含有需要您注意的重要提示信息,忽略该信息可能对您的业务造成影响,请务必仔细阅读。
本文介绍H5网页端集成流程。
集成须知
认证触发页面(启动刷脸)
在代码中引入如下JS文件,并调用函数
getMetaInfo()
获取MetaInfo。<script type="text/javascript" src="https://o.alicdn.com/yd-cloudauth/cloudauth-cdn/jsvm_all.js" ></script>
警告在调用实人认证服务端发起认证请求时需要传入获取的MetaInfo值。
MetaInfo会随着浏览器和设备的变化而变化,即使是在测试时也要实时传入服务端接口,不要使用硬编码的测试数据,否则很可能无法获取CertifyUrl。
调用前面已经集成好的金融级实人认证服务端初始化接口,获取CertifyUrl,并在浏览器中加载该链接进行实人认证。服务端如何发起认证请求,请参见服务端集成。
重要初始化接口返回的认证CertifyUrl在30分钟有效且仅能认证提交一次,请您在有效期内使用,避免重复使用。
结果显示页面(结果解析)
CertifyUrl中ReturnUrl参数为商户自定义参数,认证结果会在扫脸认证完成后拼接在ReturnUrl后作为参数返回给商户。由于您传入路由方式的可能不同,因此response解析结果会有差异。
代码示例
认证结束后,页面会跳转至调用InitFaceVerify接口
时传入的ReturnUrl
(结果显示页面)并携带认证结果数据。
如果需要二次验证来预防盗链和篡改的风险,可以在解析结果后向服务端发起获取最终验证结果的请求,参见DescribeFaceVerify-获取认证详细数据。
下面的代码简要展示了不同路由形式的结果显示页面解析认证结果数据的过程。
普通网页
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<script>
// 此时的window.location.href就是ReturnUrl了。
// 格式为:https://aliyundoc.com 或 https://aliyundoc.com/index.html
let url = new URL(window.location.href);
// 获取返回的认证结果数据。
let parms = url.searchParams.get('response')
console.log('parms:', parms)
// 如果需要二次验证实人认证结果可参考下面代码。
// 获取CertifyId 为了避免盗链和篡改风险,请自行管理此ID和真实认证人的关系。
var certifyId = JSON.parse(parms).extInfo.certifyId
function describe() {
// 携带CertifyId
fetch('http://获取认证详细数据接口地址', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: certifyId
})
.then(response => {
console.log('res', response)
return response.json()
})
.then(data => {
console.log('data', data)
document.getElementById('detail').innerHTML = JSON.stringify(data)
})
}
</script>
</body>
</html>
history路由不带页面锚点(#)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<script>
// 此时的window.location.href就是ReturnUrl了。 不带锚点格式为:https://aliyundoc.com/xxx
let url = new URL(window.location.href);
// 获取返回的认证结果数据
let parms = url.searchParams.get('response')
console.log('parms:', parms)
// 如果需要二次验证实人认证结果可参考下面代码。
// 获取CertifyId 为了避免盗链和篡改风险,请自行管理此ID和真实认证人的关系。
var certifyId = JSON.parse(parms).extInfo.certifyId
function describe() {
// 携带CertifyId
fetch('http://获取认证详细数据接口地址', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: certifyId
})
.then(response => {
console.log('res', response)
return response.json()
})
.then(data => {
console.log('data', data)
document.getElementById('detail').innerHTML = JSON.stringify(data)
})
}
</script>
</body>
</html>
history路由带页面锚点(#)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<script>
// 此时的window.location.href就是ReturnUrl了。 带锚点格式为:https://aliyundoc.com/xxx/#xxx
let url = new URL(window.location.href);
// 获取返回的认证结果数据
let parms = JSON.parse(
decodeURIComponent(url.searchParams.get('response'))
);
console.log('parms:', parms)
// 如果需要二次验证实人认证结果可参考下面代码。
// 获取CertifyId 为了避免盗链和篡改风险,请自行管理此ID和真实认证人的关系。
var certifyId = JSON.parse(parms).extInfo.certifyId
function describe() {
// 携带CertifyId
fetch('http://获取认证详细数据接口地址', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: certifyId
})
.then(response => {
console.log('res', response)
return response.json()
})
.then(data => {
console.log('data', data)
document.getElementById('detail').innerHTML = JSON.stringify(data)
})
}
</script>
</body>
</html>
hash路由
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<script>
// 此时的window.location.href就是ReturnUrl了。 hash格式为:https://aliyundoc.com/#/aaa/bbb
let url = new URL(window.location.href);
// 获取返回的认证结果数据
let parms = JSON.parse(
decodeURIComponent(url.searchParams.get('response'))
);
console.log('parms:', parms)
// 如果需要二次验证实人认证结果可参考下面代码。
// 获取CertifyId 为了避免盗链和篡改风险,请自行管理此ID和真实认证人的关系。
var certifyId = JSON.parse(parms).extInfo.certifyId
function describe() {
// 携带CertifyId
fetch('http://获取认证详细数据接口地址', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: certifyId
})
.then(response => {
console.log('res', response)
return response.json()
})
.then(data => {
console.log('data', data)
document.getElementById('detail').innerHTML = JSON.stringify(data)
})
}
</script>
</body>
</html>
ReturnUrl携带的错误码说明
code说明
错误码 | 是否计费 | 错误码文案 | 错误码描述 |
1000 | 是 | 刷脸成功 | 用户完成了刷脸过程,认证建议结果为通过。该结果仅供参考,可通过调用服务端DescribeFaceVerify接口获取最终认证结果。 |
1001 | 否 | 系统错误 | 表示系统错误。 |
1003 | 否 | 验证中断 | 表示验证中断。 |
2002 | 否 | 网络错误 | 表示网络错误。 |
2003 | 否 | 客户端设备时间错误 | 表示客户端设备时间错误。 |
2006 | 是 | 刷脸失败 | 用户完成了刷脸过程,认证建议结果为未通过。该结果仅供参考,可通过调用服务端DescribeFaceVerify接口获取最终认证结果、未通过的详细原因。 |
subCode说明
错误码 | 描述 |
Z5050 | 人脸验证成功。 |
Z5051 | 上传刷脸图片失败。 |
Z5052 | 数据错误或程序异常。 |
Z5053 | 网络错误。 |
Z5054 | 摄像头无权限或无法获取摄像头数据。 |
Z5055 | 用户退出。 |
Z5056 | 重试次数过多。 |
Z5057 | 视频上传超时。 |
Z5058 | 视频格式不满足要求。 |
Z5059 | 视频中无有效人脸。 |
Z5128 | 验证不是同一个人。 |