Facebook Developer Toolkit 3.0 ASP.NET MVC Sample
Posted by: Clarity Blogs: ASP.NET,
on 06 Oct 2009 |
View original | Bookmarked: 0 time(s)
Its almost time for the long awaited release of the Facebook Developer Toolkit 3.0, the most awesomest release of the toolkit to date. The new version has great support for ASP.NET, ASP.NET MVC, Silverlight, WinForms, WPF and basically any place you can run .NET. Ryan Powers and I worked on adding MVC support last week. (actually Ryan did all the coding, I just advised). We are going to build out more samples because that seems to have been a slight problem in previous versions.
So getting started with a Facebook ASP.NET MVC FBML canvas application.
First create a new app in Facebook. For a simple example you only need to go to the canvas section and set the Canvas Page URL and Canvas Callback URL and Render Method to FBML. I named my app FdtMvcSample.
Save your Application Secret and API Key from the Basic section somewhere. Youll need to put those in your web.config later. Now you can setup a new MVC project in Visual Studio. Well call it FdtMvcSample.
In your web.config add in your secret and API key:
1:
<appSettings>
2: <add key="Secret" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
3: <add key="ApiKey" value="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"/>
4: </appSettings>
For development of Fbml canvas apps its easiest to use IIS and put your machine in the DMZ or port forward. I use gotdns.com for dynamic DNS and set my callback Url to be my dynamic DNS name / IIS virtual directory name.
Youll need to configure your MVC project to use IIS instead of the local dev server so Facebook can call back to it. Just make sure your virtual directory name matches the callback URL directory.
In your MVC project you also need to add a reference to the Facebook.dll and Facebook.Web.Mvc.dll.
In my sample I removed most of the template items from the project. To connect with Facebook, well focus on the HomeController.cs:
1: [HandleError]
2: public class HomeController : Controller
3: {
4: private const string REQUIRED_PERMISSIONS = "read_stream,publish_stream";
5:
6: public ActionResult Index()
7: {
8: var api = this.GetApi();
9: ViewData["userId"] = api.Session.UserId;
10: return View();
11:
12: }
13:
14: //ApiKey & Secret in web.config
15: [FacebookAuthorization(IsFbml = true)]
16: public ActionResult Friends()
17: {
18: var api = this.GetApi();
19: var friends = api.Friends.GetUserObjects();
20:
21: return View(friends);
22: }
23:
24: [FacebookAuthorization(IsFbml = true, RequiredPermissions = REQUIRED_PERMISSIONS)]
25: public ActionResult Stream()
26: {
27: var api = this.GetApi();
28: var stream_data = api.Stream.Get(null, null, null, null);
29:
30: return View(stream_data.posts.stream_post);
31: }
32: }
33: }
For MVC, we added attributes to control authentication. You can specify if its Fbml or iFrame or required permissions (and API key / secret if you dont put them in the web.config) In the above code, the Index action is our public landing page and requires no authentication. The Friends action requires authentication to get the users friends names and the Stream action requires read_stream and publish_stream permission. The attribute runs before you action and redirects to the Facebook app authorization screen if needed and then redirects back to the action. One thing to note, adding permissions like that requires us to check which permissions are already granted and redirect to the prompt permission screen. Since that requires a call to Facebook each time the action is called, it would be best to get all the permissions granted on some initial landing page. Plus the user can get that out of the way upfront. If you need page specific permissions, then it would be best to use the Fbml fb:prompt-permission in your view before those actions are called. This method is fine also, but just be aware of the impact.
On the controller we added an extension method to retrieve the Api object for making making Facebook calls based on the users current Facebook session. (You can optionally pass in the key/secret if they are not in the web.config)
In this simple example, Im just passing the list of friends as the model to bind to the view.
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
2: Inherits="System.Web.Mvc.ViewPage<IList<user>>" %>
3:
4: <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
5: <h2>Friends</h2>
6: <ul>
7: <% foreach (user u in Model)
8: { %>
9: <li><%= u.name %></li>
10: <% }%>
11: </ul>
12: </asp:Content>
and in the master page I have some simple Fbml with a helper for generating the tabs.
1: <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
2: <%@ Import Namespace="FdtMvcSample.Helpers" %>
3: <div id="header">
4: <fb:tabs>
5: <%= Fbml.TabItem("Home", "Index", "Home", this.ViewContext) %>
6: <%= Fbml.TabItem("Friends", "Friends", "Home", this.ViewContext) %>
7: <%= Fbml.TabItem("Stream", "Stream", "Home", this.ViewContext) %>
8: </fb:tabs>
9: </div>
10: <div id="main_content">
11: <asp:ContentPlaceHolder ID="MainContent" runat="server" />
12: </div>
13: <div id="footer">
14: </div>
The tab helper could most likely be more elegant. I just threw that in there to see how wed do FBML helpers. We discussed making a full set of FBML helpers but that would be a significant effort and Im not how much they are needed.
So thats all the code needed to build a simple Facebook ASP.NET MVC FBML canvas application.
You can download the code here. I put the full source of the required FDT components, but after the 3.0 release you can just use the new binaries.
If you would like to see a more complex example or have questions, just post in the forums.
