SONIC WIDGET

Installation:

Sonic Widget - used to show the onboard kyc at your web page itself.

Use this script tag to get access to the widget:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

or

in Angular can be used by installing package from npm

npm install sonic-widget

and adding path in angular.json

"scripts": [ "node_modules/sonic-widget/dist/index.js" ]

Implementation Details for Angular TypeScript:

Steps:-

1. Create or open an angular TS project.

2. Use this script tag to get access to the widget at initial html page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

or

it can be added in angular.json by installing the npm package

"scripts": [ "node_modules/sonic-widget/dist/index.js" ]

3. At app.component.html, Add a button with the id xxxx. It is used to call the widget by on click event.

<button id="xxxx">Open</button>

4. Add a div tag with the id sonic-web-widget at the specific place. It is used to display the sonic module with the help of this id.

<div id="sonic-web-widget"></div>

5. Add a declaration for var sonic at TS file app.component.ts.

declare var sonic: any;

6. Next, add the functionality to call widget in the base of onInit.

ngOnInit(): void {
	
	const config = {
		baseurl: string, // the base url of the backend server
		docModelPath: string, // the doc model url of the document recognition process 
		maskModelPath: string, // the mask model url of the mask detect process
		faceModelUrl: string, // the face model url of the face recognition process
      	handModelUrl: string, // the hand model url of the hand recognition process
      	objectModelUrl: string, // the object model url of the object recognition process
		ipInfoKey: string, // the ip info key
		googleMapKey: string, // the google map key
		googleCaptchaKey: string, // the google reCAPTCHA site key
  		passphrase: string, // the encryption key
		showPage: boolean, // used to show the page or not
		speedCheckURL: string, // public URL of the internet speed check
		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
		appId: string, // application policy identifier
		accountId: string, // account can be taken from operator axiom account
		appName: string, // representing name of the application (Optional)
		userName: string, // user prospective data
		userId: string, // user document number to identity
		email: string, // user prospective data
		phone: string, // user prospective data
		applicationNo: string, // user prospective data
		isMalay: boolean, //used to change the default language english to malay
		branchId: string, //used to identify the bank branch
		sendLogsEmail: boolean, //used to send logs through email
		blinkThreshold: number, // used for blink threshold
		eyeOpenThreshold: number, // used for eye open threshold
		disableUploadDocs: boolean, // used to show/hide the upload docs option.
		objectPersonThreshold: number, // used for object Person score threshold
		objectPhoneThreshold: number, // used for object Phone score threshold
		grayscalePercentageThreshold: number, // used for black&white percentage score threshold
		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
	};

	// get the element used in the action button 
	var container = document.getElementById('xxxx');
	// on click of element widget works
	container?.addEventListener('click', function () {
		sonic?.SonicWidget(config);
	});
}

7. Add service worker for widget to protect the multiple calls for tensorflow. So, it will have cache to reuse it. Here, I'm adding service-worker.js file at src/assets folder. So, below steps will be based on this file path.

const CACHE_NAME = 'demo-app-ai-tensorflow-models-cache-v1';
const urlsToCache = [
    // coco ssd - tensorflow model
    // document model - teachable machine drive link or folder path 
    // mask model - teachable machine drive link or folder path 
    // face landmark model - mediapipe tasks-vision
    // hand landmark model - mediapipe tasks-vision
    // Add more model files if necessary
  ]

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
    const request = event.request;
  
    // Skip caching for requests from browser extensions
    if (request.url.startsWith('chrome-extension://')) {
      return;
    }
  
    event.respondWith(
      caches.match(request)
        .then(function(response) {
          // Cache hit - return response
          if (response) {
            return response;
          }
  
          // Clone the request
          const fetchRequest = request.clone();
  
          return fetch(fetchRequest).then(
            function(response) {
              // Check if we received a valid response
              if(!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }
  
              // Clone the response
              const responseToCache = response.clone();
              // Save the response for future matching
              caches.open(CACHE_NAME)
                .then(function(cache) {
                  cache.put(request, responseToCache);
                });
  
              return response;
            }
          );
        })
    );
});

8. Use this script tag to get access to the service worker at initial html page:

<script src="src/assets/service-worker.js"></script>

or

it can be added in angular.json by installing the npm package

"scripts": [ ..., "src/assets/service-worker.js" ]

9. Register the service worker at your required place:

	ngAfterViewInit(): void {
		if ('serviceWorker' in navigator) {
			window.addEventListener('load', () => {
				navigator.serviceWorker.register('/demo-app/assets/service-worker.js').then(
					(registration) => {
						console.log(
							'ServiceWorker registered with scope: ',
							registration.scope
						);
					},
					(err) => {
						console.error('ServiceWorker registration failed: ', err);
					}
				);
			});
		}
	}

Implementation Details for Vanilla JavaScript:

Steps:-

1. Create or open an html file.

2. Add a button with the id xxxx. It is used to call the widget by on click event.

<button id="xxxx">Open</button>

3. Add a div tag with the id sonic-web-widget at the last or beginning of the body tag. It is used to display the sonic module with the help of this id.

<div id="sonic-web-widget"></div>

4. Add a Script tag to the head tag or body tag. And use the latest version.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

5. Next, add the script tag at a necessary place. But add below the widget script.

