Cómo autenticar aplicaciones Django usando django-allauth

Tutoriales
Django

El autor seleccionó el Fondo para el Software Libre y de Código Abierto para recibir una donación como parte del programa Write for Donations.

Introducción

La autenticación es el proceso de verificar usuarios auténticos o registrados en el sistema, lo que ayuda a proteger sus aplicaciones de software contra el acceso no autorizado. Hay varias técnicas utilizadas para autenticar usuarios, como la verificación de nombre de usuario/contraseña, la biometría humana o las contraseñas de imagen. En el marco web Django, el manejo de la autenticación puede ser codificado en duro o puede utilizar módulos listos para usar como django-allauth, django-rest-social-auth, django-registration y más.

django-allauth es un conjunto integrado de aplicaciones Django que se ocupan de la autenticación de cuentas, registro, gestión y autenticación de cuentas de terceros (sociales). Es uno de los módulos de autenticación más populares debido a su capacidad para manejar tanto los inicios de sesión locales como los sociales. Puede agregar soporte para proveedores adicionales de OAuth/OAuth2 con la base de código común de la aplicación. No solo maneja la lógica de autenticación, sino que también es personalizable para satisfacer sus necesidades de diseño.

En este tutorial, construirás una aplicación Django que utiliza django-allauth para autenticarse utilizando una cuenta de DigitalOcean.

Prerrequisitos

Para este tutorial, necesitarás:

Paso 1 — Configuración del Entorno de Desarrollo

En este paso, configurarás tu entorno de desarrollo para la aplicación Django. Activarás un entorno virtual e instalarás las dependencias del proyecto.

Primero, crea un nuevo directorio y cambia a él. Este tutorial utiliza Django-Allauth:

  1. mkdir Django-Allauth

  2. cd Django-Allauth

Asegúrate de utilizar esta carpeta para el resto de este tutorial.

A continuación, crea un entorno virtual usando Pipenv, una herramienta de empaquetado para Python. Primero, instala pipenv:

  1. pip3 install pipenv

Luego, activa el entorno virtual:

pipenv shell

A continuación, instala las dependencias que utilizarás para el desarrollo (django y django-allauth) usando pipenv:

  1. pipenv install django

  2. pipenv install django-allauth

Ahora has terminado de configurar tu entorno de desarrollo. A continuación, comenzarás a desarrollar tu aplicación Django.

Paso 2 — Creación de tu Aplicación Django

En este paso, crearás una aplicación Django simple de una página para usar con autenticación django-allauth.

El primer paso para crear tu aplicación es crear la aplicación del proyecto, llamada Authentication en este tutorial:

  1. django-admin startproject Authentication

A continuación, accede a la ruta del directorio del proyecto y crea una aplicación para tu aplicación; este tutorial utiliza main:

  1. cd Authentication

  2. python manage.py startapp main

En el directorio del proyecto, usa nano o tu editor de texto favorito para abrir settings.py para editarlo:

  1. nano Authentication/settings.py

En la lista de aplicaciones instaladas, agrega la aplicación main como se muestra:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main', # nueva aplicación
]

Dado que estamos renderizando una sola página para el sitio web, no es necesario realizar cambios en el archivo models.py.

A continuación, abre el archivo urls.py del proyecto para editarlo y realiza los siguientes cambios:

Django-Allauth/Authentication/Authentication/urls.py
from  django.contrib  import  admin
from  django.urls  import  path, include

urlpatterns = [
path('', include('main.urls')),
path('admin/', admin.site.urls),
]

El archivo urls.py se utiliza para el enrutamiento de aplicaciones Django.

Luego, en la aplicación main, crea otro archivo urls.py y agrega las siguientes líneas:

Django-Allauth/Authentication/main/urls.py
from  django.urls  import  path
from . import views 

urlpatterns = [
path('', views.homepage, name='homepage'),
]

Este nuevo archivo urls.py se utiliza para enrutamiento de los archivos de la aplicación main.

A continuación, abre el archivo views.py y agrega las siguientes líneas:

Django-Allauth/Authentication/main/views.py
from  django.shortcuts  import  render

def  homepage(request):
    return  render(request=request,
    template_name= 'home.html',)

El archivo views.py se utiliza para renderizar la página home.html en el directorio de plantillas.

