Gestor de Iniciativas Ecológicas: Django (Parte 4)

Tutorial 4: Creación del Registro de Usuario, Inicio de Sesión y Control de Sesión con Django y Bootstrap 5

Objetivo: En este tutorial, aprenderás a implementar el registro de usuarios, inicio de sesión y el control de sesión en la plataforma de iniciativas ecológicas. Usaremos Django para la autenticación de usuarios y Bootstrap 5 para el diseño de los formularios, además de enviar las peticiones de manera asíncrona con Axios. También protegeremos el acceso a la página principal para que solo los usuarios autenticados puedan acceder a ella.

Paso 1: Configuración del Registro de Usuario

1.1 Configuración Inicial y Bootstrap 5

Primero, asegúrate de que Bootstrap 5 esté incluido en tu proyecto. Vamos a usar su CDN para no tener que instalarlo localmente. Abre el archivo base.html, que actúa como plantilla base para el proyecto, y asegúrate de agregar el CSS y JS de Bootstrap a través de su CDN.

<!DOCTYPE html>
<html lang="es">
<head>
    <!-- Bootstrap 5 CSS vía CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
<body>
  <!-- Bootstrap 5 JS vía CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

1.2 Creación del Formulario de Registro de Usuario

En el archivo forms.py, definiremos el formulario de registro de usuario utilizando el modelo User de Django. Esto nos permitirá crear un nuevo usuario con los campos básicos como nombre, apellido, usuario, correo electrónico y contraseña.

from django import forms
from django.contrib.auth.models import User

class SignUpForm(forms.ModelForm):
    class Meta:
        model = User
        fields = ['username', 'first_name', 'last_name', 'email', 'password']

Este formulario incluye los campos del modelo User que serán utilizados para el registro.

1.3 Creación de la Vista de Registro

Vamos a crear la vista registrar_usuario, que se encargará de procesar los datos enviados a través del formulario de registro, validarlos y crear un nuevo usuario.

En el archivo views.py, agrega la siguiente vista:

from django.shortcuts import render
from django.http import JsonResponse
from django.contrib.auth.models import User
from django.contrib.auth.hashers import make_password
from .forms import SignUpForm
from datetime import datetime

def registrar_usuario(request):
    if request.method == "POST":
        sign_up_form = SignUpForm(request.POST)
        try:
            if sign_up_form.is_valid():
                username = sign_up_form.cleaned_data.get('username')
                if User.objects.filter(username=username).exists():
                    return JsonResponse({'error': 'El nombre de usuario ya existe'}, status=400)
                else:
                    nuevo_usuario = User(
                        username=sign_up_form.cleaned_data.get('username'),
                        first_name=sign_up_form.cleaned_data.get('first_name'),
                        last_name=sign_up_form.cleaned_data.get('last_name'),
                        email=sign_up_form.cleaned_data.get('email'),
                        password=make_password(sign_up_form.cleaned_data.get('password')),
                        is_superuser=False,
                        is_staff=False,
                        is_active=True,
                        date_joined=datetime.now()
                    )
                    nuevo_usuario.save()
                    return JsonResponse({'message': 'Usuario registrado exitosamente'}, status=200)
            else:
                return JsonResponse({'errors': sign_up_form.errors}, status=400)
        except Exception as e:
            return JsonResponse({'error': f'Ocurrió un error al registrar el usuario: {str(e)}'}, status=500)
    else:
        return render(request, 'signup.html')

Esta vista maneja la creación del usuario. Si el nombre de usuario ya existe, se devuelve un error; de lo contrario, se crea el usuario con las credenciales cifradas.

1.4 Creación de la Ruta para el Registro

En el archivo urls.py, agrega la ruta para la vista de registro:

from django.urls import path
from . import views

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

1.5 Formulario HTML de Registro de Usuario

Ahora, crearemos el formulario de registro en la plantilla signup.html utilizando Bootstrap 5 para el diseño, y Axios para enviar la petición de manera asíncrona.

{% extends 'base.html' %}
{% load static %}

