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 plugmanNavigate 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-adapterRun 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-identitycordovaBuild the project
$ cordova build androidRun the project in you android device
$ cordova run android --deviceRun IOS
$ plugman install --platform ios --project [PATH TO YOUR PROJECT]/platforms/ios --plugin cordova-plugin-identitycordovaBuild the project
$ cordova build iosRun the project in you android device
$ cordova run ios --device2. 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 iStep 2
$ ionic cordova platform add androidStep 3
Configure your platforms/android/local.properties to point to your ndk and sdk locations
ndk.dir=$ANDROID_NDK_HOME
sdk.dir=$ANDROID_SDK_HOMEStep 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.gradleStep 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 androidTroubleshoot 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 iosStep 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
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago