Customize the selfie guidance page for Real ID

    #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 for Real ID


    #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:


    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.