Skip to content

Latest commit

 

History

History
179 lines (116 loc) · 4.81 KB

README-Phonegap.md

File metadata and controls

179 lines (116 loc) · 4.81 KB
Raw

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

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.

<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>

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>
		<meta charset="utf-8" />
	</head>
	<body>
		Processing OAuth response...
	</body>
</html>

Now, setup your 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>