ZOLOZZOLOZDOCS

为 Real ID 定制自拍导航页面

背景

RealId 流程中有一个自拍导航页面，客户可能需要定制此页面。在本文档中，我们将演示如何为 Real ID 定制自拍导航页面。

说明：本文为原生用户定制自拍导航页面。 如果您要为 websdk 定制自拍导航页面，请参考 H5 集成文档中定制人脸识别指引 URL。

概述

这里列出了在 RealId 中自定义网页所需的基本步骤。

image.png

操作步骤

开发 H5 网页

获取 ZolozRealIdCore 库

下载 js 文件，然后把文件添加到你的项目中。

导入 ZolozRealIdCore

copy
import ZolozRealIdCore from './zoloz-realid-core';
const zolozRealIDCore = new ZolozRealIDCore(langPack);

配置语言包（可选）

langPack 用于自定义 popover alert 中的文案，共有 9 个错误告警，它们分别代表系统错误告警、网络错误告警和重试次数告警。默认文案如下：

copy
//default value
const langPack = {      
    system_error_title:"System Error",
    system_error_msg: 'Please try again later',
    system_error_got_it: 'Got it',
    network_error_title: 'No Internet Connection',
    network_error_msg: 'Please check your internet connection and try again',
    network_error_got_it: 'Got it',
    fe_retry_max_title: '',
    fe_retry_max_msg:'Sorry, you have too many failed identification attempts. Please try again later.',
    fe_retry_max_got_it:'Got it'
};

结束页面

当页面应该结束时，例如：转到下一页或返回，我们应该调用这个方法来结束页面。

copy
let response = await zolozRealIDCore.end(type,params);
//await zolozRealIDCore.end('next');

类型和参数由服务器端定义。

类型：'下一个' | '返回' | '错误' | '失败' | '跳过' | '取消';通常我们只需要'next'和'back'；

“下一个”示例：

copy
const buttonClick = () => {
  // if params needed, please add it
  const params = {};
    core.end('next',params);
}

“返回”示例：

copy
document.addEventListener('back', e => {
  // please prevent the default back event and let the core to controll the flow.
  e.preventDefault();
  core.end('back');
}, false);

配置日志

用于远程日志，并且应该与 BI 保持一致。

copy
import {ekycLog} from './zoloz-realid-core';
ekycLog(seed,message);
//ekycLog('clickBack',{'onPage':'infoFill'});

代码示例

示例项目：

App.vue 中的代码：

copy
<template>
    <div id="app">
        <div @click='takeSelfie'>
            Next Page
        </div>
    </div>
</template>

<script>
    import ZolozRealIdCore, {ekycLog} from '@/utils/zolozRealIdCore';

    export default {
        name: 'app',
        data() {
            return {
                enableNext: true,
                zolozRealIdCore: new ZolozRealIdCore({}),
            };
        },
        mounted() {
            ekycLog('faceGuidePageAppear', {});
            document.addEventListener('back', e => {
              e.preventDefault();
              ekycLog('clickButton', {
                'onPage': 'face_guide',
                'clickItem': 'back'
              });
              this.zolozRealIdCore.end('back');
            }, false);
        },
        methods: {
            async takeSelfie() {
              // protect code
              if(this.enableNext) {
                ekycLog('faceGuidePageProceed');
                this.enableNext = false;
                await this.zolozRealIdCore.end('next');
                this.enableNext = true;
              }
            }
        }
    }
</script>

<style>
</style>

备注

  • 如果遇到问题 exports is not defined 或者 *不是构造函数，那是因为 ZolozRealIdCore 是 commonjs 模块，请修改 babel.config.js：
copy
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        modules:'commonjs'
      }
    ]
  ]
}
  • 由于定制引导由iframe元素加载，所以如果页面中实现复杂的功能，有可能会遇到跨域、权限等问题。强烈建议使用简单的静态页面作为定制引导页。

部署 H5 网页

客户可以将网页部署在任何地方，只要能够从公共网络访问即可。

设置 H5 网页

初始化 RealId 时（在服务器端），将 url 作为参数传递，请注意 url 必须是 https：

copy
{
    "bizId": "...",
    "userId": "...",
    "docType": "...",
    "pageConfig":{"urlFaceGuide":"https://url-to-the-customized-web-page.html"},
    "metaInfo": "..."
}

使用默认自拍指导页面（可选）

在初始化RealId（在服务器端）时，客户也可以通过将 url 传递给 pageConfig 来使用支持英文（en）、简体中文（zh-CN）和繁体中文（zh-HK）三种语言的默认网页。

copy
{
    "bizId": "...",
    "userId": "...",
    "docType": "...",
    "pageConfig":{"urlFaceGuide":"https://sg-production-cdn.zoloz.com/page/realid-lite-fe/faceGuide.html?locale=en"},
    "metaInfo": "..."
}

更多信息，请参阅 RealId API。