Saturday, April 2, 2011

Using Facebook Login on 3rd Party HTTPS pages

Update: The problem is solved by Facebook. So there is no need to do what is written here.

In the last post, I was discussing how having Facebbok connect login on https page is painful.

A few days back, I also observed a notice form Facebook saying that the bug has been fixed.
However, looking at the history of Facebook in this regard, we are still using our method of logging mechanism. Our system also provides us a few other advantages over Facebbok connect login.

Now that we have solved all the issues, it looks very simple ... :)

The workflow:
  1. On a third party HTTPS page, user is presented some info to share with her friends via our app
  2. When user clicks on share button, she will be asked for Facebook login and permissions
  3. The info gets passed to our server after successful login and server does a Facebook wall post
  4. User is presented a personalized page in the iframe 

Problems:
As discussed in last post. IE should not show any HTTPS warning.

Solution:
Here are the steps in short:
  1. Remove inclusion of Facebook connect JS library (all.js)
  2. When user clicks on share button, open a new window for Facebook login process (this step is not completely client side, server is also involved)
    1. URL of new window is the auth url of Facebook
    2. Return uri is some page on your server that handles login process with Facebook on server side, implements your own session state for the user and returns your session information to the client
  3. When login process is complete, the window passes session information to the opener (the page in iframe) and closes itself
  4. The page in iframe completes rest of the workflow
Stay tuned for the details and code examples....
Cheers....