ZOLOZZOLOZDOCS

      Customize the Web Page in Web-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 Web Page in Web-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.