Skip navigation

Monthly Archives: December 2012

In recent ASP.NET MVC update, we introduce ASP.NET MVC Facebook Template. In following article, I’m going to discuss one of the features come with the template.

What is Realtime Update?

Realtime update is a Facebook service provide you the capability to subscribe to the changes in the data. For example, you can listen to the changes of user’s Facebook likes. That expands your app’s capability.

How does Realtime Update work?

In short, Facebook requires your service to expose two endpoints. One accepts GET request, which is used to validate your service’s existence. And the other accepts POST request, which is receiving actually data regarding to changes.
The best way to learn Facebook Realtime Update is to read Facebook’s document: https://developers.facebook.com/docs/reference/api/realtime/

What’s in the box?

In template we already have a Realtime Update controller in place to help customer set up their Realtime Update endpoint easily. The controller UserRealtimeUpdateController derives from abstract controller FacebookRealtimeUpdateController. The latter is an abstract WebAPI controller ready to accept GET and POST request.

The GET request is taken care of. What you need to do is to set “Verify Token” to corresponding app setting web.config.

In terms of the POST request, you need to finish the HandleUpdateAsync method. The method is called whenever an update POST is sent from Facebook service.

A step by step guide

Following guides assume you already have a running Facebook App hosted publicly. Please note that you need to have your Realtime Update Endpoints exposed to public so that Facebook Realtime Service and reach to it.

Subscribe to changes

There are two ways to subscribe to a class of objects: you can do manually from App Settings or you can do programmatically by codes. Here let’s pick the easy one. Go to the Realtime Updates setting page under Facebook Apps Setting.

pic1
Add a subscription. You need to choose what object you want to observe (among the five options Facebook currently offer.) and the fields to listen to. You need to give a call back URL pointing to your Realtime Update endpoint. The endpoint accept both GET and POST request. Then the last but not least, you shall choose a “Verify Token”, which serves as the common secret for your App to identify the incoming request’s source.

pic2

Validate your endpoint

Now if you click “Test”, you’ll observe an error:

pic3

Why? Because Facebook send a GET request to your endpoint with a challenge value. It expects your endpoint to return the exact same value to prove its identity. (Here’s what the GET looks like http://fbrealtime.azurewebsites.net/api/realtime?hub.mode=subscribe&hub.challenge=742982751&hub.verify_token=sample_token)

So you need to implement your Realtime Update Endpoint now. If you create your project from Facebook template you will see following controller:

public class UserRealtimeUpdateController : FacebookRealtimeUpdateController
{
private readonly static string UserVerifyToken = ConfigurationManager.AppSettings["Facebook:VerifyToken:User"];

public override string VerifyToken
    {
        get
        {
return UserVerifyToken;
        }
    }

public override Task HandleUpdateAsync(ChangeNotification notification)
    {
        if (notification.Object == "user")
        {
foreach (var entry in notification.Entry)
            {
                // Your logic to handle the update here
            }
        }

throw new NotImplementedException();
    }
}

It is not completed. A few things to do.

    1. Remove the exception throwing, clean up the HandleUpdateAsync. Anything is better than exception.
    2. Go to your web.config. Set Verify Token to “Facebook:VerifyToken:User”.

Publish your site again. By the way, based on your WebAPI route, you probably want to double check your callback URL setting. Now go back to your Facebook App Settings and save the Realtime Update Subscription.

You done for the set up.

To expand your Realtime Update Controller you really just need exam the ChangeNotification objects, structure of which is mimic the JSON value from Facebook.

Potential difficulties

Realtime Update is hard to debug, mainly because it is passively invoked by Facebook not your codes. And if your dev box is not public to internet (for example behind a Firewall like most of the cooperation) you not able to debug your codes directly. As a result you have to rely on trace and logs to find out what’s happened.

Here’s some potential difficulties you need to deal with.

  1. The entire message loops includes a Facebook callback. It is very critical to make sure your service is reachable to Facebook. It is recommended to host your service in a public host and enable web API tracing for debugging.
  2. Don’t forget to set verify token.
  3. Your app shall have the permission to read the fields you subscribe to first. Otherwise, even service pass the GET challenge, it will never receive any POST update.
  4. Realtime Update is not very “Realtime”. Facebook queue the changes and send update a few minutes after changes are made. So be patient.
Advertisements

In the recent ASP.NET MVC refresh we introduced a new template — the Facebook Template. You can create Facebook App from it easily. I believe there are articles introducing the template, for example this post from Yao. In following post, I’d like to go through how to host a Facebook App in Windows Azure Web Site

I assume you’ve already read the tutorial and begin with build your App from the template, you shall eventually be able to run your App locally. You probably is still using IIS Express without SSL turning on. You’re using Local DB and the database is fulfilled with random data your generated during test.

Secure Canvas URL

There is a couple of things you may want to prepare locally.

First you need to ensure your application can run under SSL. Although Facebook allows you not to host your web site under SSL when it is in sandbox mode, you have to leave sandbox once your App is open to publish. As a result, Facebook will hit your secure canvas URL.

You can tried out SSL easily on your local machine by enable SSL.

Enable SSL

After that you should fill the SSL URL in Facebook App Setting

Update Secure Canvas URL

Now run your App. The iFrame will load page from HTTPS URL. If you’re using IE, you will see a warning. That is because IIS Express’s certificate is not trusted. I will discuss the topic in another post, but for now you can simple click “Show all content” to continue.

If your app works find at this point, your secure canvas URL preparation is done.

Upload your site to Azure Web Site

Azure Web Site was added in June 2012. For all of the options provided in Windows Azure to host web site, I like Azure Web Site the most. It is simple, light and powerful enough to deal with most of the cases.

Here’s a tutorial of how to create an Azure Web Site. Remember Facebook App is also an MVC web application. So instead of creating an Internet Application, you create a Facebook Application.

The rest of the part are largely the same. The tutorial publish the sites through Visual Studio Web Deploy and it works great. However, my favorite is publishing a website with Git.

Manage your App secret

Facebook App Secret is the common secret shared between your App and Facebook. You don’t want it to be compromised. But if that happens, you can reset the App Secret.

App Secret Reset

To update your secret to your App is extremely easy in Windows Azure Web Site. You don’t need to change web.config, you don’t need to redeploy. What your need to do is in the Azure Web Site’s CONFIG page

Config Tab

Find the app setting and update Facebook:AppSecret

Appsettings