Learning FaceBook Connect

http://wiki.developers.facebook.com/index.php/Trying_Out_Facebook_Connect
FaceBook Connect is used to quickly integrate your site with Facebook account.

I look into http://www.somethingtoputhere.com/therunaround/index.php demo site using FackBook Connect, and come to some results:

1. Click “Connect with FaceBook” button, a popup window appears.
It’s a page of FaceBook: http://www.connect.facebook.com/login.php

2. Login to FaceBook use your account, the result is:
<html><head><title>Redirecting…</title><meta http-equiv=”refresh” content=”0;url=http://www.somethingtoputhere.com/therunaround/xd_receiver.php?fb_login&fname=_opener&session=%7B%22session_key%22%3A%223.TaTfPjET3u……” /></head><body></body></html>

3. The page is redirect to
http://www.somethingtoputhere.com/therunaround/xd_receiver.php, the user session is passed in.

Let’s look at the JavaScript file contains in the xd_receiver.php.
I have modify the js file to show the main logic:

   var pathname = document.URL; 

   hashIndex = pathname.indexOf('fb_login&');  

   hash = pathname.substring(hashIndex + 9); 

   var packetStart = hash.indexOf('&'); 

   // "_opener" 

   var frame_name = hash.substr(6, packetStart-6); 

   if(frame_name == "_opener") { 

 hostWindow = hostWindow.opener; 

   } 

   // "%7B%22session_key%22%3A%223.TaTfPjET3u......" 

   packet_string = hash.substr(packetStart+1); 

   // invoke parent window’s function, and pass in the session identification 

   hostWindow.FB.XdComm.Server.singleton.onReceiverLoaded(packet_string);

4. Now your site receive the FaceBook account identification.