Luego, en la carpeta raíz del proyecto (Authentication), crea un nuevo directorio llamado templates. En el directorio templates, crea una página HTML llamada home.html y agrega las siguientes líneas:

Authentication/templates/home.html
  1. 

  2. <html>

  3.     <head>

  4.         <style>

  5.         h3 {text-align: center;}

  6.         p {text-align: center;}

  7.         </style>

  8.     </head>

  9.     <body>        

  10.     <!-- CSS compilado y minimizado -->

  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  12. 

  13.     <!-- JavaScript compilado y minimizado -->

  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  15.             

  16.         <nav>

  17.             <div class="nav-wrapper"style="background-color: teal">

  18.               <a href="#" class="brand-logo">Django-Allauth</a>

  19.             </div>

  20.           </nav>

  21.         <h3 style=center>Welcome Home</h3>

  22.         <div class="row">

  23.             <div class="col s12 m6">

  24.               <div class="card whitedarken-1">

  25.                 <div class="card-content blue-text">

  26.                   <span class="card-title">Lorem Ipsum</span>

  27.                   <p>{% lorem 1 p %}</p>

  28.                 </div>

  29.               </div>

  30.             </div>  

  31.             <div class="col s12 m6">

  32.               <div class="card white darken-1">

  33.                 <div class="card-content blue'-text">

  34.                   <span class="card-title">Lorem Ipsum</span>

  35.                   <p>{% lorem 1 p %}</p>

  36.                 </div>

  37.               </div>

  38.             </div>          

  39.           </div>

  40.           <div class="container text-dark mt-5">

  41.             <div class="row justify-content-md-center">

  42.               <div class="col md-5 p-3">

  43.                 {% if user.is_authenticated%}

  44.                 <p>Welcome, {{user.username}}</p>

  45.                 <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>

  46.                 {%else%}

  47.                 <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>

  48.                 {%endif%}

  49.               </div>

  50.             </div>

  51.           </div>

  52.     </body>

  53. </html>

Esta página web de demostración incluye texto de muestra renderizado en tarjetas y un área de inicio de sesión para usar con la autenticación en un paso posterior.

La página web está estilizada usando Materialize CDN, un marco de trabajo de entrega de contenido front-end gratuito y de código abierto basado en Material Design. Ayuda a cargar las bibliotecas de Materialize CSS, JavaScript y jQuery para crear proyectos hermosos y receptivos. Asegúrate de tener una conexión a internet para que se carguen los archivos de estilo del CDN.

Desde la ruta del directorio, Django-Allauth/Authentication, lanza la aplicación web usando el siguiente comando:

  1. python manage.py runserver

Verás una salida similar a la siguiente:

Output
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 13:35:20
Django version 4.0.4, using settings 'Authentication.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Navega a la URL http://127.0.0.1:8000/. Deberías ver un sitio web que se ve así:

El sitio web de ejemplo muestra texto de relleno e incluye un área de inicio de sesión en la parte inferior. Una vez que hayas configurado la autenticación, usarás el enlace Iniciar sesión en la página web en un paso posterior.

En este paso, construiste una aplicación de una sola página. A continuación, ahora manejarás la autenticación usando django-allauth.

Paso 3 — Configuración de django-allauth

Para autenticarte usando django-allauth, primero debes configurarlo. Esto se hace haciendo algunos cambios en los archivos del proyecto.

Abre Authentication/settings.py para editarlo. Bajo INSTALLED_APPS, agrega las líneas resaltadas para registrar las aplicaciones de django-allauth y DigitalOcean como proveedor de inicio de sesión social:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
    
    # Asegúrate de agregar estas aplicaciones requeridas
    'django.contrib.sites',
	  # Aplicaciones de Django-allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Proveedor de inicio de sesión social/terceros para Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

Luego, actualiza la sección TEMPLATES como se muestra:

[label Django-Allauth/Authentication/Authentication/settings.py]  
# Especificaciones de los procesadores de contexto:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
        'context_processors': [         
	 'django.template.context_processors.request',
            ],
        },
    },
]

La nueva línea maneja las solicitudes HTTP de Django-Allauth.

A continuación, crea una sección para AUTHENTICATION_BACKENDS y agrega las siguientes líneas:

Django-Allauth/Authentication/Authentication/settings.py

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
	  'allauth.account.auth_backends.AuthenticationBackend',
    ]

