Network Programming in .NET

Although Facebook recommend that you use their SDK to provide access to their data, and only suggest using the manual login flow for Windows 8 apps, or desktop apps, lets just take a look at how you do it. – This particular code is designed for use within Phonegap mobile apps, where cross domain ajax is permitted.

As with all OAuth systems, you never get to see the user’s username and password, you are only provided with proof that the user has logged in.

So, the first step, is to send the user to the Facebook login page.

function openLoginDialog()
{
console.log(“openLoginDialog()”);
var strUrl = buildLoginDialog(OAUTH_App_id,OAUTH_Redirect_Url);
location.href=strUrl;
}

function buildLoginDialog(app_id, redirect_uri)
{
console.log(“buildLoginDialog(” + app_id + “,” + redirect_uri + “)”);
var strUrl = “https://www.facebook.com/dialog/oauth?”;
strUrl += “client_id=” + app_id;
strUrl += “&redirect_uri=” + redirect_uri;
return strUrl;
}

When openLoginDialog is called, then the user will be redirected to the login page on facebook. You will need to have a App_id set up in Facebook developers. The redirect URL is any page online, as long as it’s authorised for your facebook app.

Once facebook returns the user to your URL, it will append a “code” in the querystring. You need to now exchange this code for an access_key, this is because the code is very easily spoofed, so it needs to be checked.

function ExchangeCodeForAccessToken(code,callback)
{
console.log(“ExchangeCodeForAccessToken(” + code + “)”);
/*
https://graph.facebook.com/oauth/access_token?
client_id={app-id}
&redirect_uri={redirect-uri}
&client_secret={app-secret}
&code={code-parameter}
*/
var strUrl = “https://graph.facebook.com/oauth/access_token?”;
strUrl += “client_id=” + OAUTH_App_id;
strUrl += “&redirect_uri=” + OAUTH_Redirect_Url;
strUrl += “&client_secret=” + OAUTH_App_Secret;
strUrl += “&code=” + code;
$.get(strUrl,function(data)
{
console.log(data);
OAUTH_Access_token = getQueryVariable(“access_token”,data);
var expiry = getQueryVariable(“expires”,data);
var currentDate = new Date();
OAUTH_Expiry = new Date(currentDate.getTime() + expiry*1000);
localStorage.setItem(“OAUTH_Access_token”,OAUTH_Access_token);
localStorage.setItem(“OAUTH_Expiry”,OAUTH_Expiry);
callback();
});
}

This ideally should be placed on a server, since the App_secret is now visible to anyone who decompiles your code.

Once you have the access_token, then you can make authenticated requests against Facebook, one of the most flexible ways to query facebook’s data is using FQL, which is based on SQL, as it’s name suggests.

Here is some code I used to run a FQL query against facebook, and display the results using mustache

function logged_in()
{
console.log(“logged_in()”);
executeFql(“SELECT name, uid FROM user WHERE uid in (SELECT uid2 FROM friend WHERE uid1 = me())”,function(data)
{
fqlResponse = data;
console.log(JSON.stringify(data));
var template = $(“#friendlistTpl”).html();
var html = Mustache.to_html(template, {data: data});
$(“#friendlist”).html(html);
});
}

function executeFql(query,callback)
{
console.log(“executeFql(” + query + “)”);
var strUrl = “https://api.facebook.com/method/fql.query?”;
strUrl += “query=” + encodeURI(query);
strUrl += “&access_token=” + OAUTH_Access_token;
strUrl += “&format=json”;
$.get(strUrl,callback);
}

I hope all that info helps someone!