5

Tutorial de autenticación con redes sociales en Django

802Puntos

hace 6 años

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. platzi-login 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.admin-python-social-authHasta 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: Screen Shot 2015-10-28 at 12.55.38 PM Una vez dentro de nuestra app, hay dos valores que nos interesan, el App ID y el App Secret.Screen Shot 2015-10-28 at 1.25.08 PM 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. Screen Shot 2015-10-28 at 1.30.56 PM 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". Screen Shot 2015-10-28 at 2.12.13 PMScreen Shot 2015-10-28 at 2.07.52 PMScreen Shot 2015-10-28 at 2.12.05 PM

Twitter

De igual manera que con Facebook, tenemos que registrar una app en apps.twitter.com/app/new: Screen Shot 2015-10-28 at 2.16.34 PM En la sección Keys and Access Tokens encontrarás las llaves que necesitamos: Screen Shot 2015-10-28 at 2.17.33 PM 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] Screen Shot 2015-10-28 at 2.28.37 PMScreen Shot 2015-10-28 at 2.28.55 PMScreen Shot 2015-10-28 at 2.29.07 PM

GitHub

Acá también tenemos que registrar una app en github.com: Screen Shot 2015-10-28 at 2.33.04 PM Obtenemos las llaves: Screen Shot 2015-10-28 at 2.34.55 PM 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! Screen Shot 2015-10-28 at 2.44.51 PMScreen Shot 2015-10-28 at 2.48.51 PMScreen Shot 2015-10-28 at 2.49.03 PM 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.
Pablo
Pablo
Escribe tu comentario
+ 2
Ordenar por:
1
12615Puntos

Eres la biblia de Django hecha persona. Crack !

1
5601Puntos

gracias pablo por esta tan importante información espero estes pronto de nuevo en platzi.

0
1889Puntos

Que método usan en la plataforma de platzi, para que la foto de usuario sea automáticamente la misma de la red social vinculada a la plataforma.
¿Tiene que ver con Django? y ¿donde puedo guiarme para hacerlo asi?