Identity Cordova Plugin

Identity Cordova Plugin extends native Android and iOS identity functionalities to Cordova based implementations. The plugin extends the following features;

1. Capturing Portrait with liveliness detection

2. Capturing Identity Card, match the card with the Portrait captured.

3. Scan Identity Card and documents using OCR to extract data from it. Document scanned can be from the camera or from image gallery.

1. Cordova Implementation

Code Integrate into you Application

There could be multiple ways to achieve this same implementation

HTML

<div style="flex-direction: row; padding: 5px">
	<button id="showOCRScannerButton">Scan OCR</button>
	<button id="captureFace">Capture Face</button>
	<button id="captureId">Capture ID</button>
</div>

Javascript

var app = {
	initialize: function  () {
	document.addEventListener('deviceready', this.onDeviceReady.bind(this), false)
},

onDeviceReady: function  () {
	this.receivedEvent('deviceready')
	var DocumentReaderResults = IdentityCordova.DocumentReaderResults
	var Scenario = IdentityCordova.Scenario
	var Enum = IdentityCordova.Enum
	document.getElementById("showOCRScannerButton").addEventListener("click", scanOCR);
	if (window.cordova.platformId == "android") {
		document.getElementById("captureFace").addEventListener("click", capturePotraitAndroid);
		document.getElementById("captureId").addEventListener("click", captureIdAndroid);
	}
	readFile("www/identity.license", function  (license) {
	IdentityCordova.loadLicense(license, function  (message) {
		...
	}, function  (error) {
	....
	});
});

function  scanOCR() {
	IdentityCordova.showScanner(function (e) { }, function  (e) { })
}

function  capturePotraitAndroid() {
	IdentityCordova.captureSelfie(function (e) { }, function  (e) { })
}

function  captureIdAndroid() {
	IdentityCordova.captureID(function (e) { }, function  (e) { })
}

  

function  readFile(path, callback, ...items) {
	window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + path, function  (fileEntry) {
		fileEntry.file(function (file) {
			var reader = new FileReader()
			reader.onloadend = function  (e) {
				callback(this.result.substring(this.result.indexOf(',') + 1), items)
			}
			reader.readAsDataURL(file)
		})

		}, function  (e) { 
			console.log(JSON.stringify(e)) 
		})
	}
},

receivedEvent: function  (id) {
	var parentElement = document.getElementById(id)
	var listeningElement = parentElement.querySelector('.listening')
	var receivedElement = parentElement.querySelector('.received')
	listeningElement.setAttribute('style', 'display:none;')
	receivedElement.setAttribute('style', 'display:block;')
	console.log('Received Event: ' + id)
},
}

app.initialize()

Install license

1. Get a license from AIM Group. We will need your App package ID to generate the license for you.

2. Create identity.license file under www/ folder. Paste the key provided to this file

Note: The app has to be online for the license to be activated

Install plugins

npm install -g plugman

Navigate to you project

$ cordova plugin add cordova-plugin-file

$ cordova plugin add cordova-plugin-device

$ cordova plugin add cordova-plugin-identitycordova

$ cordova plugin add cordova-plugin-androidx

$ cordova plugin add cordova-plugin-androidx-adapter

Run Android

If you hava plugman installed, you could use plugman to add the plugin

$ plugman install --platform android --project [PATH TO YOUR PROJECT]/platforms/android --plugin cordova-plugin-identitycordova

Build the project

$ cordova build android

Run the project in you android device

$ cordova run android --device

Run IOS

$ plugman install --platform ios --project [PATH TO YOUR PROJECT]/platforms/ios --plugin cordova-plugin-identitycordova

Build the project

$ cordova build ios

Run the project in you android device

$ cordova run ios --device

2. Ionic Implementation

Code Integrate into you Application

There could be multiple ways to achieve the same implementation, one way is through Dependency Injection. The following steps use DI

Step 1

Create a provider as follows under /src/providers/identity/

import { Injectable } from '@angular/core';
import { Plugin, Cordova, CordovaProperty, CordovaInstance, IonicNativePlugin } from '@ionic-native/core'

@Plugin({
pluginName: "identitycordova",
plugin: "cordova-plugin-identitycordova",
pluginRef: "IdentityCordova",
platforms: ['Android', 'iOS'],
})

@Injectable()
export class IdentityProvider {

