ZOLOZZOLOZDOCS

Customize the Selfie Guidance Page in Client-Mode RealId

#Background

There's a selfie guidance page in RealId flow, the customer might have to customize this page. In this document, we'll demonstrate how to achieve this goal.


#Overview

Here lists basic steps required to customize the web page inside RealId.

Customize the Selfie Guidance Page in Client-Mode RealId


#Steps

#1. Develop the Web Page


#1.1 Get ZolozRealIdCore library

Download the js file from here. Then put the file to your project.

#1.2 Import ZolozRealIdCore

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

#1.3 Configure language pack

langPack is used to customize the copywriting in popover alert and it is optional. We have 9 keys totally, they are representative the system error alert, network error alert and retry max alert. The default copywriting is as followed:

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.4 End the page

When the page should be ended, for example: go to next page or go back, we should call this methods to end the page. 

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

The type and params are defined by the server side.

Type: 'next' | 'back' | 'error' | 'fail' | 'skip' | 'cancel'; Usually we only need 'next' and 'back';

sample for 'next':

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

sample for 'back':

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.5 Configure logging

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

This is used for remote log. It should be agreement with the BI.


#1.6 Sample code:

Sample project:

📎h5-demo.zip


The code in 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>


#Note

  1. If met the problem exports is not defined or *is not a constructor, that is because ZolozRealIdCore is a commonjs module, please change the babel.config.js:
copy
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        modules:'commonjs'
      }
    ]
  ]
}


#2. Deploy the Web Page

The customer could deploy the web page anywhere, just make sure that it is accessible from the public network.


#3. Set the Web Page

When initialize RealId (at server-side), pass the url as a parameter, please note that the url MUST be https:

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


Refer to RealId API for more information.