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?

Edit: This is about a web-app, not a native app.

Answer 1

OK so just a small test, but I tried this out:

var iframe = $("<iframe src='http://google.com'></iframe"); $("body").append(iframe); $("body").find("iframe:last").attr("src"); // => http://google.com 

And it seemed to work OK. I had this same problem so I'm going to try this same solution tonight in my app. I don't want to do an interval that constantly checks the SRC, so I'll see if I can trigger an event on change of that SRC.

Also an alternative to dealing with Comet is WebSockets. A nice, easy to deal with service is PusherApp (which I already am using in my app anyway), so if I can't figure out how to trigger an event once the iframe SRC attribute changes, I'll probably just push a "auth_succeeded" event to the client and handle it that way.

Thanks for the iframe idea. I was wondering how I would support FB Connect in an iPhone webapp without spawning a Safari window and taking them out of my app.