Cómo autenticar aplicaciones Django usando django-allauth

Deja un comentario / Por /

El autor seleccionó el Fondo de Código Libre y 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. Existen varias técnicas que se utilizan para autenticar usuarios, como la verificación de nombre de usuario y contraseña, la biometría humana o las contraseñas con imágenes. En el marco web de Django, el manejo de la autenticación puede estar codificado o puede utilizar módulos ya preparados como django-allauth , django-rest-social-auth , django-registration y más.

django-allauthes un conjunto integrado de aplicaciones Django que se ocupan de la autenticación de cuentas, el registro, la gestión y la autenticación de cuentas de terceros (sociales). Es uno de los módulos de autenticación más populares debido a su capacidad para gestionar inicios de sesión tanto locales como sociales. Puede agregar compatibilidad con proveedores OAuth/OAuth2 adicionales 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 se puede personalizar para adaptarse a sus necesidades de diseño.

En este tutorial, creará una aplicación Django que se utiliza django-allauthpara autenticarse usando una cuenta DigitalOcean.

Prerrequisitos

Para este tutorial, necesitarás:

  • Una cuenta de DigitalOcean. Si no tiene una, regístrese para obtener una nueva cuenta .
  • Python 3.5+ instalado en su máquina, lo cual puede hacer siguiendo el tutorial Cómo instalar Python 3 y configurar un entorno de programación para su máquina.
  • Conocimientos básicos del framework web Django, que puedes encontrar en nuestra serie sobre Desarrollo Django .

Paso 1: Configuración del entorno de desarrollo

En este paso, configurarás tu entorno de desarrollo de aplicaciones Django. Activarás un entorno virtual e instalarás las dependencias del proyecto.

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

  1. mkdir Django-Allauth
  2. cd Django-Allauth

Asegúrese de utilizar esta carpeta durante el resto de este tutorial.

A continuación, cree un entorno virtual utilizando Pipenv, una herramienta de empaquetado para Python. Primero, instale pipenv:

  1. pip3 install pipenv

A continuación, active el entorno virtual:

pipenv shell

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

  1. pipenv install django
  2. pipenv install django-allauth

Ya ha terminado de configurar su entorno de desarrollo. A continuación, comenzará a desarrollar su aplicación Django.

Paso 2: Creación de su aplicación Django

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

El primer paso para crear su aplicación es crear la aplicación del proyecto, denominada Authenticationen este tutorial:

  1. django-admin startproject Authentication

A continuación, acceda a la ruta del directorio del proyecto y cree una aplicación para su aplicación; este tutorial utiliza main:

  1. cd Authentication
  2. python manage.py startapp main

En el directorio del proyecto, utilice nanosu editor de texto favorito para abrir settings.pyy editar:

  1. nano Authentication/settings.py

A la lista de aplicaciones instaladas, agregue la mainaplicación como se muestra:

Django-Allauth/Autenticación/Autenticación/configuraciones.py

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','main', # new app]

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

A continuación, abra el archivo del proyecto urls.pypara editarlo y realice los siguientes cambios:

Django-Allauth/Autenticación/Autenticación/urls.py

from  django.contrib  import  adminfrom  django.urls  import  path, includeurlpatterns = [path('', include('main.urls')),path('admin/', admin.site.urls),]

El urls.pyarchivo se utiliza para enrutar aplicaciones Django.

A continuación, en la mainaplicación, crea otro urls.pyarchivo y agrega las siguientes líneas:

Django-Allauth/Autenticación/main/urls.py

from  django.urls  import  pathfrom . import views urlpatterns = [path('', views.homepage, name='homepage'),]

Este nuevo urls.pyarchivo se utiliza para enrutar los mainarchivos de la aplicación.

A continuación, abra el views.pyarchivo y agregue las siguientes líneas:

Django-Allauth/Autenticación/main/views.py

from  django.shortcuts  import  renderdef  homepage(request):    return  render(request=request,    template_name= 'home.html',)

El views.pyarchivo se utiliza para representar la home.htmlpágina en el directorio de la plantilla.

A continuación, en la carpeta raíz del proyecto ( Authentication), cree un nuevo directorio llamado templates. En el templatesdirectorio, cree una página HTML llamada home.htmly agregue las siguientes líneas:

