Integrating Facebook Connect
 authentication in your Django
          application
      Michael Trosen
      mrtrosen@lab3...
Django Reinhardt




•   Prominent European Jazz Musician
•   January 1910 – May 1953
•   Hurt in a fire when he was 18, p...
?
Sorry, wrong meeting!



   Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
• Django is a high-level Python Web
  framework that encourages rapid
  development and clean, pragmatic design
• Django f...
With the Facebook Connect APIs you gain access to
  ● Identity

       ●   A user's name, photos, and more
  ●   Friends
 ...
What’s involved?
•   Create a Facebook Application
•   Install PyFacebook
•   Install Ryan Mark’s django-facebook app
•   ...
Assumptions
•   Using Ubuntu for development
•   Already have Django installed
•   You have git-core installed
•   You hav...
Add the Facebook Developer
        Application
http://www.facebook.com/developers/




     Michael Trosen – Lab305.com mr...
Create a Facebook App
      Setup new application




  Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter...
Create a Facebook App




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

                                                         Edit Settings




                       ...
Configure Facebook Connect
          Settings




  Connect URL: http://localhost:8000
  Connect Logo – shown in connect d...
Create your database
• #> mysql –u root –p
• mysql> create database djangonyc;
• mysql> quit;




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

• PyFacebook Tutori...
Install Ryan Mark’s
       django-facebookconnect
• Website
  – http://code.google.com/p/django-facebookconnect
• SVN Down...
Create a new Django Application
• #> django-admin startproject djangonyc
• #> django-admin startapp exampleapp

• Copy the...
Configure your settings.py
            Add your apps to INSTALLED_APPS


INSTALLED_APPS = (
  ‘django.contrib.auth',
    ‘...
Configure your settings.py
  Add the FacebookConnectMiddleware to your
              middleware_classes:
                 ...
Configure your settings.py
add facebook to your authentication backends



 AUTHENTICATION_BACKENDS = (
     'facebookconn...
Configure your templates dir
TEMPLATE_DIRS = (
     os.path.join(os.path.dirname(__file__), 'templates').replace('','/'),
...
Configure your database
  DATABASE_ENGINE = 'mysql'
  DATABASE_NAME = 'djangonyc'
  DATABASE_USER = 'user'
  DATABASE_PASS...
Configure your settings.py
       Configure Facebook Keys and Timeout
• FACEBOOK_CACHE_TIMEOUT = 1800
• FACEBOOK_API_KEY =...
Configure some URLs
urlpatterns = patterns('',
   (r'^/?$', 'djangonyc.exampleapp.views.index'),
   (r'^accounts/profile',...
Sync your database
• #> python manage.py syncdb
• We need to alter the auth_user table to
  change the size of the email c...
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"
   "ht...
create your base.html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/x...
create your index.html file

  {% extends 'base.html' %}




   Michael Trosen – Lab305.com mrtrosen@lab305.com http://www...
Create your profile.html page
{% extends 'base.html' %}                       Any page that uses the templates
{% load fac...
Create your views
                       Imports

•from django.http import HttpResponseRedirect
•from django.shortcuts imp...
Create your views
                              index
def index(request):
  user = ''
  if request.user.is_authenticated()...
Create your views
                              profile
def profile(request):
  page = 'profile'
  user = ''

  if request...
Create your views
                            xd_receiver

def xd_receiver(request):
       return render_to_response('xd_...
Run your new application
• #> python manage.py runserver
 Note: the default port will be 8000. We pointed the Connect sett...
facebookconnect info
• Pluggable App
• Various settings/facebook values located
  in the facebookconnect
• I modified Ryan...
Location of all dependencies
• Django
  – http://www.djangoproject.com
• Pyfacebook
  – http://wiki.developers.facebook.co...
Any Questions
• Example app can be viewed at:
  – http://djangonyc.lab305.com
• Full source code of example site is locate...
Upcoming SlideShare
Loading in …5
×

Lab305 Django Facebook Connect Integration Example

15,823 views

Published on

A slideshow showing the steps and components required to create a django application that uses

Published in: Technology, Business
6 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
15,823
On SlideShare
0
From Embeds
0
Number of Embeds
274
Actions
Shares
0
Downloads
0
Comments
6
Likes
14
Embeds 0
No embeds

No notes for slide

Lab305 Django Facebook Connect Integration Example

  1. 1. 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
  2. 2. 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
  3. 3. ? Sorry, wrong meeting! Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  4. 4. • 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  5. 5. 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. Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  6. 6. 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! Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  7. 7. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  8. 8. Add the Facebook Developer Application http://www.facebook.com/developers/ Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  9. 9. Create a Facebook App Setup new application Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  10. 10. Create a Facebook App Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  11. 11. Configure Facebook App Edit Settings IMPORTANT – API Keys Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  12. 12. Configure Facebook Connect Settings Connect URL: http://localhost:8000 Connect Logo – shown in connect dialog box when user is validating Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  13. 13. Create your database • #> mysql –u root –p • mysql> create database djangonyc; • mysql> quit; Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  14. 14. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  15. 15. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  16. 16. 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/ Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  17. 17. Configure your settings.py Add your apps to INSTALLED_APPS INSTALLED_APPS = ( ‘django.contrib.auth', ‘django.contrib.sessions', ‘djangonyc.exampleapp', ‘djangonyc.facebookconnect', ) Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  18. 18. Configure your settings.py 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', ) Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  19. 19. Configure your settings.py add facebook to your authentication backends AUTHENTICATION_BACKENDS = ( 'facebookconnect.models.FacebookBackend', 'django.contrib.auth.backends.ModelBackend', ) Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  20. 20. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  21. 21. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  22. 22. Configure your settings.py 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  23. 23. 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')), ) Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  24. 24. 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. Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  25. 25. Create a templates dir #> mkdir djangonyc/templates Note: this is the directory we pointed to in the settings.py file Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  26. 26. 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) Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  27. 27. 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> Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  28. 28. create your index.html file {% extends 'base.html' %} Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  29. 29. 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 %} Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  30. 30. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  31. 31. 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) ) Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  32. 32. 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) )
  33. 33. Create your views xd_receiver def xd_receiver(request): return render_to_response('xd_receiver.html') Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  34. 34. 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. Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  35. 35. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  36. 36. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen
  37. 37. 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 Michael Trosen – Lab305.com mrtrosen@lab305.com http://www.twitter.com/mrtrosen

×