Standard MVC 5 Web Application Using the Facebook JS SDK

While working on a current project — which is very much Facebook integrated, but not so much Facebook centric — the decision was made to not use the Facebook template, but instead use the standard MVC template, with the Facebook JS SDK. Here are a few things about the application you should understand before we continue:

  • It is a Facebook game, so if you come in from Facebook, it’s hosted in the Canvas
  • It is also a stand-alone app, and can be accessed by a standard URL. If you come in this way, It still needs to support login via Facebook, but is not canvased.
  • I wanted to to use the standard OWIN security for login, but automatically login when coming into the application from the Facebook Canvas.
  • By clicking a link from a wall post, a friend can play the same game you just played.
  • I wanted to test with both sandbox and non-sanbox modes.

Setting up the Environment

There are many and more articles on the web about how to setup a Facebook application. I will not bother rehashing it, but suggest you read an article about it, like this one, or search Google for it.

I also, in order to get out of the sandbox for some extra testing, had to get SSL working on my dev box. I use IIS Express and was able to follow this handy guide provided by Scott Hanselman and it was painless and quick.

Now that the application is ready, and my environment is setup, then it’s just a matter of writing the code.

Creating the Landing Page

For the landing page, I started out by simply adding an action to an existing controller.

There really is not much going on there, it just preps everything before rendering the view. The view then does all of the work. This landing page is configured as the Canvas Url in the Properties on the Facebook Application Dashboard. Note the “game” being pulled from the QueryString. This is to support the scenario where a user has accepted a challenge and is being brought in to play the exact same game as their friend. Facebook has some outstanding documentation on how to post a challenge to the user’s wall using the Feed Dialog. I just augment the link that I’m sending into the dialog to include the ?game=xxx GET parameters.

The view for this landing page is some very basic HTML wrapping the more important JavaScript so that it can handle everything that Facebook may throw at it.

First, I had to set it up to handle executing an external login using the existing /Account/ExternalLogin action (part of the default Account Controller). So to accomplish this, I simply set up a form with all hidden components. When the time is right it will be submitted via JavaScript.

Note that I’m passing the ReturnUrl from my controller so once the user is logged in, they proceed to the appropriate action. Also notice the <div id=”fb-root”></div>. This is important for Facebook, but they made their script smart enough to write it in if you leave it out.

Next I added the magic Facebook Script. This too is well documented in the Facebook developer portal. It breaks up into 3 parts. The code offered on the documentation (linked above) covers parts 1 and 3, it’s up to you as the developer to create the middle part.

Part 1 is the call to initialize the Facebook SDK

Part 3 is the bit that actually loads up the SDK itself

The middle part however, is where it gets fun. This is where the meat of the Facebook integration comes into play. Part two also, in my case, included an additional method in my controller that takes an HTTP Post and persists the user’s Facebook information to session state. While this article will not make use of it, you will see a call to it in the code below.

First I set up the subscription for the auth.authResponseChange event. When this connects successfully, I get the user’s uid and access token fed back to me. Then I pop up a friendly little bootstrap modal to tell the user I’m connecting them to Facebook, just before authorizing their information back to my server.

At this point, if everything is OK then we simply handle the complete promise for the ajax call in the snippet above. Notice that I am using the ReturnUrl that we stuffed into the ViewBag earlier in this code as well.

Also notice that I’m handling the scenario where the user may have already been signed into my game, but not authorized via Facebook before. I did this by nestling the value of User.Identity.IsAuthenticated as a lower case string into a JavaScript variable. Next I simply check that value, and if they are not authenticated, I submit my form – The one I mentioned in the beginning of the article.

If they are authenticated, then we should be golden. Redirect them if they asked to be, and if not, then simply hide the “Connecting to Facebook” popup.

This code only shows the handling of the “complete” promise, but of course we handle the failure and error promises too. For these I simply hide the dialog (if it’s not already hidden) and post an alert for the user. I do not show this in the code samples, but it’s as simple as it sounds.

Posting the Challenge

I’ve also included my code for posting the challenge to a user’s Facebook wall. Note your application has to be configured to support the correct permissions for this activity. The page that is posting the message also has parts 1 and 2 of the Facebook JS SDK setup. The only other code it requires is a single method call.

Summary

It took a little time and some trial and error to get it all figured out, but integrating a web app with the JavaScript SDK is pretty easy. Facebook already provides you with big chunks of code. Using those — along with some creative utilization of the tools afforded to you by MVC — you should find that working through a non-facebook-template site can still be tacked in pretty effectively.

Leave a Reply

Your email address will not be published. Required fields are marked *