Autenticación/plantillas/inicio.html

  2. html
  3.     head
  4.         style
  5.         h3 {text-align: center;}
  6.         p {text-align: center;}
  7.         /style
  8.     /head
  9.     body        
  10.     !-- Compiled and minified CSS --
  11.     link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
  13.     !-- Compiled and minified JavaScript --
  14.     script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"/script
  15.             
  16.         nav
  17.             divstyle="background-color: teal"
  18.               a href="#"Django-Allauth/a
  19.             /div
  20.           /nav
  21.         h3 style=centerWelcome Home/h3
  22.         div
  23.             div
  24.               div
  25.                 div
  26.                   spanLorem Ipsum/span
  27.                   p{% lorem 1 p %}/p
  28.                 /div
  29.               /div
  30.             /div  
  31.             div
  32.               div
  33.                 div
  34.                   spanLorem Ipsum/span
  35.                   p{% lorem 1 p %}/p
  36.                 /div
  37.               /div
  38.             /div          
  39.           /div
  40.           div
  41.             div
  42.               div
  43.                 {% if user.is_authenticated%}
  44.                 pWelcome, {{user.username}}/p
  45.                 a href="http://127.0.0.1:8000/accounts/logout/"Logout/a
  46.                 {%else%}
  47.                 pPlease 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 representado en tarjetas y un área de inicio de sesión para usar con autenticación en un paso posterior.

La página web está diseñada con Materialize CDN , un marco de trabajo de interfaz de distribución de contenido gratuito y de código abierto basado en Material Design. Ayuda a cargar las bibliotecas CSS, JavaScript y jQuery de Materialize para crear proyectos atractivos y responsivos. Asegúrate de tener una conexión a Internet para que la CDN cargue los archivos de diseño.

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

  1. python manage.py runserver

Verá un resultado similar al siguiente:

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

Vaya a la URL http://127.0.0.1:8000/. Debería ver un sitio web similar a este:

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

En este paso, creaste una aplicación de una página. A continuación, manejarás la autenticación mediante django-allauth.

Paso 3 — Configuracióndjango-allauth

Para autenticarse con django-allauth, primero debe configurarlo. Esto se hace haciendo algunos cambios en los archivos del proyecto.

Abierto Authentication/settings.pypara edición. En INSTALLED_APPS, agregue las líneas resaltadas para registrar las django-allauthaplicaciones y DigitalOcean como proveedor de inicio de sesión social:

Django-Allauth/Autenticación/Autenticación/configuraciones.py

