Carmesh Implementation Stories (#2): Controlling Android application from Javascript

While working on the first version of carmesh Android application I had some issues with co-ordination between the app and an embedded Webview browser. The issues manifested in an authentication process which had to run in an embedded browser before handing control back to the application.

The initial focus of our authentication efforts was facebook. facebook offers a few ways to authenticate: the primary ways are via a Javascript widget or via a mobile library. These facilitate authentication on a website or in an application directly with facebook. They do not, however, provide for the case in which there is server side functionality which is communicating with facebook on the user’s behalf.

login with facebook button

While the solution to this is quite well known in general, it’s not so easy to find. The solution is to use the facebook OAuth libraries on the backend, go through an oauth flow in a browser and use retained session information between mobile and server to access the user’s services/data. (Note that this approach does impose responsibilities on the server side – it must ensure that the user’s facebook data is not accessible to others).

Within the context of a mobile app, then, it is necessary to embed a mobile browser – an Android Webview – to go through the authentication flow and to extract session information from the browser once the authentication has been performed. Once the authentication has been performed, the mobile app can present this session identifier when communicating with the server to act on behalf of the user.

The key issue in this approach is how to support interaction between the mobile browser and the application: the mobile application requires use of the mobile browser to perform authentication, but must regain control once this has been performed.

Luckily, Android provides a mechanism for such co-ordination. The solution enables Javascript embedded on a mobile web page to call a function within a mobile application. Once control is transferred back to the mobile application, it can terminate the Webview and proceed.

There are two aspects to this: firstly, the Javascript must make a call to a known method in the Android application using the Javascript Android class and secondly, the Webview must be configured to support this interaction – this is done by calling the addJavascriptInterface() on the Webview. You can find the full solution here, but I provide a little more detail on the specifics here for completeness.

  1. Create a class with Context as parameter and add it to the constructor
  2. Within the class create a method you will run when an event occurs in embedded browser with @JavascriptInterface annotation; this method can have parameters, e.g. String
  3. Run method addJavascriptInterface on your WebView with two parameters – the new instance of the class you just created and the custom name (as String) of the JavaScript interface
  4. In your page add javascript script to button click like <interfaceName>.<methodName>(parameter), where you put the same names instead of <interfaceName> and <methodName> as created in points 3 and 2 respectively.

It is worth highlighting that this mechanism does have some security implications: this channel between the Webview and the mobile app needs to be policed to ensure malicious users do not take advantage of it.

Having done all that, we can now use facebook credentials to log in and then use the mobile app to interact naturally with the server.

Advertisements

One thought on “Carmesh Implementation Stories (#2): Controlling Android application from Javascript

  1. Hello there! This is kind of off topic but I need some advice from an established blog.

    Is it very difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about making my own but I’m not sure where to start. Do you have any ideas or suggestions? Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s