Deploying your first Facebook App on Azure using ASP.NET MVC Facebook Template

Deploying your first Facebook App on Azure using ASP.NET MVC Facebook Template

Rate This
  • Comments 5

Today we announced the preview for ASP.NET Fall 2012 Update and one of the cool features we added to the update is the Facebook Application Template. This template includes a new library that makes it easier to develop Facebook applications using ASP.NET MVC.

Here is the tutorial to learn more about this template. In this post, I won’t be going too deep into the implementation of the app, instead I’ll focus on the deployment of the app on Azure.

Disclaimer: This template is still in a preview state. The APIs could change significantly before the final release.

Prerequisites

Visual Studio 2012 + Azure SDK

ASP.NET Fall 2012 Update (preview)

A Windows Azure account

A Facebook account

Getting started

Here we are going to deploy the project created from the Facebook Application template to Azure. Once the project is deployed, the app should display a page showing the authenticated user and some of his/her friends.

Capture

Step 1: Create a new MVC Facebook template

Go to New Project –> ASP.NET MVC 4 Web Application, and then select the Facebook Application template.

image

Once the project is created, you can open HomeController.cs to get an idea of what it does. First, note that the Index action has a [FacebookAuthorize] attribute which will ensure that the request is signed (coming from Facebook). On the [FacebookAuthorize] attribute you can also specify additional permissions that you would like the user to grant to your application. Second, the parameters (user, userFriends) on the action are populated (by custom model binders) when the action is invoked so you can just display them on the view.

image

Step 2: Create a new App on Facebook

Login into https://developers.facebook.com/apps to create a new application. The “App Name” needs to be unique and you can provide the optional “App Namespace” if needed.

image

Once the app is created, it will be assigned an App ID and an App Secret.

image

You could paste these values into the Web.config of your new Facebook project created in Step 1. However, it’s recommended that you specify them on Azure (Step 4) instead of hard coding them in the source.

image

Step 3: Create a new Web Site on Windows Azure

Next, we need to create a new “Web Site” for the application.

image

Step 4: Configure your application on Azure

Once the new “Web Site” is created, click on it and select “CONFIGURE” to provide the app settings. Here we’ll add the following settings. Make sure you SAVE the settings.

key value
Facebook.AppId “App ID” from Facebook site
Facebook.AppSecret “App Secret” from Facebook site

 

image

Step 5: Configure your application on Facebook

Now we need to provide the Canvas URL. Here you can paste your Azure site URL, e.g. http://myfirstapplication.azuresites.net/.

Since October 1st, Facebook expects your canvas app to be hosted at a secure address (HTTPS). Thus you need to specify the Secure Canvas URL. If you don’t have a secure address yet, just put something like https://myfirstapplication.azuresites.net/ and enable Sandbox mode. Make sure you save the changes.

image

Step 6: Import the “publish profile” and publish your Facebook App to Azure

Now everything should be ready to go. For this last step, you need to download the “publish profile” of your Web Site in Azure.

image

Right click on the project and select Publish…

image

Import the “publish profile” you’ve downloaded previously and hit Publish.

image

The result

You can now browse to the Canvas Page to see the app. The URL of the Canvas Page is listed on your Facebook portal.

image

Upon the first time you access the app, the following dialog will appear asking for permissions to access your basic info and email address.

image

Click “Go to App” to grant the permissions, and you should see the home page showing your basic info and some of your friends.

Capture

Congratulations, you just published your first Facebook application!

Thanks,

Yao

  • Great to see the common app type of Facebook apps being made a focal point in ASP.NET. Some feedback on the code in the project template aspnetwebstack.codeplex.com/.../400421

  • Ich finde meine originale Facebookseite nicht?????

  • I am asp.net developer and thanks for sharing Great tutorial and it's really helpful to me develop Facebook applications using ASP.NET MVC.

  • I have used Facebook C# SDK, i have been very disappointed with it. Lack of functionality, every change is a breaking change. in so many words : it sucks!!!

  • Great tutorial i can follow this steps to make my first app on facebook..good for asp.net web developers.. and <a href=http://www.maksa.in>web development company</a> who wants to create that kind of app.

Page 1 of 1 (5 items)