INSTALLED_APPS = [        # Make sure to add these required apps    'django.contrib.sites',  # Django-allauth apps    'allauth',    'allauth.account',    'allauth.socialaccount',    # Social/third party login provider for Digital Ocean    'allauth.socialaccount.providers.digitalocean',]

A continuación, actualice la TEMPLATESsección como se muestra:

[label Django-Allauth/Authentication/Authentication/settings.py]  # Context processors specifications:TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [],        'APP_DIRS': True,        'OPTIONS': {        'context_processors': [          'django.template.context_processors.request',            ],        },    },]

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

A continuación, cree una sección AUTHENTICATION_BACKENDSy agregue las siguientes líneas:

Django-Allauth/Autenticación/Autenticación/configuraciones.py

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

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

A continuación, agregue dos redirecciones de autenticación como se muestra:

Django-Allauth/Autenticación/Autenticación/configuraciones.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 la sesión del sitio web.

La última modificación settings.pyconsiste en establecer el ID de la URL de su sitio. Al final del archivo, agregue la siguiente línea:

Django-Allauth/Autenticación/Autenticación/configuraciones.py

# Sets the ID of your site's URL. SITE_ID =1

Esta línea especifica el ID de la base de datos del Siteobjeto asociado con el settings.pyarchivo.

Guarde y cierre su archivo.

A continuación, abra el archivo raíz urls.pypara editarlo. Agregue la ruta a las Allauthaplicaciones de la siguiente manera:

Django-Allauth/Autenticación/Autenticación/urls.py

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

Esta nueva línea se utiliza para enrutar el allautharchivo URL de la aplicación. La django-allauthaplicación incluye un conjunto de URL para sus páginas HTML. Algunas URL proporcionadas por allauthincluyen: account_login, account_logout, account_set_password, entre otras. Consulta la django-allauthdocumentación del producto para obtener más información.

Guarde y cierre su archivo.

En este paso, configura django-allauthsu aplicación y está listo para usarla para la autenticación.

Paso 4: Agregar un proveedor de autenticación de terceros

En este paso, agregará la autenticación de terceros para su aplicación Django mediante django-allauth. Hay muchos proveedores de autenticación de terceros que puede usar con django-allauth, incluidos los inicios de sesión sociales de Google, Facebook, Twitter y otros que se enumeran en la django-allauthlista de proveedores .

Para este tutorial, utilizará DigitalOcean como su inicio de sesión social. Para agregar un proveedor de autenticación como DigitalOcean, primero debe registrarlo.

Inicie sesión en su cuenta de DigitalOcean y navegue a la plataforma en la nube de DigitalOcean , donde accederá a un panel que se parece a esto:

Haga clic en el botón API a la izquierda del panel para crear su aplicación OAuth. En el panel Aplicaciones y API , haga clic en el botón Aplicación OAuth para acceder al registro OAuth de su sitio. Verá un panel que se parece a esto:

A continuación, haga clic en el botón Registrar aplicación OAuth para iniciar el registro de la aplicación OAuth. Aparecerá un formulario emergente:

Ingresa el nombre del proyecto ( Django-Allauth) y la descripción que desees. En la sección Ingresar 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 Ingresar URL de devolución de llamada , ingrese 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:8000o 127.0.0.1:8000. Al implementar una aplicación en producción, las URL deben cambiarse para incluir el nombre de dominio.

Después de haber ingresado la información del proyecto, haga clic en Registrar aplicación OAuth para guardar los cambios. Luego, se lo redireccionará nuevamente al panel de control de la aplicación con la aplicación creada como se muestra a continuación:

Haga clic en el nombre de la aplicación para acceder al ID del cliente y al secreto del cliente :

Copie y guarde estos detalles para usarlos más adelante.

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

  1. python manage.py createsuperuser

Ingrese los detalles solicitados y ejecute el servidor una vez más.

Accede al panel de administración mediante la URL. http://127.0.0.1:8000/admin/Inicia sesión con tus datos de superusuario y accederás al panel de administración, que se parece al siguiente:

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

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

Haga clic en Guardar .

A continuación, vuelva al panel principal haciendo clic en Inicio . En la sección Cuentas sociales , haga clic en Aplicaciones sociales y, a continuación, haga clic en Agregar aplicaciones sociales + . Con los detalles que copió de la consola de DigitalOcean, ingrese los detalles necesarios para el proveedor de servicios, el nombre de la aplicación, el ID del cliente y la clave secreta del cliente. En Sitios , seleccione el sitio que acaba de crear en Sitios disponibles y haga clic en la flecha ( — ) para moverlo al panel Sitios seleccionados . Haga 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 mediante el ID de cliente y la clave secreta , que se utilizan como identificador público de su aplicación y como identificador confidencial, respectivamente. Se utilizan para autenticar su aplicación y realizar solicitudes a las API 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 usando tu cuenta de DigitalOcean.

Paso 5: Prueba de autenticación

En este paso, iniciará sesión en su sitio de Django con su cuenta de DigitalOcean. Primero, cierre sesión como administrador y navegue a la página de inicio de sesión ( http://127.0.0.1:8000/accounts/login/):

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

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

La autorización es el proceso por el cual se otorga a una persona la capacidad de acceder a un recurso. En este caso, usted le otorga a su sitio web acceso a sus credenciales de inicio de sesión de DigitalOcean para autenticarlo.

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

Después de iniciar sesión correctamente, su nombre de usuario y el enlace Cerrar sesión se mostrarán en el sitio web.

NOTA: Durante este proceso, puede recibir el mensaje de error ” La consulta coincidente de SocialApp no ​​existe” :

Este problema suele ocurrir cuando haces referencia incorrectamente al número de ID de tu sitio, como si tuvieras example.comcomo primer sitio en tu sitio. Para resolverlo, busca SITE_IDen settings.pyy aumenta su valor en 1 hasta que desaparezca el error.

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

Conclusión

En este tutorial, creaste una aplicación Django que maneja la autenticación social mediante 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 siguiente paso, puede utilizar django-allauthpara autenticar cualquiera de sus otros proyectos de aplicación Django con cualquiera de los proveedores django-allauth . Para obtener más información sobre la autenticación de Django con django-allauth, consulte la documentación oficial de Django-Allauth y la documentación oficial de Django sobre autenticación .

También puedes agregar estilos a las allauthpáginas, que tienen un estilo predeterminado básico. Para agregar estilos a las allauthpáginas, puedes clonar el django-allauthproyecto desde GitHub y usar el django-allauth/allauth/templatesdirectorio del repositorio clonado para darle estilo a tus páginas.

SUSCRÍBETE A NUESTRO BOLETÍN 
No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.
Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.

Tal vez te puede interesar:

  1. Cómo instalar Nginx en Debian 11
  2. Convertir una cadena en una matriz de caracteres y una matriz de caracteres en una cadena en C++
  3. Anotación de Spring @Configuration
  4. Ejemplo de HandlerInterceptorAdapter, HandlerInterceptor de Spring MVC

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio