Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
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.
authored
4 Node: v0.1.31
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
5
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.
7
8 ## Background
9
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.
11
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][].
13
14 ## Communication
15
16 As you can see in this totally unnecessary diagram, most of the integration takes place on the client-side:
17
18 ![Awesome Diagram](http://github.com/dominiek/node-facebook/raw/master/doc/communication.png "Awesome Diagram")
19
20 ## Dependencies
21
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
23
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:
25
26 mkdir -p lib/support
27 git submodule add git://github.com/visionmedia/express.git lib/support/express
28 cd lib/support/express
29 git submodule init
30 git submodule update
31
32 Second, you need to include [Hashlib][] into your project and compile it. Hashlib is a library that provides cryptographic routines like MD5:
33
34 git submodule add git://github.com/brainfucker/hashlib.git lib/support/hashlib
35 cd lib/support/hashlib
36 make
37
38 ## 1. Registering your Facebook Application
39
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:
41
42 ![Setting your FB Connect URL](http://github.com/dominiek/node-facebook/raw/master/doc/register_application.png "Setting your FB Connect URL")
43
44
45 ## 2. Setting up your Project
46
47 For Facebook integration you need to place these three files into your project folder:
48
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
52
53 After adding the dependencies and placing these files, your directory structure should look like this:
54
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
67
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.
69
70 ## 3. In the Browser
71
72 The provided jQuery plugin provides the following functions that we'll be using:
73
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
78
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:
80
81 <html>
82 <head>
83 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
84 <script type="text/javascript" src="/javascripts/jquery.facebook.js"></script>
85 </head>
86
87 <body>
88 <div id="fb-root"></div>
89 <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
90
91 </body>
92 </html>
93
895d56d @creationix Remove some redundant links.
authored
94 Now let's implement a basic UI:
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
95
6af0f22 @creationix Update the format of the facebook connect article.
authored
96 <facebook-connect/index.html>
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
97
98 ## 4. On the Server
99
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:
101
102 use(require('facebook').Facebook, {
103 apiKey: 'FACEBOOK_API_KEY',
104 apiSecret: 'FACEBOOK_API_SECRET'
105 })
106
107 Next we need to implement 3 AJAX actions to make jquery.facebook.js work:
108
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
112
895d56d @creationix Remove some redundant links.
authored
113 Here is an example Express application that uses no persistent storage:
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
114
6af0f22 @creationix Update the format of the facebook connect article.
authored
115 <facebook-connect/app.js>
e362616 Finished my Facebook Connect article.
Dominiek ter Heide authored
116
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][]
118
119 In any subsequently added action, you can access the Facebook Session simply like this:
120
121 get('/hello', function () {
122 var fbSession = this.fbSession()
123 return 'Hello ' + ' user ' + fbSession.userId + '!';
124 })
125
126 ## 6. Further Development
127
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.
129
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.
131
132 ## Appendix A: Facebook Troubleshooting Checklist
133
134 Debugging Facebook Application problems can be a real pain in the neck, here is a simple checklist distilled from many frustrating mind-cycles:
135
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?
141
142 [NodeJS]: http://nodejs.org
143 [Express]: http://github.com/visionmedia/express
144 [Express Web Framework]: http://github.com/visionmedia/express
145 [that direction]: http://synaptify.com/?p=613702
146 [node-facebook]: http://github.com/dominiek/node-facebook
147 [Hashlib]: http://github.com/brainfucker/hashlib
148 [register a new Facebook application]: http://facebook.com/developer
149 [Facebook JS library]: http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library
150 [facebook.js]: http://github.com/dominiek/node-facebook/raw/master/lib/facebook.js
151 [jquery.facebook.js]: http://github.com/dominiek/node-facebook/raw/master/lib/jquery.facebook.js
152 [xd_receiver.htm]: http://github.com/dominiek/node-facebook/raw/master/examples/fb_iframe/public/xd_receiver.htm
153 [Cross-domain Communication Channel]: http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel
154 [cookie hacks]: http://saizai.livejournal.com/897522.html
155 [more about verifying the signature]: http://wiki.developers.facebook.com/index.php/Verifying_The_Signature
156 [node-facebook repository]: http://github.com/dominiek/node-facebook
157 [contact me]: http://dominiek.com/
Something went wrong with that request. Please try again.