---

Title: How to implement the Facebook login in a web page developed with Django.
Intro: English.
Language: Spanish / Español.

In this tutorial we will learn how to implement login in our Django web application using the Facebook login system. Thus, users of our application can log in with their Facebook account, without having to remember an exclusive password for the application.

---

¿Qué vamos a aprender en este tutorial?

Previamente, en nuestros tutoriales sobre el uso del sistema de autenticación de Django (Parte 1, Parte 2) estudiamos las herramientas que este Framework de desarrollo web nos ofrece para implementar de forma sencilla funcionalidades tales como iniciar sesión, cerrar sesión, recuperar contraseña y actualizar contraseña. El sistema de autenticación de Django nos permite implementar un sistema de sesiones de usuario tradicional, en el que cada usuario debe iniciar autenticarse con un username o correo electrónico, y una contraseña que debe recordar.

Forzar a los usuarios de nuestras aplicaciones a recordar una contraseña en muchos casos resulta poco práctico, y puede incentivar que recaigan en la mala costumbre de usar una misma contraseña para sus diferentes cuentas.

Una alternativa para evitar que los usuarios tengan que recordar una contraseña exclusiva para autenticarse en nuestra aplicación es usar las herramientas de autenticación de proveedores como Facebook, Twitter, Github, entre muchos otros, que nos brindan una forma cómoda, rápida y segura de iniciar sesión en nuestra aplicación web.

En este tutorial aprenderemos cómo implementar la autenticación en nuestra plataforma Django utilizando el sistema de inicio de sesión de Facebook. Así, los usuario de nuestra aplicación podrán iniciar sesión con su cuenta de Facebook, sin tener que recordar una contraseña exclus iva para la aplicación.

Requerimientos.

Para el punto de inicio de este tutorial, debemos haber configurado previamente un nuevo proyecto en Django. Los pasos básicos para configurar un nuevo proyecto Django pueden ser consultados en el tutorial "Configuración inicial de un proyecto Django", en el que utilizando Docker, creamos un nuevo proyecto de forma muy sencilla.

Dificultad: Intermedia.

---

Cómo implementar el inicio de sesión con Facebook en Django

---

Tras haber configurado un nuevo proyecto Django siguiendo los pasos del tutorial "Configuración inicial de mi propio proyecto Django usando el repositorio django_base", debemos ver la siguiente imagen al visitar la url localhost:8000 en un nevegador:

1. Instalar Python Social Auth.

Para implementar la integración con el sistema de inicio de sesión de Facebook, instalamos la librería Python Social Auth. Para agregar esta librería a nuestro proyecto, la añadimos al archivo requirements.txt de la siguiente forma, indicando que instalaremos la versión mas reciente 2.1.0.

requirements.txt

Django==2.0
psycopg2==2.7.3.2
django-extensions==1.9.8
social-auth-app-django==2.1.0


Para correr la instalación de la librería, ejecutamos el siguiente comando:

docker-compose build

Y activamos de nuevo el contenedor ejecutamos el siguiente comando:

docker-compose up

Tomado directamente de la documentación del repositorio de Github de la librería tenemos:

This is the Django component of the python-social-auth ecosystem, it implements the needed functionality to integrate social-auth-core in a Django based project.

Agregamos social_django a los INSTALLED_APPS en el archivos app/settings.py

app/settings.py

_{Código fuente}

Esta librería nos brinda una forma sencilla de integrar sistemas de autenticación de terceros en nuestra aplciación Django.

2. Configurar Python Social Auth.

Añadimos la linea social_django.middleware.SocialAuthExceptionMiddleware a la variable MIDDLEWARE en el archivo app/settings.py de la siguiente forma:

_{Código fuente}

Añadimos las siguientes lineas al context_processors, en la variable TEMPLATE del archivo app/settings.py :


'social_django.context_processors.backends',
'social_django.context_processors.login_redirect',


La variable TEMPLATE debe ver así:

_{Código fuente}

Y en este mismo archivo definimos la variable AUTHENTICATION_BACKENDS de la siguiente forma:

_{Código fuente}

Con la línea social_core.backends.facebook.FacebookOAuth2 habilitamos la autenticación mediante Facebook como un sistema válido de autenticación en nuestra plataforma, y con la línea django.contrib.auth.backends.ModelBackend indicamos que habilitamos el sistema tradicioinal de autenticación de Django mediante uso de username o correo electrónico y contraseña.

Para terminar la configuración de Python Social Auth, incluimos la línea url(r'^social/', include('social_django.urls', namespace='social')) en la variable urlpatterns en el archivo app/urls.py.

También incluimos activamos las vistas de login y logout del sistema de autenticación de Django, como lo vimos en este tutorial, para usar las vistas predefinidas en el framework para estas funcionalidades:

_{Código fuente}

Definimos en el archivo settings.py las siguientes variables:


