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.