Lab305 Django Facebook Connect Integration Example

Integrating Facebook Connect
authentication in your Django
application
Michael Trosen
mrtrosen@lab305.com
http://www.twitter.com/mrtrosen
Lab305, LLC
http://www.lab305.com
http://djangonyc.lab305.com
Django-NYC Presentation
July 2nd, 2009

Django Reinhardt

• Prominent European Jazz Musician
• January 1910 – May 1953
• Hurt in a fire when he was 18, played solos with only 2 fingers!
• cofounded the Quintette du Hot Club de France
– Information obtained from Wikipedia

Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen

?
Sorry, wrong meeting!


• Django is a high-level Python Web
framework that encourages rapid
development and clean, pragmatic design
• Django focuses on automating as much
as possible and adhering to the DRY
(Don't Repeat Yourself) principle.
• http://www.djangoproject.com

With the Facebook Connect APIs you gain access to
● Identity

● A user's name, photos, and more
● Friends
● Data about a users friends
● Distribution
● All of the integration points within Facebook, like
stream stories and notifications
● Integration
● Profile boxes, profile tabs, and publishers, just like
apps on Facebook.


What’s involved?
• Create a Facebook Application
• Install PyFacebook
• Install Ryan Mark’s django-facebook app
• Create a new django project
• Configure your settings.py
• Configure your urls.py
• Create some templates
• Create your views
• Run your application!


Assumptions
• Using Ubuntu for development
• Already have Django installed
• You have git-core installed
• You have subversion installed
• You have mysql installed
• You install packages to /usr/local
• You have basic Django knowledge
• You know what Facebook is


Add the Facebook Developer
Application
http://www.facebook.com/developers/


Create a Facebook App
Setup new application


Create a Facebook App


Configure Facebook App

Edit Settings

IMPORTANT – API
Keys


Configure Facebook Connect
Settings

Connect URL: http://localhost:8000
Connect Logo – shown in connect dialog
box when user is validating

Create your database
• #> mysql –u root –p
• mysql> create database djangonyc;
• mysql> quit;


Install PyFacebook
• PyFacebook GitHub location
– http://github.com/sciyoshi/pyfacebook/tree/master

• PyFacebook Tutorial:
– http://wiki.developers.facebook.com/index.php/PythonPyFacebookTutorial

• Install PyFacebook
– #> git clone git://github.com/sciyoshi/pyfacebook.git
– #> cd pyfacebook
– #> python setup.py install
– Ensure it’s working, open a python shell and try:
• import facebook.djangofb


Install Ryan Mark’s
django-facebookconnect
• Website
– http://code.google.com/p/django-facebookconnect
• SVN Download
– #> svn checkout http://django-facebookconnect.googlecode.com/svn/trunk/
django-facebookconnect

• Please Note:
– I've modified the django-facebookconnect
django app to be a bit more functional and to
obtain more data from facebook. This
modified version is included in the sample
application download

Create a new Django Application
• #> django-admin startproject djangonyc
• #> django-admin startapp exampleapp

• Copy the django-facebookconnect app
into your new project
– #> cp -R /usr/local/django-facebookconnect/django-
facebookconnect/facebookconnect ./djangonyc/


Configure your settings.py
Add your apps to INSTALLED_APPS

INSTALLED_APPS = (
‘django.contrib.auth',
‘django.contrib.sessions',
‘djangonyc.exampleapp',
‘djangonyc.facebookconnect',
)


Add the FacebookConnectMiddleware to your
middleware_classes:
(order is important)

MIDDLEWARE_CLASSES =
( 'django.contrib.sessions.middleware.SessionMiddleware',
'facebook.djangofb.FacebookMiddleware',
'django.middleware.common.CommonMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'facebookconnect.middleware.FacebookConnectMiddleware', )


add facebook to your authentication backends

AUTHENTICATION_BACKENDS = (
'facebookconnect.models.FacebookBackend',
'django.contrib.auth.backends.ModelBackend',
)


Configure your templates dir
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(__file__), 'templates').replace('','/'),
)

Note: This determines the path of the templates directory based of
the location of the settings.py file


Configure your database
DATABASE_ENGINE = 'mysql'
DATABASE_NAME = 'djangonyc'
DATABASE_USER = 'user'
DATABASE_PASSWORD = 'password'
DATABASE_HOST = ''
DATABASE_PORT = ''

Note: set the database username and password accordingly
Note: a blank host and port defaults to localhost and 3306
respectively for mysql


Configure Facebook Keys and Timeout
• FACEBOOK_CACHE_TIMEOUT = 1800
• FACEBOOK_API_KEY = '00000000000000000000000000000000'
• FACEBOOK_SECRET_KEY = '00000000000000000000000000000000‘
• FACEBOOK_INTERNAL = True

Note: Set your facebook api and secret keys from the values created
when you created your facebook application in the Facebook
Developer Application on http://www.facebook.com