{% block title %} <title>Registro de Usuario</title> {% endblock %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="col-md-6">
        <h2 class="text-center">Registro de Usuario</h2>
        <form id="form-reg-usuario" class="row g-3 mb-5" data-url="{% url 'registrar_usuario' %}" autocomplete="off">
            {% csrf_token %}
            <div class="col-md-12">
                <label for="first_name" class="form-label">Nombre:</label>
                <input type="text" class="form-control" id="first_name" name="first_name">
            </div>
            <div class="col-md-12">
                <label for="last_name" class="form-label">Apellido:</label>
                <input type="text" class="form-control" id="last_name" name="last_name">
            </div>
            <div class="col-md-12">
                <label for="username" class="form-label">Usuario:</label>
                <input type="text" class="form-control" id="username" name="username">
            </div>
            <div class="col-md-12">
                <label for="password" class="form-label">Contraseña:</label>
                <input type="password" class="form-control" id="password" name="password">
            </div>
            <div class="col-md-12">
                <label for="email" class="form-label">Email:</label>
                <input type="email" class="form-control" id="email" name="email">
            </div>
            <div class="col-12 d-flex justify-content-between">
                <button type="submit" class="btn btn-success">Registrar</button>
                <button type="reset" class="btn btn-secondary">Cancelar</button>
            </div>
        </form>
        <div class="col-md-12">
            <p>Ya tienes una cuenta? <a href="{% url 'iniciar_sesion' %}">Inicia sesión aquí</a></p>
        </div>
    </div>
</div>
<script src="{% static 'js/signup.js' %}"></script>
{% endblock %}

Paso 2: Implementación del Inicio de Sesión

2.1 Creación de la Vista de Inicio de Sesión

El siguiente paso es permitir que los usuarios puedan iniciar sesión. La vista iniciar_sesion gestionará la autenticación del usuario.

En views.py, agrega la siguiente vista:

from django.contrib.auth import authenticate, login
from django.contrib.auth.forms import AuthenticationForm

def iniciar_sesion(request):
    if request.method == 'POST':
        form = AuthenticationForm(request, data=request.POST)
        if form.is_valid():
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password')
            user = authenticate(username=username, password=password)
            if user is not None:
                login(request, user)
                return redirect('home')
        return render(request, 'signin.html', {'error': 'Usuario o contraseña incorrectos'})        
    else:
        return render(request, 'signin.html')

2.2 Creación de la Ruta para el Inicio de Sesión

En urls.py, agrega la ruta para la vista de inicio de sesión:

urlpatterns += [
    path('iniciar_sesion/', views.iniciar_sesion, name='iniciar_sesion'),
]

2.3 Formulario HTML de Inicio de Sesión

Aquí está el código del formulario para el inicio de sesión, que también utiliza Bootstrap 5:

{% extends 'base.html' %}
{% load static %}

{% block title %} <title>Inicio de Sesión</title> {% endblock %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="col-md-6">
        <h2 class="text-center">Inicio de Sesión</h2>
        <form id="form-inicio-sesion" class="row g-3 mb-5" action="{% url 'iniciar_sesion' %}" method="POST" autocomplete="off">
            {% csrf_token %}
            <div class="col-md

-12">
                <label for="username" class="form-label">Usuario:</label>
                <input type="text" class="form-control" id="username" name="username">
            </div>
            <div class="col-md-12">
                <label for="password" class="form-label">Contraseña:</label>
                <input type="password" class="form-control" id="password" name="password">
            </div>
            <div class="col-12 d-flex justify-content-between">
                <button type="submit" class="btn btn-success">Iniciar Sesión</button>
                <button type="reset" class="btn btn-secondary">Cancelar</button>
            </div>
        </form>
        <div class="col-md-12">
            <p>Aún no te has registrado? <a href="{% url 'registrar_usuario' %}">Registrate aquí</a></p>
        </div>
        {% if error %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{error}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

Paso 3: Control de Sesión y Protección de Rutas

Para proteger las rutas a las que solo los usuarios autenticados deben tener acceso, usaremos el decorador @login_required.

3.1 Protección de la Página Principal

El archivo settings.py debe estar configurado con:

LOGIN_URL = '/iniciar_sesion/'

Asegúrate de agregar el decorador @login_required en la vista de la página principal para protegerla:

from django.contrib.auth.decorators import login_required
from .models import Categoria

@login_required
def home(request):
    categorias = Categoria.objects.all()
    return render(request, 'index.html', {'categorias': categorias})

3.2 Cerrar Sesión

Finalmente, agregamos una opción para que los usuarios puedan cerrar sesión y una vista cerrar_sesion para gestionar esta acción:

from django.contrib.auth import logout

def cerrar_sesion(request):
    logout(request)
    return redirect('iniciar_sesion')

Agrega un enlace en el index.html para cerrar sesión si el usuario está autenticado:

{% if user.is_authenticated %}
    <strong>Bienvenido, {{user.username}}</strong>
    <a href="{% url 'cerrar_sesion' %}">Cerrar sesión</a>
{% endif %}

Agrega la ruta para cerrar sesión en urls.py:

urlpatterns += [
    path('cerrar_sesion/', views.cerrar_sesion, name='cerrar_sesion'),
]

Conclusión

En este tutorial, hemos implementado las funcionalidades de registro de usuario, inicio de sesión, y control de sesión con Django y Bootstrap 5. También hemos protegido las rutas sensibles y ofrecido una interfaz amigable para gestionar las cuentas de usuario.