Tutorial de autenticación con redes sociales en Django

En el desarrollo de un proyecto, a veces es más fácil dejar la parte de autenticación a otros como Facebook o Twitter. Hacer esto no sólo es más sencillo sino que nos evita pensar en algunos temas delicados de seguridad y nos permite poner más atención en otras partes más divertidas del desarrollo. Además, es común que los usuarios prefieran iniciar sesión con una red social que ya conocen a tener que recordar otra contraseña nueva. En este artículo te mostraré, paso a paso y desde cero, cómo crear un sencillo proyecto que nos permita iniciar sesión con Facebook, Twitter y GitHub. Recuerda que para empezar un nuevo proyecto con Django, es recomendable crear a la par un nuevo entorno virtual de Python para instalar todas sus dependencias. En este artículo no tocaremos este tema, pero si usas Python2, puedes crearlos con virtualenv; o si ya usas Python3, puedes crearlos con pyvenvo usar una librería super cool llamada virtualenv wrapper. Lo primero que haremos será instalar Django con el comando:

pip install django

Con el siguiente comando crearemos una carpeta llamada Platzi que será donde vivirá todo el proyecto:

mkdir Platzi

Una vez dentro de la carpeta Platzi, iniciamos un nuevo proyecto de Django con el comando:

django-admin.py startproject socialproject .

Ahora instalamos python social auth que es la librería que hace toda la magia con los proveedores de autenticación y nos permitirá iniciar sesión con Facebook, Twitter, Github, etc.

pip install python-social-auth

Después, instalamos la app en el settings.py [python] INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # Third-party apps 'social.apps.django_app.default', ) [/python] E incluímos los procesadores de contexto de python-social-auth: [python] 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', # Python Social Auth Context Processors 'social.apps.django_app.context_processors.backends', 'social.apps.django_app.context_processors.login_redirect', ], [/python] También incluimos las las urls en el archivo urls.py [python] urlpatterns = [ url(r'^admin/', include(admin.site.urls)), # Python Social Auth URLs url('', include('social.apps.django_app.urls', namespace='social')), ] [/python] Para acabar de configurar python social auth, tenemos que aplicar los cambios en la base de datos con el comando:

python manage.py migrate

Continuemos creando un super usuario para ver los cambios en la base de datos con el siguiente comando:

python manage.py createsuperuser

En el admin podemos ahora notar que se agregó la app python social auth.Hasta este punto ya tenemos todo configurado para empezar a trabajar con cada red social en específico.

Facebook

