How to use Facebook Connect in an iPhone webapp

Question

I'm trying to use Facebook Connect from an iPhone webapp, so it would look similar to how it looks in a native iPhone app which is using the Facebook Connect iPhone SDK.

The iPhone SDK gets the nice login page by visiting:

http://www.facebook.com/login.php?fbconnect=1&connect_display=touch&api_key=<key>&next=fbconnect://success

(see http://github.com/facebook/facebook-iphone-sdk/blob/master/src/FBLoginDialog.m)

Since I don't want Safari to open, the only way I see to show this page is by using an iframe.

Then there's the problem of detecting success and failure.

The SDK can do this by simply using the webView:shouldStartLoadWithRequest: delegate method and checking for fbconnect://success and fbconnect://cancel.

As far as I know, the parent page cannot monitor the URL of the iframe.

I could open a Comet connection to a server from the parent page and have Facebook redirect to my server, which would then notify the parent page on success. But I don't like the idea of intruducing a server component to my webapp just because of this.

Does anyone have any clever ideas?

Answer 1

Sounds like you might be able to accomplish this through OAuth 2.0. Facebook documentation is pretty thin--there's a nice discussion of it over at http://www.raywenderlich.com/1488/how-to-use-facebooks-new-graph-api-from-your-iphone-app

That blog post is about using OAuth and the new Graph API within an iPhone app, but I found the OAuth discussion to be better than anywhere else. You may be able to use the URLs and flow he discusses within your webapp to accomplish the same thing.