La primera línea se utiliza para iniciar sesión de un usuario por nombre de usuario a través del panel de administración de Django, lo cual harás en un paso posterior. La segunda línea se utiliza para métodos de autenticación específicos de django-allauth, como iniciar sesión mediante un proveedor de OAuth.

A continuación, agrega dos redireccionamientos de autenticación como se muestra:

Django-Allauth/Authentication/Authentication/settings.py

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

Estas líneas redirigen al usuario a la página de inicio después de la autenticación y después de cerrar sesión en el sitio web.

La última edición a settings.py es configurar el ID de la URL de tu sitio. Al final de tu archivo, agrega la siguiente línea:

Django-Allauth/Authentication/Authentication/settings.py
# Establece el ID de la URL de tu sitio. 
SITE_ID =1

Esta línea especifica el ID de la base de datos del objeto Site asociado con el archivo settings.py.

Guarda y cierra tu archivo.

A continuación, abre el archivo urls.py raíz para editarlo. Agrega la ruta a las aplicaciones de Allauth de la siguiente manera:

Django-Allauth/Authentication/Authentication/urls.py

urlpatterns = [
	...
	path('accounts/', include('allauth.urls')),
]

Esta nueva línea se utiliza para enrutarse al archivo de URL de la aplicación allauth. La aplicación django-allauth viene con un conjunto de URL para sus páginas HTML. Algunas de las URL proporcionadas por allauth incluyen: account_login, account_logout, account_set_password, entre otras. Consulta la documentación del producto de django-allauth para más información.

Guarda y cierra tu archivo.

En este paso, configuras django-allauth en tu aplicación y estás listo para usarlo para la autenticación.

Paso 4: Agregar un Proveedor de Autenticación de Terceros

En este paso, agregarás autenticación de terceros a tu aplicación Django usando django-allauth. Hay muchos proveedores de autenticación de terceros que puedes usar con django-allauth, incluidos los inicios de sesión sociales de Google, Facebook, Twitter y otros que figuran en la lista de proveedores de django-allauth.

Para este tutorial, utilizarás DigitalOcean como tu inicio de sesión social. Para agregar un proveedor de autenticación como DigitalOcean, primero debes registrarlos.

Inicia sesión en tu cuenta de DigitalOcean y navega hasta la plataforma en la nube de DigitalOcean, donde accederás a un panel que se ve así:

Haz clic en el botón API en el lado izquierdo del panel para crear tu Aplicación OAuth. En el panel Aplicaciones y API, haz clic en el botón Aplicación OAuth para acceder al registro OAuth para tu sitio. Verás un panel que se ve así:

A continuación, haz clic en el botón Registrar Aplicación OAuth para comenzar el registro de la aplicación OAuth de tu aplicación. Aparecerá un formulario emergente:

Ingresa el nombre del proyecto (Django-Allauth) y cualquier descripción que desees. Para la sección Introducir URL de la página de inicio, ingresa una de las siguientes URL:

  • http://127.0.0.1:8000
  • http://localhost:8000

En la sección Introducir URL de devolución de llamada, ingresa una de las siguientes URL de redireccionamiento:

  • http://127.0.0.1:8000/accounts/digitalocean/login/callback/
  • http://localhost:8000/accounts/digitalocean/login/callback/

Nota: Para fines de demostración, este tutorial utiliza localhost:8000 o 127.0.0.1:8000. Al implementar una aplicación en producción, las URL deben cambiarse para incluir el nombre de dominio en su lugar.

Después de ingresar la información del proyecto, haz clic en Registrar Aplicación OAuth para guardar los cambios. Serás redirigido de vuelta al panel de la aplicación con tu aplicación creada como se muestra a continuación:

Haz clic en el nombre de la aplicación para acceder al ID de Cliente y al Secreto de Cliente:

Copia y guarda estos detalles para usarlos más tarde.

Después de configurar la API en DigitalOcean, ahora puedes agregarla al panel de administración de tu aplicación Django. Para acceder al panel de administración de Django, primero necesitas tener un superusuario, que puedes crear usando el siguiente comando:

  1. python manage.py createsuperuser

Ingresa los detalles solicitados y ejecuta el servidor una vez más.

