Facebook Ajax Connect

Couple of months ago, I was in an interesting problem. I had to find a good solution because it was a LOGIN procedure. I needed to perform a facebook ajax connect. Users would use a Facebook Ajax connect to login into a web application without a page reload.

A logical idea of Facebook Ajax Connect:

• User will login via Facebook
• Send Ajax Request to inform the server of the user’s login
• Record user’s presence on the server

So, now we are in a need to tell the server that we have logged in. How to acheive this?

Facebook Ajax Connect considerations:

• what will the request to the server contain?
• How will the server be sure about your identity?
• How will the server know that this user has a proper facebook account?
• How to remember a user as an authenticated client on the server?

Remember, simply sending the user Facebook Id is not enough. Opening Google Chrome, seeing the request and learning how the request goes can open holes. The query parameters can learn and false request can be sent.

A solution for Facebook Ajax Connect:

• User will login via Facebook by clicking on “Facebook Connect”
• Retrieve the access token and facebook user Id using JavaScript SDK
• Send a XMLHttpRequest to server
• Use a technique on server-side to make server aware that a particular user has been authenticated

So, now, you know that along with the Facebook Id, you need to an access token. The access token is unique and obtained only by a proper facebook user. The access token is used to verify the Facebook Id on the server

To sum up, this is how Facebook Ajax Connect works:

1. Get the Facebook Id and the access token of the user

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});

Code above obtained here

2. Make an XMLHttpRequest and send the details to server (using jQuery)

1
2
3
4

$.post("loginURL", { id: "idGoesHere", accesstoken: "tokenGoesHere" },
function(data) {
/*process the response here */
});

3. Now suppose the loginURL ultimately fall on the function below:

1
2
3
4
5
6
7
8
9
10
11
12
13

public function authenticateFacebookUser($FacebookId,$token)
{
$userDetails=json_decode(file_get_contents("https://graph.facebook.com/me?access_token=".$token));
if ($userDetails->id==$FacebookId) {
/* here, you are sure the client is a proper facebook user
the user can be an existing user or new user
so, use u're ORM or sql to query the database and perform the
procedures needed
*/
return 1;
}
return 0;
}

U got a better idea, please share it,