5
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:
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]
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:
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.
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".
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
Pablo
gracias pablo por esta tan importante información espero estes pronto de nuevo en platzi.
Eres la biblia de Django hecha persona. Crack !