LOGIN_URL = 'login'
LOGOUT_URL = 'logout'
LOGIN_REDIRECT_URL = 'home'


En caso de que un usuario desee acceder a una url para la que requiera estar autenticado, será redirigido a la url localhost:8000/login, en donde estará disponible el formulario por defecto de autenticación de Django. Siempre que un usuario accedar a la url localhost:8000/logout, su sesión se cerrará. Cuando un usuario inicie sesión con sus credenciales de Facebook, será redirigido a la url indicada en la variable LOGIN_REDIRECT_URL.

Detenemos el contenedor de Docker oprimiendo las teclas ctrl + c, y lo volvemos a levantar con el comando docker-compose up, para correr migraciones y crear las tablas necesarios para el funcionamiento de Python Social Auth.

3. Configurar aplicación de Facebook.

Para integrar el sistema de autenticación de Facebook en nuestra página web, debemos crear una nueva aplicación de Facebook en https://developers.facebook.com/apps/:

Asigamos un nombre, un correo de contacto y hacemos click en "crear identificación de la aplicación". A continuación, hacemos click en Configurar en primera opción "Inicio de sesión con Facebook" disponible en la siguiente lista:

Seleccionamos la opción "web":

A continuación, indicamos que la url de nuestra aplicación es http://localhost:8000/:

Después, en el menú lateral nos dirigimos a la opción "Configuración" y seleccionamos "Básica":

A continuación añadimos "localhost" a los dominios de la aplicación:

En el manú lateral, vamos a Productos - Inicio de sesión con Facebook - Configuración.

Allí, agregamos http://localhost:8000/ en el campo URI de redireccionamiento de OAuth válidos, y hacemos click en guardar cambios.

---

Definimos en el archivo app/settings.py las variales SOCIAL_AUTH_FACEBOOK_KEY y SOCIAL_AUTH_FACEBOOK_SECRET, disponibles en la sección de configuración básica de nuestra aplicación en Facebook. Esto permite a nuestra página web conectarse con nuestra aplicación de Facebook y validar la correcta autenticación de los usuarios:


SOCIAL_AUTH_FACEBOOK_KEY = '145464129474916'
SOCIAL_AUTH_FACEBOOK_SECRET = 'clave-secreta-de-la-aplicación'


4. Agregar link de inicio de sesión con Facebook a nuesta página web.

Finalmente, agregamos el link que permitirá a los usuarios de nuestra aplicación iniciar sesión utilizando sus credenciales de Facebook. Editamos el archivo app/templates/home.html de la siguiente forma:

_{Código fuente}

Agregamos un condicional if, para comprobar que nos hemos auteneticado correctamente en la plataforma. Si el usuario se ha autenticado correctamente, no será visible el link para iniciar sesión con Facebook, sino el username del usuario autenticado:

_{Código fuente}

5. Probar funcionalidad.

Vamos a la url localhost:8000 en nuestro navegador y hacemos click en el botón Iniciar sesión con Facebook:

A continuación, iniciamos sesión en Facebook, en donde se nos preguntará por autorización para enviar los datos de nuestro perfil público a la aplicación que creamos previamente:

Hacemos click en continuar, y debemos ser redirigidos de nuevo a la página de inicio de nuestra aplicación, pero ya no veremos el link para iniciar sesión con Facebook, sino que veremos el username del usuario autenticado.

Y esto es todo. De esta manera podemos implementar el inicio de sesión en nuestra aplicación Django con Facebook. En la base de datos se ha creado un usuario cuyo correo electrónico es el mismo registrado en Facebook, y de esta manera se identica cuando el usuario se está autenticando por primera vez para crear un nuevo usuario, o si simplemente es un usuario recurrente para relacionar su información por medio del correo electrónico registrado.Para cerrar sesión, nos dirigimos a la url localhost_8000/logout.
Con este tutorial damos por finalizada esta serie en la que estudiamos el manejo de sesiones de usuarios en Django. Facebook no es la única opción que nos brinda Python Social Auth para integrar un sistema de autenticación externo. Toda la documentación sobre los diferentes servicios que se pueden integrar están disponibles en la documentación de la librería.

Series

Este tutorial hace parte de una serie de publicaciones en las que hemos estudiado el sistema de sesiones de usuarios en Django. Tras haber estudiado los pasos básicos para crear una nueva aplicación y haber implementado las funcionalidades del sistema de sesiones de Django, abordamos la implementación de a autenticación utilizando nuestra cuenta de Facebook.

• Configuración inicial de mi propio proyecto Django usando el repositorio django_base.
• Cómo usar el sistema de autenticación de Django - Parte 1: iniciar sesión y cerrar sesión.
• Cómo usar el sistema de autenticación de Django - Parte 2: Recuperar contraseña y actualizar contraseña.

---

Felices días ✌

---

Posted on Utopian.io - Rewarding Open Source Contributors

---