Web and WebWorks Development

[kenhcwoo]

So I want to allow a user to login with Facebook and check if their friends are also using the app. Has anyone been able to successfully do this in a Webworks app?

I did some reading and here's what I figured out.

Using http://developers.facebook.com/docs/reference/dialogs/oauth/, instead of using FB.login (which opens a popup, and webworks can't handle that), I can link a user to the authentication URL. Here's the problem, I am not sure what to set my redirect_url as, since I want the user to go back to the webworks app, and that's a local file. Another issue is that the Facebook login only allows authentication requests from a site or domain that you specify. Since Webworks is running locally, I have no idea what to set this to. I am using "http://localhost" at the moment but I'm pretty sure this won't work on an actual device.

Some solutions I thought of would be to set a redirect_url to a server page that redirects to a local file (is that even possible?), or somehow create an iFrame/Browserfield with the authentication link, and then listen for redirect events (is THAT possible?) and then intercept the redirect.

What are some solutions you guys have implemented? What were your Facebook app settings?

I looked a little into the Phonegap Facebook connect plugin and the Blackberry FB SDK, but I'm not sure about the Facebook App settings to use for those, and how to properly set them up for a Webworks app.

[oros]

Hi there,

Just to ensure, the redirect URL you are referring to is the one noted in the API documentation?

http://www.facebook.com/dialog/oauth/?
  scope=email,user_birthday&
  client_id=123050457758183&
  redirect_uri=http://www.example.com/response&
  response_type=token

Within the following thread, one dev. indicates that Twitter oauth redirected just fine by providing redirect without the HTTP protocol (i.e. index.html resolved to local:///index.html):

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-Can-I-Redirect-to-a-Page-in-...

I am a little surprised that this would work. An alternative approach could be to leverage the ChildBrowser extension that Motek Mobile has released:

https://github.com/rsweny/ChildBrowser-plugin-for-BlackBerry

I have not tried this approach myself, but a ChildBrowser is a common approach on other platforms so this one has potential. I will give this a try myself when I get the time, if you do see success (or failure) yourself, by all means let us know here.

Erik Oros

BlackBerry Development Advisor

[kenhcwoo]

Yup, that's the redirect URL I'm talking about. Facebook is a bit more strict on how the redirect url is formatted, I tried passing it just index.html, but the API returns an error saying that the redirect url isn't formatted properly and that it needs to include the HTTP part.

I will try the childbrowser approach and let you know what I come up with.

[Pumano-]

May be RIM can answer how to emplement oAuth 2.0 on the Blackberry Webworks (PlayBook, Smartphone). I search that information too, but not find something good.

iFrame can do it or not?

[slidenv]

This might not be ideal but it just might work. I'll give it a try later. It involves using a web server as an intermediary.

Before you begin you'll need to setup a web page that you'll use for a facebook application. I would recommend making it 1024x600 and style it to look like your webworks application.

Then:

1. Create a Facebook app and note the app id

2. In your web works config.xml add access elements for:

<access uri="https://www.facebook.com" subdomains="true">
   <feature id="blackberry.app.event" required="true" version="1.0.0"/>
    <feature id="blackberry.invoke"/>
    <feature id="blackberry.invoke.BrowserArguments" />
</access>

<access uri="http://www.facebook.com" subdomains="true">
   <feature id="blackberry.app.event" required="true" version="1.0.0"/>
    <feature id="blackberry.invoke"/>
    <feature id="blackberry.invoke.BrowserArguments" />
</access>

3. Connect a button in your webworks application to the oauth URL

 https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL

 where client id is your app id and set the URL to your facebook application URL

4. When the user clicks the button they'll be taken to the facebook login page and will be asked to give access to your facebook application and will redirect to your facebook application URL

5. At this point you should have their access token

6. On your facebook URL for your application - that looks just like your webworks app - you can include a button that goes back to a local page

<a href="local:///index.html">Home</a>

Again, I have not tried it yet. This is just an idea I had while reading this post.

Mark

[slidenv]

Trying it now... 

[slidenv]

It worked! Here's the facebook application code I used. I had to remove the carriage returns from the JSON facebook returns and then process it. For some reason the webkit browser would fail when trying to parse the JSON with the carriage returns.

<!DOCTYPE html> 
<html> 
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>My App</title>
	<link type="text/css" rel="stylesheet" media="screen" href="app.css" />
	<script src="jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(function()
	{
        var hash = window.location.hash.substr(1);
		var access_token = hash.substr(hash.indexOf('access_token='))
                  .split('&')[0]
                  .split('=')[1];



		$.ajax({
            type: "GET",
            url: "https://graph.facebook.com/me",
            data: "access_token="+access_token,
			dataType: 'text',
            success: function(data){
			  data = data.replace(new RegExp( "\\n", "g" ), "");
			  
			  var obj = $.parseJSON(data);

			  alert(obj.id);
			  
			},
			error: function(obj, textStatus, errorThrown){
		      alert("error"+obj.responseText);
		    }

		});
    });

	</script>
</head>
<body>
  <div id="show_hash" style="color: #ffffff;"></div>
<p><a href="local:///index.html">Back to menu</a></p>
</body>
</html>

[asiayeah]

I've just started to work on the same Facebook Login in PlayBook. slidenv's solution looks great. Since it's been 6 months or so, is this any new update on this or other approaches?

https://github.com/rsweny/ChildBrowser-plugin-for-BlackBerry looks good, but as far as I understand, the url callback (for capturing the access token in the redirect URL) is available only in the BlackBerry OS's ChildBrowser. The PlayBook version (blackberry.polarmobile.childbrowser) doesn't seem to provide a url callback. Also, as we migrate to bb10, those PlayBook WebWorks extensions won't work. 

Any comment or suggestion is appreciated. Thanks.

[jamesgibbons]

I added the URL callback functionality to Polar Mobile's great Child Browser for PlayBook extension yesterday for my new app Photojam and put some examples in the README file. It should work fine with other social networking oauth based systems. Also, you can now monitor when the browser has been closed by the user.

https://github.com/polarmobile/blackberry.polarmobile.childbrowser 

Here is the Facebook example: (Just be sure to put in your app id and edit the access permissions you need for your Facebook app. I'm just using publish_actions and read_stream here.)

var browser = blackberry.polarmobile.childbrowser;
var appID = "<insert numeric app ID here>";
var redirect = "https://www.facebook.com/connect/login_success.html";

var path = 'https://www.facebook.com/dialog/oauth?display=wap&scope=publish_actions,read_stream&';
var queryParams = ['client_id=' + appID, 'redirect_uri=' + redirect, 'response_type=token'];
var query = queryParams.join('&');
var url = path + query;
var browserIsOpen = true;
browser.loadURLAsync(
    url,  // URL to open in browser
    function (result){
        var url = result.data;
        if (url.substring(0, redirect.length) == redirect)
        {
            var fbAccessToken = url.match(/access_token=([^&]+)/)[1];
            localStorage.setItem('fbAccessToken', fbAccessToken);
            browserIsOpen = false;
            browser.close();
            browser.clearCookies();
            alert("You authenticated with Facebook");
        }
    },
    function ()
    {
        if (browserIsOpen)
        {
            alert("You closed the browser before we authenticated you!");
        }
    });

Hope this helps!

Cheers,

James

[chadtatro]

I've got a Facebook OAuth sample post on our github here (https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/FaceBook-OAuth-2).

The sample app was made for BlackBerry 10, but you could definitely use the code and modify it to work with the childbrowser.