Skip to content


Subversion checkout URL

You can clone with
Download ZIP
100644 158 lines (108 sloc) 8.292 kb
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
1 Title: Facebook Connect with Node
2 Author: Dominiek ter Heide
3 Date: Thu Mar 18 2010 22:00:00 GMT+0000 (UTC)
6af0f22 @creationix Update the format of the facebook connect article.
4 Node: v0.1.31
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
6 A big part of building a new web application is repurposing common patterns, one such pattern is the ability for users to sign in and out. One way of solving this quickly is by using Facebook Connect.
8 ## Background
10 Unlike some APIs, the Facebook API is very Javascript friendly, but unfortunately it can be very time consuming to go through the maze of misdirected Facebook documentation. So in order to make Facebook integration quick and easy, I've wrapped a lot of under-the-hood code into a plugin called [node-facebook][]. This plugin also provides examples and routines to get your Facebook Canvas application running quickly with Node, however, this article will focus on the FB Connect part.
12 >Facebook's developer tools are increasingly going into the direction of more Javascript on the client-side. I also have a strong preference of offloading certain logic to the client-side. This article will also attempt to follow [that direction][].
14 ## Communication
16 As you can see in this totally unnecessary diagram, most of the integration takes place on the client-side:
18 ![Awesome Diagram]( "Awesome Diagram")
20 ## Dependencies
6efc92f Added NodeJS version and Express version under 'dependencies'
Dominiek ter Heide authored
22 _Note: For this article I've been using NodeJS version 0.1.31 and Express version 0.7.1_
03f623a Added NodeJS version under 'dependencies'
Dominiek ter Heide authored
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
24 You need to install both [NodeJS][] and the [Express Web Framework][]. Assuming you've installed NodeJS, you can easily include express into your Git project by adding a submodule:
26 mkdir -p lib/support
27 git submodule add git:// lib/support/express
28 cd lib/support/express
29 git submodule init
30 git submodule update
32 Second, you need to include [Hashlib][] into your project and compile it. Hashlib is a library that provides cryptographic routines like MD5:
34 git submodule add git:// lib/support/hashlib
35 cd lib/support/hashlib
36 make
38 ## 1. Registering your Facebook Application
40 In order to use Facebook Connect, you need to [register a new Facebook application] and set the FB Connect URL to the root of your application:
42 ![Setting your FB Connect URL]( "Setting your FB Connect URL")
45 ## 2. Setting up your Project
47 For Facebook integration you need to place these three files into your project folder:
49 1. [facebook.js][] - plugin for the Express framework - to be placed in /lib
50 2. [jquery.facebook.js][] - a simple jQuery plugin to interface with the [Facebook JS library][] - to be placed in /public/javascripts
51 3. [xd_receiver.htm][] - used by Facebook for opening up a [Cross-domain Communication Channel][] - to be placed in /public
53 After adding the dependencies and placing these files, your directory structure should look like this:
55 myproject
56 |-- app.js /* new file */
57 |-- lib
58 | |-- support
59 | | |-- express
60 | | `-- hashlib
61 | |-- facebook.js
62 `-- public
63 |-- index.html /* new file */
64 |-- xd_receiver.htm
65 `-- javascript
66 `-- jquery.facebook.js
68 To make our application work, we only need to implement two files: index.html and app.js. That's right, we're only using AJAX calls and static files.
70 ## 3. In the Browser
72 The provided jQuery plugin provides the following functions that we'll be using:
74 * **fbInit** - initialize the JS lib and set up the cross-communication channel
75 * **fbConnect** - invoke the connect procedure and to synchronize sessions and profile information with our backend
76 * **fbLogout** - logout from both the Facebook Application and our NodeJS application
77 * **fbIsAuthenticated** - check whether a user is logged in or not
79 First we start out with a simple skeleton that loads jQuery and the Facebook JS library. Please note that you need the div named *fb-root* right after the body tag for Facebook's lib to work:
81 <html>
82 <head>
83 <script type="text/javascript" src=""></script>
84 <script type="text/javascript" src="/javascripts/jquery.facebook.js"></script>
85 </head>
87 <body>
88 <div id="fb-root"></div>
89 <script type="text/javascript" src=""></script>
91 </body>
92 </html>
895d56d @creationix Remove some redundant links.
94 Now let's implement a basic UI:
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
6af0f22 @creationix Update the format of the facebook connect article.
96 <facebook-connect/index.html>
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
98 ## 4. On the Server
100 The [Express][] plugin is initialized like any other plugin in the environment configuration routine, but takes your Facebook API key and Secret as mandatory initialization arguments:
102 use(require('facebook').Facebook, {
103 apiKey: 'FACEBOOK_API_KEY',
104 apiSecret: 'FACEBOOK_API_SECRET'
105 })
107 Next we need to implement 3 AJAX actions to make jquery.facebook.js work:
109 * **GET /fbSession** - Is the current user logged in? Or is there a cookie/param present I can use to authenticate?
110 * **POST /fbSession** - Update additional information about the user (name, picture, etc)
111 * **POST /fbLogout** - Called after logout from the Facebook Application took place
895d56d @creationix Remove some redundant links.
113 Here is an example Express application that uses no persistent storage:
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
6af0f22 @creationix Update the format of the facebook connect article.
115 <facebook-connect/app.js>
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
117 >The verification of Facebook data by the server-side is done by using the Application Secret and the signature that's sent along with the data. First, all parameters and cookies are put together in one string and then the Application Secret is appended to it. The MD5 hash of this string should match the signature that's included. [more about verifying the signature][]
119 In any subsequently added action, you can access the Facebook Session simply like this:
121 get('/hello', function () {
122 var fbSession = this.fbSession()
123 return 'Hello ' + ' user ' + fbSession.userId + '!';
124 })
126 ## 6. Further Development
128 In this article we went into the direction of putting a lot of UI flow and controller logic into the browser. This can be quite counter-intuitive. As a Rails-programmer and former RJS lover, I can attest to that. However, while there are still remaining issues like SEO and accessibility, this approach allows the server to really focus on data modelling/routing and has numerous scaling benefits.
130 All examples in this article and more can be found on the [node-facebook repository][] I created. If you run into any obstacles, feel free to [contact me][] or fork the code. I hope to soon write a similar plugin for Twitter's OAUTH based login.
132 ## Appendix A: Facebook Troubleshooting Checklist
134 Debugging Facebook Application problems can be a real pain in the neck, here is a simple checklist distilled from many frustrating mind-cycles:
136 * Are you sure xd_receiver.htm is in place and being accessed?
137 * Are you sure the <div id="root"></div> element is present in the body?
138 * If you are using Safari with iFrames, there are some [cookie hacks][] you need to do
139 * Are cookies being set successfully after FB connect?
140 * Are you sure you're using the correct API keys?
142 [NodeJS]:
143 [Express]:
144 [Express Web Framework]:
145 [that direction]:
146 [node-facebook]:
147 [Hashlib]:
148 [register a new Facebook application]:
149 [Facebook JS library]:
150 [facebook.js]:
151 [jquery.facebook.js]:
152 [xd_receiver.htm]:
153 [Cross-domain Communication Channel]:
154 [cookie hacks]:
155 [more about verifying the signature]:
156 [node-facebook repository]:
157 [contact me]:
Something went wrong with that request. Please try again.