Accede al panel de administración utilizando la URL, http://127.0.0.1:8000/admin/. Inicia sesión con tus detalles de superusuario y accederás al panel de administración que se ve como el siguiente:

En el panel izquierdo, haz clic en Sitios, y luego en Agregar sitio + para editar un sitio existente (example.com) o agregar uno nuevo usando http://127.0.0.1:8000 como se muestra a continuación:

Esta configuración establece la URL del servidor de tu sitio donde se implementará la autenticación de DigitalOcean. En este caso, es http://127.0.0.1:8000.

Haz clic en Guardar.

A continuación, vuelve al panel principal haciendo clic en Inicio. En la sección de Cuentas Sociales, haz clic en Aplicaciones Sociales, y luego en Agregar Aplicaciones Sociales +. Utilizando los detalles que copiaste de la Consola de DigitalOcean, ingresa los detalles requeridos para el proveedor de servicios, nombre de la aplicación, ID de cliente y clave secreta del cliente. Bajo Sitios, selecciona el sitio que acabas de crear bajo Sitios disponibles y haz clic en la flecha (—>) para moverlo al panel de Sitios Elegidos. Haz clic en el botón Guardar para guardar los detalles.

Esta configuración se utiliza para conectar el proveedor de inicio de sesión social utilizando el ID de Cliente y la Clave Secreta, que se utilizan como identificador público de tu aplicación y como identificador confidencial, respectivamente. Se utilizan para autenticar tu aplicación y realizar solicitudes a las APIs de DigitalOcean.

En este paso, configuraste DigitalOcean como proveedor de autenticación de terceros para tu aplicación Django. En el paso final, iniciarás sesión en tu sitio utilizando tu cuenta de DigitalOcean.

Paso 5 — Prueba de Autenticación

En este paso, iniciarás sesión en tu sitio Django utilizando tu cuenta de DigitalOcean. Primero, cierra la sesión como administrador y navega hasta la página de inicio de sesión (http://127.0.0.1:8000/accounts/login/):

Haz clic en el enlace DigitalOcean para iniciar sesión utilizando DigitalOcean. (Como se muestra en la captura de pantalla, otra forma de autenticarse es registrarse utilizando un nombre de usuario y una contraseña.)

En la siguiente pantalla, haz clic en Continuar. Aparecerá una nueva página donde deberás seleccionar tu cuenta de equipo de DigitalOcean y hacer clic en el botón Autorizar aplicación.

La autorización es el proceso de conceder a una persona la capacidad de acceder a un recurso. En este caso, estás otorgando a tu sitio web acceso a tus credenciales de inicio de sesión de DigitalOcean para autenticarte.

Después de iniciar sesión, deberías ver tu página de inicio como se muestra a continuación:

Después de una inicio de sesión exitoso, tu nombre de usuario y el enlace Cerrar sesión se mostrarán en el sitio web.

NOTA: Durante este proceso, es posible que recibas el mensaje de error, No existe ninguna coincidencia de SocialApp:

Este problema suele ocurrir cuando haces referencia incorrecta al número de identificación de tu sitio, por ejemplo, si tienes example.com como el primer sitio en tu sitio. Para resolverlo, busca SITE_ID en settings.py y aumenta su valor en 1 hasta que desaparezca el error.

En este paso, probaste tu configuración de autenticación iniciando sesión en tu sitio utilizando la información de inicio de sesión de DigitalOcean.

Conclusión

En este tutorial, construiste una aplicación Django que maneja la autenticación social usando django-allauth. Incorporaste un inicio de sesión social de DigitalOcean y lo probaste iniciando sesión en tu sitio. Puedes acceder al código del proyecto en GitHub.

Como próximo paso, podrías utilizar django-allauth para autenticar cualquiera de tus otros proyectos de aplicaciones Django con cualquiera de los proveedores de django-allauth. Para obtener más información sobre la autenticación de Django con django-allauth, consulta la documentación oficial de Django-Allauth y la documentación oficial de Django sobre autenticación.

También puedes agregar estilo a las páginas allauth, que tienen un estilo básico por defecto. Para agregar estilo a las páginas allauth, puedes clonar el proyecto django-allauth desde GitHub y utilizar el directorio django-allauth/allauth/templates del repositorio clonado para estilizar tus páginas.

Source:
https://www.digitalocean.com/community/tutorials/how-to-authenticate-django-apps-using-django-allauth