facebook - 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?

Answer 1

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.