Para habilitar el login con Facebook tendremos que registrar un app en developers.facebook.com. Seleccionamos website: Una vez dentro de nuestra app, hay dos valores que nos interesan, el App ID y el App Secret. Por último en Settings > Advanced tenemos que configurar las URL válidas a las que Facebook podrá redirigir una vez que haya concluido con el proceso de autenticación. Como ejemplo pondremos 127.0.0.1:8000 pero es recomendable configurar un host diferente. En nuestro settings.py ahora tenemos que agregar una nueva variable que le especifica a Django cuáles serán los servicios que usará para autenticar usuarios. Esta es AUTHENTICATION_BACKENDS: [python] AUTHENTICATION_BACKENDS = ( # Facebook 'social.backends.facebook.FacebookOAuth2', # Django 'django.contrib.auth.backends.ModelBackend', ) [/python] No olvides incluir  'django.contrib.auth.backends.ModelBackend'si estás usando django.contrib.authpara autenticar usuarios o no podrás hacer el inicio de sesión por medio de username y password. En el settings.py tenemos que agregar las llaves que Facebook nos dio con sus respectivas variables y una variable que le indique a python-social-auth cual será la URL a la que se redirigirá la petición una vez que el proceso de autenticación haya concluido exitosamente. Recuerda que estas llaves son delicadas, así que cuida no exponerlas públicamente. [python] SOCIAL_AUTH_FACEBOOK_KEY = '123456789' SOCIAL_AUTH_FACEBOOK_SECRET = '123456ytdcvby78uhgfdsqw345678' SOCIAL_AUTH_LOGIN_REDIRECT_URL = "/" [/python] El siguiente paso será crear una URL que nos muestre un template con el mensaje "Inicia sesión con Facebook" y otra URL que cierre la sesión del usuario. Para la primer URL usaremos la vista genérica TemplateView que tenemos que importar. [python] from django.views.generic import TemplateView [/python] Y agregar la siguiente línea dentro de los URL patterns. [python] url(r'^$', TemplateView.as_view(template_name="home.html"), name="home"), [/python] Para la URL de logout podemos usar la siguiente función ya escrita y sólo agregar esta línea: [python] url(r'^users/logout/$', 'django.contrib.auth.views.logout', {'next_page': '/'}, name="user-logout"), [/python] Por lo que nuestro archivo final de urls.py se verá de la siguiente manera: [python] from django.conf.urls import include, url from django.contrib import admin from django.views.generic import TemplateView urlpatterns = [ url(r'^admin/', include(admin.site.urls)), # Python Social Auth URLs url('', include('social.apps.django_app.urls', namespace='social')), # Home URL url(r'^$', TemplateView.as_view(template_name="home.html"), name="home"), # Logout URL url( r'^users/logout/$', 'django.contrib.auth.views.logout', {'next_page': '/'}, name="user-logout" ), ] [/python] Ahora sólo tenemos que crear el template home.html y tendremos todo listo: [html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Platzi</title> </head> <body> {% if user and not user.is_anonymous %} Welcome back {{ user.get_full_name }}. <a href="{% url 'user-logout' %}">Logout</a> {% else %} <a href="{% url 'social:begin' 'facebook' %}?next={{ request.path }}"> Enter with Facebook </a> {% endif %} </body> </html> [/html] Incluimos una sentencia if que valida si hay una sesión que no sea anónima; en caso de que no, le muestra un saludo con su nombre. En caso opuesto le mostrará el mensaje, "Inicia sesión con Facebook".

Twitter

De igual manera que con Facebook, tenemos que registrar una app en apps.twitter.com/app/new: En la sección Keys and Access Tokens encontrarás las llaves que necesitamos: Agregamos las llaves y el Authentication Backend al settings.py: [python] AUTHENTICATION_BACKENDS = ( # Facebook 'social.backends.facebook.FacebookOAuth2', # Twitter 'social.backends.twitter.TwitterOAuth', # Django 'django.contrib.auth.backends.ModelBackend', ) # Facebook Keys SOCIAL_AUTH_FACEBOOK_KEY = 'q23456uhgf' SOCIAL_AUTH_FACEBOOK_SECRET = 'qw4trgfdxc' # Twitter Keys SOCIAL_AUTH_TWITTER_KEY = '123456yhgfdsvc' SOCIAL_AUTH_TWITTER_SECRET = '123456789okjhgfd' [/python] Sólo basta con editar el HTML para indicarle que puede iniciar sesión con Twitter agregando lo siguiente: [html] <a href="{% url 'social:begin' 'twitter' %}?next={{ request.path }}"> Enter with Twitter </a> [/html]

GitHub

Acá también tenemos que registrar una app en github.com: Obtenemos las llaves: Registramos el Authentication Backendy las llaves. [python] AUTHENTICATION_BACKENDS = ( # Facebook 'social.backends.facebook.FacebookOAuth2', # Twitter 'social.backends.twitter.TwitterOAuth', # Github 'social.backends.github.GithubOAuth2', # Django 'django.contrib.auth.backends.ModelBackend', ) # Facebook Keys SOCIAL_AUTH_FACEBOOK_KEY = 'q23456uhgf' SOCIAL_AUTH_FACEBOOK_SECRET = 'qw4trgfdxc' # Twitter Keys SOCIAL_AUTH_TWITTER_KEY = '123456yhgfdsvc' SOCIAL_AUTH_TWITTER_SECRET = '123456789okjhgfd' # Github Keys SOCIAL_AUTH_GITHUB_KEY = '21345thgfds' SOCIAL_AUTH_GITHUB_SECRET = '324trghfdcvgfh' [/python] Y agregamos el link para iniciar con GitHub: [html] <a href="{% url 'social:begin' 'github' %}?next={{ request.path }}"> Enter with Github </a> [/html] ¡Y listo! En resumen, lo que tienes que hacer es:

• Instalar Python Social Auth
• Configurar el settings
• Solicitar las llaves de acceso al medio de autenticación
• Registrar las llaves en el settings

Puedes revisar y contribuir con el código fuente en GitHub. Y recuerda que en Platzi tenemos el curso de Python y Django que puedes tomar ya mismo en la plataforma. Y, si ya lo aprobaste, tenemos noticias para ti: lo renovaremos en enero del próximo año. Así que no esperes más y regístrate hoy.