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

More Related Content

Similar to Lab305 Django Facebook Connect Integration Example (20)

Recently uploaded (20)

Lab305 Django Facebook Connect Integration Example