Configure some URLs
urlpatterns = patterns('',
(r'^/?$', 'djangonyc.exampleapp.views.index'),
(r'^accounts/profile', 'djangonyc.exampleapp.views.profile'),
(r'^xd_receiver.html$', 'djangonyc.exampleapp.views.xd_receiver'),
(r'^facebook/', include('facebookconnect.urls')),
)


Sync your database
• #> python manage.py syncdb
• We need to alter the auth_user table to
change the size of the email column:
– #> mysql -u root -p
– mysql> use djangonyc;
– mysql> alter table auth_user modify column email
varchar(255);
Note: In this example, do not create a super user when requested. All
user creation is done when a user connects via facebook connect.

Note: the email column needs to be modified because the email address
from facebook is a proxy address that can be fairly long. You never
receive a users 'real' email address from facebook.

Create a templates dir
#> mkdir djangonyc/templates
Note: this is the directory we pointed to in the settings.py file


Create your facebook
xd_receiver.html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommRece
iver.js" type="text/javascript">
</script>
</body>
</html>

Note: this file is put in the templates directory
(djangonyc/templates/xd_receiver.html)


create your base.html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
{% load facebook_tags %}
<head>
{% facebook_js %}
{% initialize_facebook_connect %}
</head>
<body>
<div id='user'>
{% if USER_LOGGED_IN %}
<table border='0'> <tr> <td>
Welcome {% show_facebook_first_name user %} {% show_logout %} <br />
{% show_facebook_photo user %}
</td> </tr>
</table>
{% else %}
<table border='0'><tr>
<td nowrap valign='middle' align='center'> {% show_connect_button %} </td>
<td valign='middle' align='center'></td>
</tr> </table>
{% endif %}
</div>
{% block 'content' %} Page content here. {% endblock %}
</body>
</html>

create your index.html file

{% extends 'base.html' %}


Create your profile.html page
{% extends 'base.html' %} Any page that uses the templates
{% load facebook_tags %} must load the tags
{% block 'content' %}
<div>
<form action="/accounts/profile/" method="post" name="profileForm" id="profileForm"> <table>
<tr><td> <table border='0'>
<tr>
<td colspan='2'>
<span>
<label for="Fname">Name:</label><br>
<input id="nameUser" name="nameUser" type="text" readonly
value="{% show_facebook_full_name user %}">
</span>
</td> Facebook tag
</tr>
</table>
</td>
<td align='center' valign='top'>
Facebook Profile Image<br />
{% show_facebook_large_photo user %}
</td>
</tr></table>
</form> </div> </div>
{% endblock %}


Create your views
Imports

•from django.http import HttpResponseRedirect
•from django.shortcuts import render_to_response
•from django.conf import settings
•from django.template import RequestContext


Create your views
index
def index(request):
user = ''
if request.user.is_authenticated():
user = request.user.facebook_profile
return render_to_response(
"index.html",
{
'USER_LOGGED_IN': request.user.is_authenticated(),
'user': user,
},
context_instance=RequestContext(request)
)


Create your views
profile
def profile(request):
page = 'profile'
user = ''

if request.user.is_authenticated():
user = request.user.facebook_profile
friendList = request.user.facebook_profile.get_friends_profiles()
else:
print "REDIRECTING"
return HttpResponseRedirect("/")
return render_to_response(
"profile.html",
{
'page': page,
'USER_LOGGED_IN': request.user.is_authenticated(),
'user': user,
'friendList': friendList,
},
context_instance=RequestContext(request)
)

Create your views
xd_receiver

def xd_receiver(request):
return render_to_response('xd_receiver.html')


Run your new application
• #> python manage.py runserver
Note: the default port will be 8000. We pointed the Connect setting in your
facebook application to be: http://localhost:8000

You can view the running local app at: http://localhost:8000 on your local
computer.


facebookconnect info
• Pluggable App
• Various settings/facebook values located
in the facebookconnect
• I modified Ryan Marks code and added in
more facebook values, and return all
values from facebook


Location of all dependencies
• Django
– http://www.djangoproject.com
• Pyfacebook
– http://wiki.developers.facebook.com/index.php/Python
• Django-facebookconnect
– http://ryan-mark.com/2009/04/02/django-facebook-connect/
• Sample App Source Code
– http://media.lab305.com/djangonyc-1.0.tgz


Any Questions
• Example app can be viewed at:
– http://djangonyc.lab305.com
• Full source code of example site is locate
available
– http://media.lab305.com/djangonyc-1.0.tgz
• Please send a tweet or email if you found
this useful or if you have any questions, or
if you want to hire us to help you!
– http://www.twitter.com/mrtrosen
– mrtrosen@lab305.com

Lab305 Django Facebook Connect Integration Example

Recommended

Recommended

More Related Content

Similar to Lab305 Django Facebook Connect Integration Example

Similar to Lab305 Django Facebook Connect Integration Example (20)

Recently uploaded

Recently uploaded (20)

Lab305 Django Facebook Connect Integration Example