Dark Mode

[MatthewPringle]

Not sure if it is me but having installed and open I find the Onfido plugin doesn't support dark mode

[gpltaylor]

Anyone else got this issue?

[JohnnySheffield]

Yes, same issue here

[MatthewPringle]

add this to config.xml

<platform name="ios">
<config-file parent="UIUserInterfaceStyle" target="*-Info.plist">
            <string>Light</string>
        </config-file>
</platform>

[JohnnySheffield]

Thank you!

[MatthewPringle]

@JohnnySheffield What I found with this plugin, at least in my app. iOS needs updating to latest sdk, remove mobile token and update code to allow for country to be specified.

Android - Had issues with RTL in AndroidManifest, but fixed that and found Android wouldn't build

In the end I used their JS SDK in Cordova which gives everything I need except video capture.

[my4pp]

@JohnnySheffield What I found with this plugin, at least in my app. iOS needs updating to latest sdk, remove mobile token and update code to allow for country to be specified.

Android - Had issues with RTL in AndroidManifest, but fixed that and found Android wouldn't build

In the end I used their JS SDK in Cordova which gives everything I need except video capture.

Hey have you succesfully manage to build and run it on ios/android?

[MatthewPringle]

@my4pp I wrote my own version of the plugin in Capacitor, a replacement for Cordova and one I'm moving to and it went much better.

[my4pp]

@MatthewPringle how did you fix the android issue before?

[MatthewPringle]

@my4pp I didn't in the end it crashed on Android and I couldn't get it working without having to start rewriting the plugin.

Have you looked at Capacitor? It is a replacement for Cordova going forward and if your app is not too far built into Cordova then switching might be an idea.

I can always give you my capacitor code for Onfido.

At the moment the live app is using the javascript embedded in the app as I'm upgrading the app to Capacitor.

[my4pp]

@MatthewPringle haven't tried capacitor yet but might consider using it.

Is there a repo for your Onfido capacitor the you could share with me?

Are you using the onfido capacitor in production? and are there any issues that you have encountered in using it?

[MatthewPringle]

@MatthewPringle haven't tried capacitor yet but might consider using it.

Is there a repo for your Onfido capacitor the you could share with me?

Are you using the onfido capacitor in production? and are there any issues that you have encountered in using it?

Heres a quick ember.js app with Onfido iOS and Android. Ember is a JS framework.

https://www.dropbox.com/s/osnphlnge1pcer2/onfido-capacitor.zip?dl=0

It is an ember app, so you need to npm-install as usual, but also for ease of use install my ember-capacitor package npm install -g ember-cap. ( you will probably need ember-cli as well npm install -g ember-cli)

https://www.npmjs.com/package/ember-cap

Then in the main app directory just type "ember-cap serve ios" and it will build and run for you in Xcode, "ember-cap serve android" for Android builds. ( serve has live reload, using build packages the app for release )

in /ios/App you might need to "pod install" but capacitor should take care of that. My code is now 1 release behind the Onfido iOS SDK and it seems if you went to v18 some iOS code needs updating about the Onfido prefs, Xcode will tell you.

in /app/services/onfido.js - Thats the JS code which runs in Ember to talk to iOS / Android

You will need to replace "https://www.your-server-goes-here.com" with your server which you use for generating tokens.

With Capacitor, you don't write plugins, you add code directly to the iOS and Android platform, so look in those folders for "Onfido Plugin" / any mentions of Onfido for where my code is.

/ios/App/Classes ( PluginOnfido.m & PluginOnfido.swift ) /android/app/src/main/java/com/onfido/onfidoview/ ( PluginOnfido.java & MainActivity.java )

[my4pp]

@MatthewPringle you mentioned you are using the js sdk in your live app? how is it? did you encountered some issues with it?

[MatthewPringle]

@my4pp basically the JS SDK won't run on Cordova because Onfido require a referrer which has to be a website. So I hosted an page with their JS SDK on the clients server and I use...

iOS: You need to use the Cordova plugin InAppBrowser to open that page mentioned above, it has all the required features to run Onfido, let the camera work etc...

Android: You need to use the Cordova plugin SafariViewController to open the site. It uses Chrome Tabs on Android, but the Tabs have the required features to enable camera etc...

