Retrieve Access Token Using Javascript API

Question

This is a follow up to the topic: Passing the signed_request along with the AJAX call to an ActionMethod decorated with CanvasAuthorize

Since I couldn't get the signed_request to be anything other than null, I thought I'd authenticate the user on the client side, then send the access token to the server side (ASP.NET MVC) along with the AJAX call. Unfortunately, I cannot get that to work either! Here's my Javascript code (which I've got from the documentation):

function postOnFacebook(msg, itemLink, pic, itemTitle, signedReq) {
    var siteUrl = 'http://www.localhost:2732';

    var appID = 193005690721590;
     if (window.location.hash.length == 0) {
       var path = 'https://www.facebook.com/dialog/oauth?';
       var queryParams = ['client_id=' + appID,
         'redirect_uri=' + window.location,
         'response_type=token',
         'scope=offline_access'];
       var query = queryParams.join('&');
       var url = path + query;
       window.open(url);
     } else {
       var accessToken = window.location.hash.substring(1);   
       var path = "https://graph.facebook.com/me?";
       var queryParams = [accessToken];
       var query = queryParams.join('&');
       var url = path + query;

   // use jsonp to call the graph
       var script = document.createElement('script');
       script.src = url;
       document.body.appendChild(script);   
     }

    $.ajax({
        url: '/Facebook/Share',
        data: {
            'message': msg,
            'link': siteUrl + itemLink,
            'picture': siteUrl + pic,
            'name' : itemTitle,
            'accessToken': accessToken
        },
        type: 'get',
        success: function(data) {
            if(data.result == "success") {
                alert("item was posted on facebook");
            }
        }
    });
}

And this is my server-side code:

    public ActionResult Share(string message, string link, string picture, string name, string accessToken)
    {
        if (FacebookWebContext.Current.Session == null)
            return RedirectToAction("Login");

        var fb = new FacebookWebClient(accessToken);
        var postArgs = new Dictionary<string, string>();
        postArgs["message"] = message;
        postArgs["link"] = link;
        postArgs["picture"] = picture;
        postArgs["name"] = name;

        fb.Post("/me/feed", postArgs);
        return Json(new {result = "success"}, JsonRequestBehavior.AllowGet);
    }
}

UPDATE:

I tried this but it did not work for me. When I click on the button for the first time, it redirects me to the FB login page and then returns me back to my website's home page. After that, all it does is redirect and then back to the home page right away. Nothing gets posted.

Any suggestions?

Can you explain why you are doing so much custom client-side javascript to get an accesstoken when the Facebook javascript client library does this very well, with much less code? — Pat James
@Pat James: Honestly, I'm not sure what I am doing. I'm very new to this whole Facebook app development thing. I just need it to integrate my site with fb. I ended up reading a lot of documentation and spending lots of hours and yet I haven't done much progress... It's really frustrating but I have to get it done. So how do I get the access token (of the client, not the application access token) using the javascript API? — Kassem
@Pat James: I've updated my code. I think that's what you were referring to? — Kassem
i want to do the same but little bit confuse where can i write server side code and how to map Facebook/share and the method share ? — Hemant Metalia

Pat James Pat James · Accepted Answer · 2011-05-27T21:13:45

The Facebook Javascript SDK documentation is here: https://developers.facebook.com/docs/reference/javascript/

There are several methods of getting the access token using the Javascript SDK. Some are synchronous, some asynchronous, some let you subscribe to events such as changes in login state, some get the session object (which contains the access token) in response to things like prompting for permissions.

Here is one simple example:

<input id="AccessToken" type="text" value="" />
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        FB.init({ 
            appId: 'insert your appID value here', 
            cookie: true, 
            xfbml: true, 
            status: true });

        FB.getLoginStatus(function (response) {
            if (response.authResponse) {
                $('#AccessToken').val(response.authResponse.accessToken);
            } else {
                // do something...maybe show a login prompt
            }
        });

    });
</script>

Once you have the access token captured client side you can post it in a form or ajax call to the server.

Another thing to check is your environment. Facebook will look to see if the domain making these api calls matches up with your app settings. Try it on port 80, and with a real domain with DNS that points at your server (not localhost). Use DynDns or some other such service to setup a domain name and DNS entry that points at your dev box. Run IIS on your dev box with your app on port 80 and the firewalls/router port forwarding setup so you can serve your pages on port 80 on a real domain that matches your Facebook app settings.

Retrieve Access Token Using Javascript API

1 Answers