Geek Answers Handbook

HTML5 + jQuery + phonegap mobile app security

I am new to this area and I am developing an HTML5 mobile application that calls resting webservices api and swaps JSON objects.

I want to authenticate the client once and provide a key / token that can be used after that, before the given expiration date. I have 4 questions:

  • How can I protect api server web services? any tools at all?
  • Can I use local storage to store the key / token?
  • What are the phone mail security features I can use for the client side?
  • How can I use OAUTH in this case?
+4
source share
2 answers

How can I protect server-side web services APIs? any tools?

OAuth may be redundant for your needs, make sure you really need to use such a powerful (and complex) standard.

Two examples of PHP server-side software that you can use:

Can I use local storage to store the key / token?

Yes! Remember that you SHOULD use the OAuth 2.0 implicit flow to receive the token on the client side.

What phone protection tools can I use on the client side?

ChildBrowser is a plugin that opens a separate browser window for the authentication process.

I wrote a JSO JSO ​​library that can do OAuth 2.0 for you. Other libraries exist.

How can I use OAUTH in this case?

Using JSO with Phonegap and ChildBrowser

Using JSO to authorize OAuth 2.0 in WebApps running on mobile devices in a hybrid environment is an important deployment scenario for JSO.

Here is detailed instructions on setting up JSO with PhoneGap for iOS and setting up OAuth 2.0 with Google. You can also use it with Facebook or other OAuth providers.

Preparations

Settings app

To create a new application

 ./create /Users/andreas/Sites/cordovatest no.erlang.test "CordovaJSOTest"

Install ChildBrowser

The original ChildBrowser plugin is available here.

However, it is not compatible with Cordova 2.0. Instead, you can use this ChildBrowser branch, which should work with Cordova 2.0:

You need to copy these files:

to the WebApp project area by dragging and dropping into the plugins folder in Xcode.

Now you need to edit the file found in Resources/Cordova.plist , which is in your area of ​​the WebApp project.

In this file you need to add one array entry with '*' in ExternalHosts and two entries in plugins:

  • ChildBrowser → ChildBrowser.js
  • ChildBrowserCommand → ChildBrowserCommand

as seen in the screenshot.


(source: erlang.no )

Configure your WebApp with ChildBrowser

I would suggest checking and making sure ChildBrowser is working before moving on to OAuth stuff.

Try index.html in your file and check with the simulator.

 <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script> <script type="text/javascript"> var deviceready = function() { if(window.plugins.childBrowser == null) { ChildBrowser.install(); } window.plugins.childBrowser.showWebPage("http://google.com"); }; document.addEventListener('deviceready', this.deviceready, false); </script>

JSO setup

Download the latest version of JSO:

JSO documentation is also available there.

The callback url should point somewhere, and one approach is to put the callback html page somewhere, it doesn't matter where exactly, although the host you trust and put there pretty blank page:

 <!doctype html> <html> <head> <title>OAuth Callback endpoint</title> <meta charset="utf-8" /> </head> <body> Processing OAuth response... </body> </html>

Now configure the application index page. Here is a working example:

 <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="jso/jso.js"></script> <script type="text/javascript"> var deviceready = function() { var debug = true; /* * Setup and install the ChildBrowser plugin to Phongap/Cordova. */ if(window.plugins.childBrowser == null) { ChildBrowser.install(); } // Use ChildBrowser instead of redirecting the main page. jso_registerRedirectHandler(window.plugins.childBrowser.showWebPage); /* * Register a handler on the childbrowser that detects redirects and * lets JSO to detect incomming OAuth responses and deal with the content. */ window.plugins.childBrowser.onLocationChange = function(url){ url = decodeURIComponent(url); console.log("Checking location: " + url); jso_checkfortoken('facebook', url, function() { console.log("Closing child browser, because a valid response was detected."); window.plugins.childBrowser.close(); }); }; /* * Configure the OAuth providers to use. */ jso_configure({ "facebook": { client_id: "myclientid", redirect_uri: "https://myhost.org/callback.html", authorization: "https://www.facebook.com/dialog/oauth", presenttoken: "qs" } }, {"debug": debug}); // For debugging purposes you can wipe existing cached tokens... // jso_wipe(); // jso_dump displays a list of cached tokens using console.log if debugging is enabled. jso_dump(); // Perform the protected OAuth calls. $.oajax({ url: "https://graph.facebook.com/me/home", jso_provider: "facebook", jso_scopes: ["read_stream"], jso_allowia: true, dataType: 'json', success: function(data) { console.log("Response (facebook):"); console.log(data); } }); }; document.addEventListener('deviceready', this.deviceready, false); </script>
+11
source

How can I protect api server web services? any tools at all? Depends on what language the web service is written in, php has a zend framework for creating web services / nusoap, etc. Thus, all languages ​​provide information on how to protect the web service.

Can I use local storage to store the key / token? Yes, you can use local storage to view phone book documentation

What are the phone mail security features I can use for the client side? I don’t think there is, but you can search for some plugins or create your own plugin. Depends on what kind of protection you want to implement.

How can I use OAUTH in this case? Here is the library for OAuth and it seems useful. You can create a plugin to lock the phone to interact with the library or use the java script oauth library (its also an example).

+1
source

More articles:


All Articles