	@Cordova()
	captureSelfie(arg0: any): Promise<any> {

		return;
	}

	@Cordova()
	captureID(arg0: any): Promise<any> {

		return;
	}

	@Cordova()
	ocrScan(arg0: any): Promise<any> {

		return;
	}

	@Cordova()
	upload(jobInfo: any, partnerParams: any, userIdInfo: any, sidNetInfo: any): Promise<any> {

		return;
	}
}

Note for Ionic 5: Decorators seems to not be working in Ionic 5. The provider can be re-written this way

import { Injectable } from '@angular/core';

declare  let IdentityCordova: any;

@Injectable()
export class IdentityProvider {
	captureSelfie(arg0: any): Promise<any> {
		return new Promise(( resolve, reject ) => {
			IdentityCordova.captureSelfie(arg0, ( e ) => resolve(e), ( e ) => reject(e));
		});

	}

	captureID(arg0: any): Promise<any> {
		return new Promise(( resolve, reject ) => {
			IdentityCordova.captureID(arg0, ( e ) => resolve(e), ( e ) => reject(e));
		});
	}

	  

	ocrScan(arg0: any): Promise<any> {
		return new Promise(( resolve, reject ) => {
			IdentityCordova.ocrScan(arg0, ( e ) => resolve(e), ( e ) => reject(e));
		});
	}

	loadLicense(arg0: any): Promise<any> {
		return new Promise(( resolve, reject ) => {
			IdentityCordova.loadLicense(arg0, ( e ) => resolve(e), ( e ) => reject(e));
		});

	}

	upload(jobInfo: any, partnerParams: any, userIdInfo: any, sidNetInfo: any): Promise<any> {
		return new Promise(( resolve, reject ) => {
			IdentityCordova.upload(jobInfo, partnerParams, userIdInfo, sidNetInfo, ( e ) => resolve(e), ( e ) => reject(e));
		});
	}

}

Step 2

Add the following to your page. The code does not have to be the same.

HTML

<button ion-button full (click)="captureSelfie()">Capture Selfie</button>
<button ion-button full (click)="captureIDCard()">Capture ID </button>
<button ion-button full (click)="captureSelfieAndID()">Register with ID Card</button>
<button ion-button full (click)="captureOCR()">Capture OCR</button>
<button ion-button full (click)="matchSelfieandID()">Match Selfie and ID</button>
<button ion-button full (click)="matchSelfieandOCR()">Match Selfie and OCR</button>

# TypeScript

...
import { IdentityProvider } from '../../providers/identity/[provider file name]';

....

