RealID流程中有一个人脸自拍引导页面，客户可以根据需要自定义该页面。本文介绍为原生用户定制人脸自拍引导页，如果您想为Web SDK定制人脸自拍引导页，请参见定制人脸自拍引导页。
流程介绍
下图列出了在RealID中自定义网页的基本流程。
步骤一：开发H5网页
说明：
如果遇到exports is not defined或者*is not a constructor问题，是因为ZolozRealIdCore是commonjs模块，请修改babel.config.js。
module.exports = {
presets: [
[
'@vue/app',
{
modules:'commonjs' }
]
]
}由于定制引导页由iframe元素加载，如果希望在页面中实现复杂的功能，可能会遇到跨域、权限等问题，建议您使用纯静态页面。
操作步骤
获取ZolozRealIdCore库。
单击下载JS文件并将文件添加到您的项目中。
导入ZolozRealIdCore库。
import ZolozRealIdCore from './zoloz-realid-core';
const zolozRealIDCore = new ZolozRealIDCore(langPack);配置语言包（可选）。
langPack即语言包，用于自定义弹窗提醒中的文案，共包含9个错误告警，分为系统错误告警、网络错误告警和重试次数告警三大类。默认文案如下：
//default valueconst 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'};结束页面。
当页面应该结束时，例如跳转到下一页或返回，此时可以调用以下方法结束页面。
let response = await zolozRealIDCore.end(type,params);
//await zolozRealIDCore.end('next');类型和参数由服务器端定义。类型包括下一个、返回、错误、失败、跳过、取消，通常结束页面只需要配置下一个和返回。
“下一个”示例：
const buttonClick = () => {
// if params needed, please add it const params = {};
core.end('next',params);
}“返回”示例：
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保持一致。
import {ekycLog} from './zoloz-realid-core';
ekycLog(seed,message);
//ekycLog('clickBack',{'onPage':'infoFill'});代码示例
下面是一个示例项目，App.vue中的代码如下所示。
<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>适配Android 15 Edge-to-Edge功能
为适配Android 15的Edge-to-Edge功能，您需要在JS代码中添加以下querySystemWindowInsets()函数定义（该JS API仅适用于Android设备）。
export function querySystemWindowInsets(){
return new Promise((resolve)=>{
ready(()=>{
AlipayJSBridge.call('querySystemWindowInsets',{},(response)=>resolve(response));
});
});
}在页面初始化阶段调用querySystemWindowInsets()，查询当前设备的insets，返回示例如下：
{
"top": 128,
"bottom": 360,
"left": 0,
"right": 0}参数说明：
top：屏幕顶部inset尺寸（即状态栏高度）
bottom：屏幕底部inset尺寸（即导航栏高度）
left：屏幕左侧inset尺寸
right：屏幕右侧inset尺寸
步骤二：部署H5网页
客户可以将网页部署在任何地方，确保可以通过公网访问即可。
步骤三：设置H5网页
在服务器端初始化RealID时，将URL作为参数进行传递，URL必须以https开头。
{
"bizId": "...",
"userId": "...",
"docType": "...",
"pageConfig":{"urlFaceGuide":"https://url-to-the-customized-web-page.html"},
"metaInfo": "..."}使用默认的自拍引导页（可选）
在服务器端初始化RealID时，客户可以在pageConfig参数中传入URL以启用默认的人脸自拍引导页。该引导页支持多语言显示，包括英语（en）、简体中文（zh-CN）和繁体中文（zh-HK）。
以下是示例代码：
{
"bizId": "...",
"userId": "...",
"docType": "...",
"pageConfig":{"urlFaceGuide":"https://sg-production-cdn.zoloz.com/page/realid-lite-fe/faceGuide.html?locale=en"},
"metaInfo": "..."}各站点对应的人脸自拍引导页URL如下：