{"id":2064,"date":"2012-10-31T14:20:00","date_gmt":"2012-10-31T14:20:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2012\/10\/31\/deploying-your-first-facebook-app-on-azure-using-asp-net-mvc-facebook-template\/"},"modified":"2012-10-31T14:20:00","modified_gmt":"2012-10-31T14:20:00","slug":"deploying-your-first-facebook-app-on-azure-using-asp-net-mvc-facebook-template","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/deploying-your-first-facebook-app-on-azure-using-asp-net-mvc-facebook-template\/","title":{"rendered":"Deploying your first Facebook App on Azure using ASP.NET MVC Facebook Template"},"content":{"rendered":"

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

Here is the tutorial<\/a> to learn more about this template. In this post, I won\u2019t be going too deep into the implementation of the app, instead I\u2019ll focus on the deployment of the app on Azure.<\/p>\n

Disclaimer: This template is still in a preview state. The APIs could change significantly before the final release.<\/p>\n

Prerequisites<\/h2>\n

Visual Studio 2012 + Azure SDK<\/a><\/p>\n

ASP.NET Fall 2012 Update (preview)<\/a><\/p>\n

A Windows Azure account<\/a><\/p>\n

A Facebook account<\/a><\/p>\n

Getting started<\/h2>\n

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.<\/p>\n

\"Capture\"<\/p>\n

Step 1: Create a new MVC Facebook template<\/h2>\n

Go to New Project<\/strong> \u2013> ASP.NET MVC 4 Web Application<\/strong>, and then select the Facebook Application<\/strong> template.<\/p>\n

\"image\"<\/p>\n

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.<\/p>\n

\"image\"<\/p>\n

Step 2: Create a new App on Facebook<\/h2>\n

Login into [https:\/\/developers.facebook.com\/apps][7] to create a new application. The \u201cApp Name\u201d needs to be unique and you can provide the optional \u201cApp Namespace\u201d if needed.<\/p>\n

\"image\"<\/p>\n

Once the app is created, it will be assigned an App ID and an App Secret.<\/p>\n

\"image\"<\/p>\n

You could paste these values into the Web.config of your new Facebook project created in Step 1. However, it\u2019s recommended that you specify them on Azure (Step 4) instead of hard coding<\/strong> them in the source.<\/p>\n

\"image\"<\/p>\n

Step 3: Create a new Web Site on Windows Azure<\/h2>\n

Next, we need to create a new \u201cWeb Site\u201d for the application.<\/p>\n

\"image\"<\/p>\n

Step 4: Configure your application on Azure<\/h2>\n

Once the new \u201cWeb Site\u201d is created, click on it and select \u201cCONFIGURE\u201d to provide the app settings. Here we\u2019ll add the following settings. Make sure you SAVE the settings.<\/p>\n\n\n\n\n\n
\n key<\/strong>\n <\/td>\n\n value<\/strong>\n <\/td>\n<\/tr>\n
\n Facebook.AppId\n <\/td>\n\n \u201cApp ID\u201d from Facebook site\n <\/td>\n<\/tr>\n
\n Facebook.AppSecret\n <\/td>\n\n \u201cApp Secret\u201d from Facebook site\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u00a0<\/p>\n

\"image\"<\/p>\n

Step 5: Configure your application on Facebook<\/h2>\n

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

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

\"image\"<\/p>\n

Step 6: Import the \u201cpublish profile\u201d and publish your Facebook App to Azure<\/h2>\n

Now everything should be ready to go. For this last step, you need to download the \u201cpublish profile\u201d of your Web Site in Azure.<\/p>\n

\"image\"<\/p>\n

Right click on the project and select Publish\u2026<\/p>\n

\"image\"<\/p>\n

Import the \u201cpublish profile\u201d you\u2019ve downloaded previously and hit Publish.<\/p>\n

\"image\"<\/p>\n

The result<\/h2>\n

You can now browse to the Canvas Page to see the app. The URL of the Canvas Page is listed on your Facebook portal.<\/p>\n

\"image\"<\/p>\n

Upon the first time you access the app, the following dialog will appear asking for permissions to access your basic info and email address.<\/p>\n

\"image\"<\/p>\n

Click \u201cGo to App\u201d to grant the permissions, and you should see the home page showing your basic info and some of your friends.<\/p>\n

\"Capture\"<\/p>\n

Congratulations, you just published your first Facebook application!<\/p>\n

Thanks,<\/p>\n

Yao<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":453,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7333,7414,7415],"class_list":["post-2064","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-asp-net-mvc","tag-facebook-application","tag-windows-azure"],"acf":[],"blog_post_summary":"

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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/453"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=2064"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2064\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=2064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=2064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=2064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}