ZOLOZZOLOZDOCS

为RealID定制人脸自拍引导页

RealID流程中有一个人脸自拍引导页面，客户可以根据需要自定义该页面。本文介绍为原生用户定制人脸自拍引导页，如果您想为Web SDK定制人脸自拍引导页，请参见定制人脸自拍引导页。

流程介绍

下图列出了在RealID中自定义网页的基本流程。

image.png

步骤一：开发H5网页

说明：

  • 如果遇到exports is not defined或者*is not a constructor问题，是因为ZolozRealIdCore是commonjs模块，请修改babel.config.js。
copy
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        modules:'commonjs'
      }
    ]
  ]
}
  • 由于定制引导页由iframe元素加载，如果希望在页面中实现复杂的功能，可能会遇到跨域、权限等问题，建议您使用纯静态页面。

操作步骤

  1. 获取ZolozRealIdCore库。
    单击下载JS文件并将文件添加到您的项目中。
  2. 导入ZolozRealIdCore库。
copy
import ZolozRealIdCore from './zoloz-realid-core';
const zolozRealIDCore = new ZolozRealIDCore(langPack);
  1. 配置语言包（可选）。
    langPack即语言包，用于自定义弹窗提醒中的文案，共包含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'
};
  1. 结束页面。
    当页面应该结束时，例如跳转到下一页或返回，此时可以调用以下方法结束页面。
copy
let response = await zolozRealIDCore.end(type,params);
//await zolozRealIDCore.end('next');

类型和参数由服务器端定义。类型包括下一个、返回、错误、失败、跳过、取消，通常结束页面只需要配置下一个和返回。

“下一个”示例：

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);
  1. 配置日志。
    以下代码用于远程日志，应该与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>

步骤二：部署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。