为 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'
      }
    ]
  ]
}

部署 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。