Browse files

Update the format of the facebook connect article.

  • Loading branch information...
1 parent 42a499f commit 6af0f22c03c9c42a9d542535e956772652bf9502 @creationix committed Apr 15, 2010
View
125 articles/facebook-connect.markdown
@@ -1,6 +1,7 @@
Title: Facebook Connect with Node
Author: Dominiek ter Heide
Date: Thu Mar 18 2010 22:00:00 GMT+0000 (UTC)
+Node: v0.1.31
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.
@@ -22,7 +23,6 @@ _Note: For this article I've been using NodeJS version 0.1.31 and Express versio
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:
- #!sh
mkdir -p lib/support
git submodule add git://github.com/visionmedia/express.git lib/support/express
cd lib/support/express
@@ -31,7 +31,6 @@ You need to install both [NodeJS][] and the [Express Web Framework][]. Assuming
Second, you need to include [Hashlib][] into your project and compile it. Hashlib is a library that provides cryptographic routines like MD5:
- #!sh
git submodule add git://github.com/brainfucker/hashlib.git lib/support/hashlib
cd lib/support/hashlib
make
@@ -79,7 +78,6 @@ The provided jQuery plugin provides the following functions that we'll be using:
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:
- #!html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
@@ -95,64 +93,7 @@ First we start out with a simple skeleton that loads jQuery and the Facebook JS
Now let's implement a basic UI ([index.html][]):
- #!html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- <script type="text/javascript" src="/javascripts/jquery.facebook.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $.fbInit('FACEBOOK_API_KEY');
-
- // FB Connect action
- $('#fb-connect').bind('click', function () {
- $.fbConnect({'include': ['first_name', 'last_name', 'name', 'pic']}, function (fbSession) {
- $('.not_authenticated').hide();
- $('.authenticated').show();
- $('#fb-first_name').html(fbSession.first_name);
- });
- return false;
- });
-
- // FB Logout action
- $('#fb-logout').bind('click', function () {
- $.fbLogout(function () {
- $('.authenticated').hide();
- $('.not_authenticated').show();
- });
- return false;
- });
-
- // Check whether we're logged in and arrange page accordingly
- $.fbIsAuthenticated(function (fbSession) {
- // Authenticated!
- $('.authenticated').show();
- $('#fb-first_name').html(fbSession.first_name);
- }, function () {
- // Not authenticated
- $('.not_authenticated').show();
- });
-
- });
- </script>
- </head>
-
- <body>
- <div id="fb-root"></div>
- <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
-
- <div id="my-account">
- <div class="authenticated" style="display: none">
- Hi there <span id="fb-first_name"></span>!
- <a href="#" id="fb-logout">Logout</a>
- </div>
- <div class="not_authenticated" style="display: none">
- <a href="#" id="fb-connect">Connect with Facebook</a>
- </div>
- </div>
- </body>
- </html>
+<facebook-connect/index.html>
## 4. On the Server
@@ -171,67 +112,7 @@ Next we need to implement 3 AJAX actions to make jquery.facebook.js work:
Here is an example Express application that uses no persistent storage ([app.js][]):
- require.paths.unshift(__dirname + '/../../lib')
- require.paths.unshift(__dirname + '/../../lib/support/express/lib')
- require.paths.unshift(__dirname + '/../../lib/support/hashlib/build/default')
-
- require('express')
- require('express/plugins')
-
- configure(function(){
- use(MethodOverride)
- use(ContentLength)
- use(Cookie)
- use(Session)
- use(Logger)
- use(require('facebook').Facebook, {
- apiKey: 'FACEBOOK_API_KEY',
- apiSecret: 'FACEBOOK_API_SECRET'
- })
- set('root', __dirname)
- })
-
- // Called to get information about the current authenticated user
- get('/fbSession', function(){
- var fbSession = this.fbSession()
-
- if(fbSession) {
- // Here would be a nice place to lookup userId in the database
- // and supply some additional information for the client to use
- }
-
- // The client will only assume authentication was OK if userId exists
- this.contentType('json')
- this.halt(200, JSON.stringify(fbSession || {}))
- })
-
- // Called after a successful FB Connect
- post('/fbSession', function() {
- var fbSession = this.fbSession() // Will return null if verification was unsuccesful
-
- if(fbSession) {
- // Now that we have a Facebook Session, we might want to store this new user in the db
- // Also, in this.params there is additional information about the user (name, pic, first_name, etc)
- // Note of warning: unlike the data in fbSession, this additional information has not been verified
- fbSession.first_name = this.params.post['first_name']
- }
-
- this.contentType('json')
- this.halt(200, JSON.stringify(fbSession || {}))
- })
-
- // Called on Facebook logout
- post('/fbLogout', function() {
- this.fbLogout();
- this.halt(200, JSON.stringify({}))
- })
-
- // Static files in ./public
- get('/', function(file){ this.sendfile(__dirname + '/public/index.html') })
- get('/xd_receiver.htm', function(file){ this.sendfile(__dirname + '/public/xd_receiver.htm') })
- get('/javascripts/jquery.facebook.js', function(file){ this.sendfile(__dirname + '/public/javascripts/jquery.facebook.js') })
-
- run()
+<facebook-connect/app.js>
>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][]
View
61 articles/facebook-connect/app.js
@@ -0,0 +1,61 @@
+require.paths.unshift(__dirname + '/../../lib')
+require.paths.unshift(__dirname + '/../../lib/support/express/lib')
+require.paths.unshift(__dirname + '/../../lib/support/hashlib/build/default')
+
+require('express')
+require('express/plugins')
+
+configure(function(){
+ use(MethodOverride)
+ use(ContentLength)
+ use(Cookie)
+ use(Session)
+ use(Logger)
+ use(require('facebook').Facebook, {
+ apiKey: 'FACEBOOK_API_KEY',
+ apiSecret: 'FACEBOOK_API_SECRET'
+ })
+ set('root', __dirname)
+})
+
+// Called to get information about the current authenticated user
+get('/fbSession', function(){
+ var fbSession = this.fbSession()
+
+ if(fbSession) {
+ // Here would be a nice place to lookup userId in the database
+ // and supply some additional information for the client to use
+ }
+
+ // The client will only assume authentication was OK if userId exists
+ this.contentType('json')
+ this.halt(200, JSON.stringify(fbSession || {}))
+})
+
+// Called after a successful FB Connect
+post('/fbSession', function() {
+ var fbSession = this.fbSession() // Will return null if verification was unsuccesful
+
+ if(fbSession) {
+ // Now that we have a Facebook Session, we might want to store this new user in the db
+ // Also, in this.params there is additional information about the user (name, pic, first_name, etc)
+ // Note of warning: unlike the data in fbSession, this additional information has not been verified
+ fbSession.first_name = this.params.post['first_name']
+ }
+
+ this.contentType('json')
+ this.halt(200, JSON.stringify(fbSession || {}))
+})
+
+// Called on Facebook logout
+post('/fbLogout', function() {
+ this.fbLogout();
+ this.halt(200, JSON.stringify({}))
+})
+
+// Static files in ./public
+get('/', function(file){ this.sendfile(__dirname + '/public/index.html') })
+get('/xd_receiver.htm', function(file){ this.sendfile(__dirname + '/public/xd_receiver.htm') })
+get('/javascripts/jquery.facebook.js', function(file){ this.sendfile(__dirname + '/public/javascripts/jquery.facebook.js') })
+
+run()
View
58 articles/facebook-connect/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+ <script type="text/javascript" src="/javascripts/jquery.facebook.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ $.fbInit('FACEBOOK_API_KEY');
+
+ // FB Connect action
+ $('#fb-connect').bind('click', function () {
+ $.fbConnect({'include': ['first_name', 'last_name', 'name', 'pic']}, function (fbSession) {
+ $('.not_authenticated').hide();
+ $('.authenticated').show();
+ $('#fb-first_name').html(fbSession.first_name);
+ });
+ return false;
+ });
+
+ // FB Logout action
+ $('#fb-logout').bind('click', function () {
+ $.fbLogout(function () {
+ $('.authenticated').hide();
+ $('.not_authenticated').show();
+ });
+ return false;
+ });
+
+ // Check whether we're logged in and arrange page accordingly
+ $.fbIsAuthenticated(function (fbSession) {
+ // Authenticated!
+ $('.authenticated').show();
+ $('#fb-first_name').html(fbSession.first_name);
+ }, function () {
+ // Not authenticated
+ $('.not_authenticated').show();
+ });
+
+ });
+ </script>
+ </head>
+
+ <body>
+ <div id="fb-root"></div>
+ <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
+
+ <div id="my-account">
+ <div class="authenticated" style="display: none">
+ Hi there <span id="fb-first_name"></span>!
+ <a href="#" id="fb-logout">Logout</a>
+ </div>
+ <div class="not_authenticated" style="display: none">
+ <a href="#" id="fb-connect">Connect with Facebook</a>
+ </div>
+ </div>
+ </body>
+</html>
View
5 skin/public/dandelion.css
@@ -158,6 +158,8 @@ body {
display: block;
}
#main pre code {
+ overflow-x: auto;
+ max-height: 600px;
font-size: 12px;
line-height: 1.4em;
display: block;
@@ -200,11 +202,12 @@ body {
line-height: 1.6em;
}
#main .code-link {
+ position: relative;
float: right;
font-size: 12px;
line-height: 12px;
height: 12px;
- margin: 0 -10px;
+ margin: 0 -10px -24px;
background-color: #ffffff;
border: 1px solid #aaaaaa;
padding: 5px 10px;
View
7 skin/public/dandelion.less
@@ -89,7 +89,7 @@ body {
img {
width: 30px;
height: 30px;
- float:right;
+ float: right;
margin: 3px 0 0 5px
}
.date {
@@ -150,6 +150,8 @@ body {
margin: 0 -10px;
display: block;
code {
+ overflow-x: auto;
+ max-height: 600px;
font-size: 12px;
line-height: 1.4em;
display: block;
@@ -179,11 +181,12 @@ body {
line-height: 1.6em;
}
.code-link {
+ position: relative;
float: right;
font-size: 12px;
line-height: 12px;
height: 12px;
- margin: 0 -10px;
+ margin: 0 -10px -24px;
background-color: #fff;
border: 1px solid #AAA;
padding: 5px 10px;

0 comments on commit 6af0f22

Please sign in to comment.