cordova-plugin-identitycordova v0.4.9
Identity Cordova Plugin
Identity Cordova Plugin extends native Android and iOS identity functionalities to Cordova based implementations. The plugin extends the following features;
- Capturing Portrait with liveliness detection
- Capturing Identity Card, match the card with the Portrait captured.
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
Get a license from AIM Group. We will need your App package ID to generate the license for you.
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
Get a license from AIM Group. We will need your App package ID to generate the license for you.
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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago