Customize the selfie guidance page for Real ID
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.
Note: This article is to customise the selfie guidance page for the native users. For the websdk self guidance page customisation, please refer to Development -> Mobile web(H5) -mode integration -> H5 integration -> customise the face guide url.
Here lists basic steps required to customize the web page inside RealId.
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
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:
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.
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':
sample for 'back':
1.5 Configure logging
This is used for remote log. It should be agreement with the BI.
1.6 Sample code:
The code in App.vue:
- 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:
- Since this customized page is hosted in iframe, it is very likely to encounter CORS issue or privilege issue if the customer tries to implement some complex function in this page. A pure STATIC page is much more recommended.
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:
4. Use the Default Selfie Guidance Page (Optional)
When initialize RealId (at server-side), customer can also use the default web page which support three languages, English(en), simplified Chinese (zh-CN) and traditional Chinese (zh-HK) by passing the url into pageConfig.
Refer to RealId API for more information.