When in the Cordova app, when wanting to use Onfido I just open the browser window mentioned above and pass the token I've generated and the process works as normal. On completion I take the Onfido callback results which are passed to the webpage and pass them back to Cordova using the callback method in each of those in app browser plugins.

It is nearly as seamless as the Android and iOS SDKS, it actually has more configuration options for passport / driving licence / country etc... The only thing you can't do is video as Safari / iOS won't allow the camera to work in an in app browser window, and even if they did the JS SDK isn't aware of Cordova / in app browsers so I couldn't get it to work. On Android I manage to get video working as they have less security, but again it is down to Onfido to support it.

Android...

/* Callback */
window.handleOpenURL = function( message ) {
self.callbackAndroid( message );
};

/* Open Browser */
window.SafariViewController.show({ url: config.APP.webRoot + '/assets/onfido/?device=android&id=' + id + '&token=' + token , animated: false },

    /* Result */
    /* ------------------------------------------------------------------------------------ */
    function( result ) {

        /* Opened */
        /* -------------------------------------------------------------------------------- */
        if ( result.event === 'opened' || result.event === 'loaded'  ) {
            self.set( 'app' , true );
        }

        /* Closed */
        /* -------------------------------------------------------------------------------- */
        if ( result.event === 'closed' ) {
            self.closeAndroid();
        }

    },

    /* Error */
    /* ------------------------------------------------------------------------------------ */
    function( error ) {

        /* Log Error */
        console.log( error );

        /* Close */
        self.closeAndroid();

        /* Show Notification */
        self.get( 'dialogService' ).notification( 'My App' , 'Continue' , 'An error has occurred. Please try again later.' );

    }

);

iOS

/* Options */
    var options = 'usewkwebview=yes,location=no,hidenavigationbuttons=yes,toolbar=no,toolbartranslucent=no,hardwareback=no,disallowoverscroll=yes';

    /* URL */
    var url = config.APP.webRoot + '/assets/onfido/?device=ios&id=' + id + '&token=' + token;

    /* Open Browser */
    var app = window.cordova.InAppBrowser.open( url , '_blank' , options );

    /* Store */
    this.set( 'app' , app );

    /* Add Exit Event Listener */
    this.get( 'app' ).addEventListener( 'exit' , this );

    /* Add Error Event Listener */
    this.get( 'app' ).addEventListener( 'loaderror' , this );

    /* Add Callback Event Listener */
    this.get( 'app' ).addEventListener( 'message' , this );

ignore all the this.get() code as that's Embers JS's way of updating properties on objects.

Edit... To answer your original question, the JS version is being used by a financial organisation and it is deployed and working fine. The only down sides are no video, and on Android the in app browser shows the url of the page being shown, though the user cannot navigate to a different webpage, the url obviously needs to be something the user would trust.

The only other thing you would need to do is register an app link in Android so the in app browser can pass back the data from the webpage.

So on the website, these are the callbacks to the different in app browsers, see the "myapp" that needs to be the name of the app you register.

/* Onfido - Post Message */
/* ---------------------------------------------------------------------------------------------------- */
function onfidoPostMessage( message ) {

    /* Android */
    /* ------------------------------------------------------------------------------------------------ */
    if ( params.get( 'device' ) === 'android' ) {
        window.location = 'myapp://?data=' + encodeURIComponent( JSON.stringify( message ) );
    }

    /* iOS */
    /* ------------------------------------------------------------------------------------------------ */
    if ( params.get( 'device' ) === 'ios' && typeof window.webkit !== 'undefined' && window.webkit.messageHandlers !== 'undefined' && window.webkit.messageHandlers.cordova_iab !== 'undefined' ) {
        window.webkit.messageHandlers.cordova_iab.postMessage( JSON.stringify( message ) );
    }

}

and in config.xml in Cordova I believe you need to add this...

<feature name="Custom URL scheme">
        <param name="id" value="cordova-plugin-customurlscheme"/>
        <param name="url" value="https://github.com/EddyVerbruggen/Custom-URL-scheme.git"/>
        <variable name="URL_SCHEME" value="myapp"/>
</feature>

[my4pp]

@MatthewPringle thanks for this, I will try using js sdk.

[jongbonga]

@MatthewPringle have you perhaps made progress with your version of the capacitor plugin?