{ideas}

SDK: http://msdn.microsoft.com/en-us/windows/ee388574.aspx

Setting up the application and visual studio for debugging:

Debugging in visual studio is just possible on Iframe canvas applications, if you want to develop from localhost you need to change a bit the setup of your facebook application and apply some changes to the visual studio application’s options:

1. Canvas: you must change the “Canvas Callback URL” to http://localhost:port/ i.e: for port 63919, then our url would be http://localhost:63919
2. The render method must be Iframe, FBML doesn’t support debugging neither work on localhost since you need a host so it can be embed on facebook.
3. Edit Settings in web.config : In the project, open web.config. In <appSettings> element. Change the values for those settings to the following:

• APIKey: your API key
• Secret: your application secret
• Callback: your callback URL
• Suffix: The suffix of your canvas page URL. For example, for a site located at http://apps.facebook.com/myapp/, the suffix is myapp.

Example:

<appSettings>

<add key="APIKey" value="yourapikey" />

<add key="Secret" value="yoursecret" />

<add key="Callback" value="yourcallbackurl" />

<add key="Suffix" value="yourappsufix" />
</appSettings>

4. Set Up Project Port Number:

• • • Open the project properties (right-click the project, click Properties).
    • Click the Web tab on the left side.
    • In the Servers section on the page, select “Use Visual Studio Development Server”.
    • Select “Specific Port”, and enter the port number from your callback URL.

5. Run Application

• • • Start the Web application (click Debug menu, click Start Debugging).
    • Close the browser window that opens, since it doesn’t open your app within the Facebook context.
    • Go to your canvas page URL (http://apps.facebook.com/yourapp).
    • On the “Allow Access?” page, click “Allow”.
    • Now you can debug your application.

Authentication

To take care of authentication in facebook we are going to use the microsoft’s facebook SDK, we are going to use the CanvasIFrameMasterPage This class takes care of the entire authentication process, all you have to do is give the application your API key and secret, as we did in the web.config.

To use this class we create add references to the facebook.dll and facebook.web.dll then call them as using withing the code behind of the masterpage  after this the custom master page is set to inherit from CanvasIFrameMasterPage.

then we set the RequireLogin attribute to true so the application calls for login whenever user is logged off.

Example:

using Facebook;

using Facebook.web;

public partial class CustomMasterPage : Facebook.Web.CanvasIFrameMasterPage{

public CustomMasterPage()

{

RequireLogin = true;

}

}

Finally, each page is set to use this custom master page by setting the MasterPageFile attribute in the Page directive as well as creating a MasterType directive. The easiest way to set up the content pages is to create them through the master page: just right-click on the master page in Solution Explorer and select “Add Content Page”. The new page will have the correct MasterPageFile attribute set as well as each of the <asp:Content> elements used by the master page, although you will have to set the MasterType directive manually:

<%@ Page AutoEventWireup="true" MasterPageFile="~/CustomMasterPage.Master"
CodeBehind="Default.aspx.cs" Inherits="IFrameSample.Default" %>
<%@ MasterType VirtualPath="~/CustomMasterPage.Master" %>

After all this you have a working iframe canvas application that handles authentication, session and can be debugged on visual studio.