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.