constructor(public identity: IdentityProvider) {

let that = this; 

....

captureSelfie() {
	let that = this;
	this.getTag().then(result => {
		let tag = "test_unique_tag_" + result;
		that.identity.captureSelfie(tag).then(result => {
			if (result["ID_RESULT"] === "success") {
				...
			} else {
				...
			}
		}).catch(err => {
			...
		})
	}).catch(err => {
		...
	})
}

captureIDCard() {
	let that = this;
	this.getTag().then(result => {
		let tag = "test_unique_tag_" + result;
		that.identity.captureID(tag).then(result => {
			if (result["ID_RESULT"] === "success") {
				...
			} else {
			...
			}
		}).catch(err => {
		...
		})
	}).catch(err => {
	...
	})
}

async captureSelfieAndID() {
	let loading = this.loadingController.create({
	cssClass: 'my-custom-class',
	content: 'Please wait...',
	duration: 200000

	});

	let that = this;
	let d = new Date();
	var n = d.getTime();
	let tag = "mic" + n;
	that.identity.captureSelfie(tag).then(result => {
		if (result["ID_RESULT"] === "success") {
			that.identity.captureID(tag).then(result => {
				if (result["ID_RESULT"] === "success") {
					loading.present();
					that.upload(1, tag, true, tag).then(result => {
						that.storage.set('last_tag', tag);
						loading.dismiss();
						....
					}).catch(err => {
					loading.dismiss();
						....
					})
				} else {
					console.log(result["ID_RESULT"])
					....
				}
			}).catch(err => {
				....
			})
		} else {
			console.log(result["ID_RESULT"])
			.....
		}
	}).catch(err => {
		....
	})
}
....
 
captureOCR() {
	let that = this;
	this.getTag().then(result => {
		let tag = "test_unique_tag_" + result;
		that.identity.ocrScan(tag).then(result => {
			if (result["OCR_RESULT"] === "success") {
				...
			} else {
			...
			}
		}).catch(err => {
		....
		})
	}).catch(err => {
	...
	})
}

Alternative approach incase the above does not work:

# TypeScript

...
import ...

declare  let IdentityCordova: any;
....
constructor(public identity: IdentityProvider) {
let that = this;
....

captureSelfie() {
	let that = this;
	let tag = "test_unique_tag_1";
	IdentityCordova.captureSelfie(tag, ( result ) => {
		if(result && result != "success") {
			var results = JSON.parse(result);
			if (results["ID_RESULT"] === "success") {
				...
			} else {
				...
			}
		} else {
			...
		}
	}, ( err ) => {
		...
	});
}

captureIDCard() {
	let that = this;
	let tag = "test_unique_tag_2";
	IdentityCordova.captureID(tag, ( result ) => {
		if(result && result != "success") {
			var results = JSON.parse(result);
			if (results["ID_RESULT"] === "success") {
				...
			} else {
				...
			}
		} else {
			...
		}
	}, ( err ) => {
	...
	})
} 

captureSelfieAndID() {
	let loading = this.loadingController.create({
	cssClass: 'my-custom-class',
	message: 'Please wait...',
	duration: 200000

	});

	let that = this;
	let d = new Date();
	var n = d.getTime();
	let tag = "aimc" + n;
	console.log("AIM");
	IdentityCordova.captureSelfie(tag, ( result ) => {
		if(result && result != "success") {
			var results = JSON.parse(result);
			if (results["ID_RESULT"] === "success") {
				IdentityCordova.captureID(tag, ( idResult ) => {
					if (idResult && idResult != "success") {
						var idResults = JSON.parse(idResult);
						if (idResults["ID_RESULT"] === "success") {
							IdentityCordova.upload(1, tag, true, tag, ( result ) => {
					...
							}, ( err ) => {
								...
							})
						} else {
							...
						}
					} else {
						...
					}
				}, ( err ) => {
					...
				})
			} else {
				...
			}
		} else {
			...
		}
	}, ( err ) => {
		...
	})
}
....

captureOCR() {
	let that = this;
	let tag = "test_unique_tag_3";
	IdentityCordova.showScanner(tag, (result) => {
		if(result && result != "success") {
			var results = JSON.parse(result);
			if (results["ID_RESULT"] === "success") {
				...
			} else {
				...
			}
		} else {
		...
		}
	}, (err) => {
	...
	})
}

matchSelfieandID() {
	let that = this;
	let tag = "test_unique_tag_1";
	IdentityCordova.captureSelfie(tag, ( result ) => {
		if(result && result != "success") {
			try {
				var results = JSON.parse(result);
				if (results["ID_RESULT"] === "success") {
					var firstImage = results["RESULT_DATA"];
					IdentityCordova.captureID(tag, ( idResult ) => {
						if(idResult && (idResult != "success" || idResult != "ok")) {
							try {
								var idResults = JSON.parse(idResult);
								if (idResults["ID_RESULT"] === "success") {
									var secondImage = idResults["RESULT_DATA"];
									IdentityCordova.matchFaces(firstImage, secondImage, ( matchResult ) => {
										if(matchResult && (matchResult != "success" || matchResult != "ok")) {
											try {
												var matchResults = JSON.parse(matchResult);
												if(matchResults && matchResults["resultCode"]) {
													var similarity = matchResults["resultCode"];
													...
												} else {
												...
												}
												...
											} catch (e) {
												...
											}
										} else {
											...
										}
									}, ( err ) => {
										...
									})
								} else {
									...
								}
							} catch (e) {
								...
							}
						} else {
							...
						}
					}, ( err ) => {
						...
					});
				} else {
					...
				}
			} catch (e) {
				...
			}
		} else {
			...
		}
	}, ( err ) => {
		...
	});
}


matchSelfieandOCR() {
	let that = this;
	let tag = "test_unique_tag_1";
	IdentityCordova.captureSelfie(tag, ( result ) => {
		if(result && result != "success") {
			try {
				var results = JSON.parse(result);
				if (results["ID_RESULT"] === "success") {
					var firstImage = results["RESULT_DATA"];
					IdentityCordova.showScanner(tag, ( idResult ) => {
						if(idResult && (idResult != "success" || idResult != "ok")) {
							try {
								var idResults = JSON.parse(idResult);
								if (idResults["ID_RESULT"] === "success") { 
									if(idResults["PORTRAIT_RESULT_DATA"]) {
										var secondImage = idResults["PORTRAIT_RESULT_DATA"];
										IdentityCordova.matchFaces(firstImage, secondImage, ( matchResult ) => {
											if(matchResult && (matchResult != "success" || matchResult != "ok")) {
												try {
													var matchResults = JSON.parse(matchResult);
													if(matchResults && matchResults["resultCode"]) {
														var similarity = matchResults["resultCode"];
													...
													} else {
													...
													}
													that.ngZone.run(() => {
													...
													});
												} catch (e) {
												...
												}
											} else {
											...
											}
										}, ( err ) => {
											...
										});
									} else if(results["DOCUMENT_RESULT_DATA"]){
										...
									}
								} else {
									...
								}
							} catch (e) {
								...
							}
						} else {
							...
						}
					}, ( err ) => {
						...
					});
				} else {
					...
				}
			} catch (e) {
				...
			}
		} else {
			...
		}
	}, ( err ) => {
		...
	});
}

Install license

1. Get a license from AIM Group. We will need your App package ID to generate the license for you.

2. Load the license key on your App initialization process. This would usually be on app.component.ts file.

this.platform.ready().then(() => {
	this.loadLicense();
	...
	this.statusBar.styleDefault();
	this.splashScreen.hide();
});

...


async loadLicense() {
	let that = this;
	that.identity.loadLicense(btoa("XXXX-XXXXX-XXXX-XXXX-XXXXX-XXXXXX")).then(result => {
		console.log("license loaded");
	}).catch(err => {
		console.log("error loading license: " + err);
	});
} 

Note: The app has to be online for the license to be activated

Run Android

Step 1

$ npm i

Step 2

$ ionic cordova platform add android

Step 3

Configure your platforms/android/local.properties to point to your ndk and sdk locations

ndk.dir=$ANDROID_NDK_HOME
sdk.dir=$ANDROID_SDK_HOME

Step 4

Replace the contents of the file platforms/android/project.properties with the below

target=android-28
android.library.reference.1=CordovaLib
android.library.reference.2=app
cordova.system.library.1=com.android.support:support-annotations:27.+
cordova.gradle.include.1=cordova-android-play-services-gradle-release/starter-cordova-android-play-services-gradle-release.gradle
cordova.system.library.3=com.google.android.gms:play-services-vision:18.0.0
cordova.system.library.4=com.android.support:appcompat-v7:28.0.0
cordova.system.library.5=com.android.support:support-v4:28.0.0
cordova.system.library.6=com.android.support.constraint:constraint-layout:1.1.3
cordova.system.library.7=com.android.support:exifinterface:28.0.0
cordova.system.library.8=com.google.code.gson:gson:2.8.4
cordova.gradle.include.2=app/build-extras.gradle

Step 5

Add gradle dependancies to platforms/android/app/build.gradle under the app dependancies

implementation "com.android.support:support-annotations:27.+"
implementation "com.google.android.gms:play-services-vision:18.0.0"
implementation "com.android.support:appcompat-v7:28.0.0"
implementation "com.android.support:support-v4:28.0.0"
implementation "com.android.support.constraint:constraint-layout:1.1.3"
implementation "com.android.support:exifinterface:28.0.0"
implementation "com.google.code.gson:gson:2.8.4"

Build and Run

Connect your android device and run

$ ionic cordova run android

Troubleshoot Android

You may need to make the following change to SystemCookieManager under /platforms/android/CordovaLib/src/org/apache/cordova/engine for lower versions support.

- cookieManager.setAcceptThirdPartyCookies(webView, true);
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
	+ cookieManager.setAcceptThirdPartyCookies(webView, true);
+ }

Method setAcceptThirdPartyCookies was added in version 6, lower version may cause the build to fail.

Run IOS

Step 1

$ ionic cordova platform add ios

Step 2

• Request the IOS Libraries from AIM Group
• Place this .framework file at the root of your project
• In XCode select your project and add the .framework under frameworks, libraries and embedded content by clicking add files

Step 2

Run in XCode