<script>
	const config = {
		baseurl: string, // the base url of the backend server
		docModelPath: string, // the doc model url of the document recognition process
		maskModelPath: string, // the mask model url of the mask detect process
		faceModelUrl: string, // the face model url of the face recognition process
      	handModelUrl: string, // the hand model url of the hand recognition process
      	objectModelUrl: string, // the object model url of the object recognition process
		ipInfoKey: string, // the ip info key
		googleMapKey: string, // the google map key
		googleCaptchaKey: string, // the google reCAPTCHA site key
  		passphrase: string, // the encryption key
		showPage: boolean, // used to show the page or not
		speedCheckURL: string, // public URL of the internet speed check
		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
		appId: string, // application policy identifier
		appName: string, // representing name of the application (Optional)
		accountId: string, // account can be taken from operator axiom account
		userName: string, // user prospective data
		userId: string, // user document number to identity
		email: string, // user prospective data
		phone: string, // user prospective data
		applicationNo: string, // user prospective data
		isMalay: boolean, //used to change the default language english to malay
		branchId: string, // branch id to identify the branch of the bank
		sendLogsEmail: boolean, //used to send logs through email
		blinkThreshold: number, // threshold used to calculate the user's eye blinked or not, with range limit 0-1(default value is 0.35)
		eyeOpenThreshold: number, // threshold used to calculate the user's eye open or not, with range limit 0-1(default value is 0.2)
		disableUploadDocs: boolean, // used to pass a boolean value. It is used to disable the upload option the document process
		objectPersonThreshold: number, // used for object Person score threshold with range limit 0-1(default value is 0.925)
		objectPhoneThreshold: number, // used for object Phone score threshold with range limit 0-1(default value is 0.5)
		grayscalePercentageThreshold: number, // used for black&white percentage score threshold with range limit 0-100(default value is 80)
		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
	};
	// get the element used in the action button 
	var container = document.getElementById('xxxx');
	// on click of element widget works
	container.addEventListener('click', function () {
		sonic.SonicWidget(config);
	});
</script>

Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id xxxx button and add it to the event listener. It checks if the button is clicked and sends the config object data to the sonic module. sonic.SonicWidget(config)

You can get the logs with onMessage for all actions and stages. Check with data.code

0 - info message from application 
1 - success api call
-1 - failed api call
-2 - error message from application 
-3 - configuration error message 
2 - on close application

Note:-

• baseurl should pass as a string value. It is used as the base URL for API calls.
• docModelPath should pass as a string value. It is used as the base URL for document model.
• maskModelPath should pass as a string value. It is used as the base URL for mask model.
• faceModelUrl should pass as a string value. It is used as the base URL for task vision face model.
• handModelUrl should pass as a string value. It is used as the base URL for task vision hand model.
• objectModelUrl should pass as a string value. It is used as the base URL for coco-ssd object model.
• showPage is used to pass a boolean value ( true or false ). To toggle the widget page open or close.
• speedCheckURL should pass as a string value. It is used to detect internet speed and intimate the user.
• videoURL should pass as a string value as url. It is used to show the video onboard sonic kyc and it is optional.
• accountId should pass as a string value. It is used to get the JWT token and proceed with the operator account.
• isMalay is used to pass a boolean value ( true or false ). To toggle the widget default language english or malay.
• branchId should pass as a string value. It is used to find bank branch available for operator account for onboard sonic kyc.
• appId should pass as a string value. It is used to find an application policy for onboard sonic kyc.
• appName should pass as a string value. It is used for onboard kyc application name. it is optional and default Sonic .
• ipInfoKey should pass as a string value. It is used for location details and paid api key for VPN restriction. For more details visit https://ipinfo.io/.
• googleMapKey should pass as a string value. It is used for location details and geo fence. For more details visit https://developers.google.com/maps.
• googleCaptchaKey should pass as a string value. It is used for spam/bot attack. For more details visit https://developers.google.com/recaptcha.
• passphrase should pass as a string value. It is used for encrypting the string with this special key and same key need to be used at backend also for decrypting the data.
• userName should pass as a string value. It is used to create an application for onboard sonic kyc.
• userId should pass as a string value. It is used to create an application for onboard sonic kyc and to compare your identity with the document.
• email should pass as a string value. It is used to create an application for onboard sonic kyc.
• phone should pass as a string value. It is used to create an application for onboard sonic kyc.
• applicationNo should pass as a string value. It is used to create an application for onboard sonic kyc.
• sendLogsEmail is used to pass a boolean value. It is used to send logs to client email address.
• blinkThreshold is used to pass a numerical value. It is used to check the user blinking (range 0-1 and default 0.35). Above the threshold consider to be blinking or eye closed.
• disableUploadDocs is used to pass a boolean value. It is used to disable the upload option the document process.
• eyeOpenThreshold is used to pass a numerical value. It is used to check the user eyes are open (range 0-1 and default 0.2). Below the threshold consider to be eyes are open.
• objectPersonThreshold is used to pass a numerical value. It is used to check the image person as object found with required score as threshold (range 0-1 and default 0.925).
• objectPhoneThreshold is used to pass a numerical value. It is used to check the image phone/laptop as object found with required score as threshold (range 0-1 and default 0.5).
• grayscalePercentageThreshold is used to pass a numerical value for percentage. It is used to check the image color as black&white found with required percentage as threshold (range 0-100 and default 80).
• onMessage is a callback function. It is getting called when the API gives a message or at any configuration error. Return data is an object with its API endpoint and result.