OAuth may be overkill for your need, verify that you really need to use such a powerful (and complex) standard.
Two examples of PHP server side software that you may use:
Can I use the local storage to store the key/token?
Yes! Be aware that you MUST use the OAuth 2.0 implicit grant flow in order to obtain the token at the client side.
What are the phonegap security tools I can use for the client side?
ChildBrowser is a plugin to open a separate browserwindow for the authentication process.
I've written a javascript library JSO that can do OAuth 2.0 for you. Other libraries exists as well.
How can I use OAUTH in this case?
Using JSO with Phonegap and ChildBrowser
Using JSO to perform OAuth 2.0 authorization in WebApps running on mobile devices in hybrid environment is an important deployment scenario for JSO.
Here is a detailed instruction on setting up JSO with Phonegap for iOS and configure OAuth 2.0 with Google. You may use it with Facebook or other OAuth providers as well.
Preparations
- Install XCode from App Store, and iOS development kit
- Install Phonegap 2.0, Cordova 2.0
Setup App
To create a new App
./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 may use this fork of ChildBrowser which should be working with Cordova 2.0:
What you need to do is to copy these files:
in to your WebApp project area, by using drag and drop into the Plugins folder in XCode.
Now you need to edit the file found in Resources/Cordova.plist found in your WebApp project area.
In this file you need to add one array entry with '*' into ExternalHosts, and two entries into Plugins:
- ChildBrowser -> ChildBrowser.js
- ChildBrowserCommand -> ChildBrowserCommand
as seen on the screenshot.
Setting up your WebApp with ChildBrowser
I'd suggest to test and verify that you get ChildBrowser working before moving on to the OAuth stuff.
In your index.html file try this, and verify using the Simulator.
<scripttype="text/javascript"charset="utf-8"src="cordova-2.0.0.js"></script><scripttype="text/javascript"charset="utf-8"src="ChildBrowser.js"></script><scripttype="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>Setting up JSO
Download the latest version of JSO:
The documentation on JSO is available there as well.
The callback URL needs to point somewhere, and one approach would be to put a callback HTML page somewhere, it does not really matter where, although a host you trust. And put a pretty blank page there:
<!doctype html><html><head><title>OAuth Callback endpoint</title><metacharset="utf-8"/></head><body>
Processing OAuth response...
</body></html>Now, setup your application index page. Here is a working example:
<scripttype="text/javascript"charset="utf-8"src="cordova-2.0.0.js"></script><scripttype="text/javascript"charset="utf-8"src="ChildBrowser.js"></script><scripttype="text/javascript"charset="utf-8"src="js/jquery.js"></script><scripttype="text/javascript"charset="utf-8"src="jso/jso.js"></script><scripttype="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);}});