🎓 GUÍA COMPLETA DE EXAMEN U4

🔍 Parte 1: HEADER (Encabezado)

Si lo decodificas (es Base64), obtienes:

{
  "alg": "HS256",    // Algoritmo de firma: HMAC SHA-256
  "typ": "JWT"       // Tipo de token: JWT
}

🤓 ¿Qué significa? Le dice al servidor cómo verificar que el token es legítimo.

🔍 Parte 2: PAYLOAD (Carga Útil)

Decodificado:

{
  "user_id": 1,                    // ID del usuario
  "username": "admin",             // Nombre de usuario
  "email": "admin@biblioteca.com", // Email
  "exp": 1642345678,               // Fecha de expiración (timestamp)
  "iat": 1642342078                // Fecha de emisión
}

🤓 ¿Qué significa? Aquí va toda la información del usuario. ¡OJO! Estos datos NO están encriptados, solo codificados en Base64, así que nunca pongas contraseñas aquí.

🔍 Parte 3: SIGNATURE (Firma)

Se genera así:

HMACSHA256(
  base64UrlEncode(header) + "." + base64UrlEncode(payload),
  SECRET_KEY_DEL_SERVIDOR
)

🤓 ¿Qué significa? Es una "huella digital" del token. Si alguien modifica el header o payload, la firma no coincidirá y el servidor rechazará el token.

🔐 Flujo de verificación:

1. Servidor recibe el token
2. Toma header + payload y calcula su firma usando la clave secreta
3. Compara su firma calculada con la firma del token
4. Si coinciden ✅ = Token válido | Si no coinciden ❌ = Token falso/modificado

2.1 Instalar SimpleJWT (3 minutos)

🖥️ En tu terminal (ASEGÚRATE DE QUE EL ENTORNO VIRTUAL ESTÉ ACTIVADO):

✅ Verificar instalación:

Salida esperada:

Name: djangorestframework-simplejwt
Version: 5.5.1
Summary: A minimal JSON Web Token authentication plugin for Django REST Framework
Home-page: https://github.com/jazzband/djangorestframework-simplejwt
Author: David Sanders
...

💾 Actualizar requirements.txt:

Esto guarda todas tus dependencias para que otros puedan instalarlas fácilmente con pip install -r requirements.txt

2.2 Configurar JWT en Settings (10 minutos)

📂 Archivo a editar: biblioteca_project/settings.py

🔍 Busca la sección REST_FRAMEWORK (debe estar cerca del final del archivo, después de STATIC_URL). Si no existe, agrégala completa:

# =======================
# REST FRAMEWORK CONFIG
# =======================

from datetime import timedelta  # ← Agregar al inicio del archivo

REST_FRAMEWORK = {
    # AUTENTICACIÓN: Qué métodos acepta tu API
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',  # JWT (Token moderno)
        'oauth2_provider.contrib.rest_framework.OAuth2Authentication',  # ← AGREGAR para OAuth 2.0
        'rest_framework.authentication.TokenAuthentication',          # Token tradicional
        'rest_framework.authentication.SessionAuthentication',        # Sesión (para admin)
    ],
    
    # PERMISOS: Qué pueden hacer los usuarios
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticatedOrReadOnly',
    ],
    
    # PAGINACIÓN: Cuántos resultados por página
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10,
    
    # FILTROS: Permitir búsquedas y ordenamiento
    'DEFAULT_FILTER_BACKENDS': [
        'django_filters.rest_framework.DjangoFilterBackend',
        'rest_framework.filters.SearchFilter',
        'rest_framework.filters.OrderingFilter',
    ],
}

➕ Ahora agrega la configuración específica de JWT (después de REST_FRAMEWORK):

# =======================
# SIMPLE JWT CONFIG
# =======================

SIMPLE_JWT = {
    # ⏱️ DURACIÓN DE TOKENS
    'ACCESS_TOKEN_LIFETIME': timedelta(hours=1),    # Token de acceso válido 1 hora
    'REFRESH_TOKEN_LIFETIME': timedelta(days=7),    # Token de refresco válido 7 días
    
    # 🔄 ROTACIÓN DE TOKENS (Seguridad extra)
    'ROTATE_REFRESH_TOKENS': True,                  # Genera nuevo refresh al refrescar
    'BLACKLIST_AFTER_ROTATION': True,               # Invalida el refresh anterior
    'UPDATE_LAST_LOGIN': True,                      # Actualiza last_login del usuario
    
    # 🔐 ALGORITMO Y CLAVE DE FIRMA
    'ALGORITHM': 'HS256',                           # HMAC SHA-256 (más común)
    'SIGNING_KEY': SECRET_KEY,                      # Usa la SECRET_KEY de Django
    'VERIFYING_KEY': None,                          # Solo para algoritmos asimétricos (RSA)
    
    # 📋 CONFIGURACIÓN DE HEADERS
    'AUTH_HEADER_TYPES': ('Bearer',),               # Tipo: "Authorization: Bearer TOKEN"
    'AUTH_HEADER_NAME': 'HTTP_AUTHORIZATION',       # Nombre del header
    
    # 👤 CLAIMS DEL USUARIO
    'USER_ID_FIELD': 'id',                          # Campo del modelo User para ID
    'USER_ID_CLAIM': 'user_id',                     # Nombre del claim en el payload
    
    # 🎫 CONFIGURACIÓN DEL TOKEN
    'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),
    'TOKEN_TYPE_CLAIM': 'token_type',               # Claim que identifica tipo de token
    'JTI_CLAIM': 'jti',                             # JWT ID (identificador único)
}

from datetime import timedelta  # ← AGREGAR ESTA LÍNEA

pip install django-cors-headers djangorestframework djangorestframework-simplejwt mysqlclient

pip install django-filter

System check identified no issues (0 silenced).

2.3 Crear API Views (Serializers y ViewSets) (20 minutos)

Paso 1: Crear Serializers

Crea el archivo libros/serializers.py (archivo nuevo):

from rest_framework import serializers
from .models import Categoria, Autor, Libro, Prestamo
from django.contrib.auth.models import User


class CategoriaSerializer(serializers.ModelSerializer):
    """Serializer para Categoría"""
    
    class Meta:
        model = Categoria
        fields = ['id', 'nombre', 'descripcion', 'activo', 'fecha_creacion']
        read_only_fields = ['id', 'fecha_creacion']


class AutorSerializer(serializers.ModelSerializer):
    """Serializer para Autor"""
    
    nombre_completo = serializers.ReadOnlyField()
    total_libros = serializers.SerializerMethodField()
    
    class Meta:
        model = Autor
        fields = ['id', 'nombre', 'apellido', 'nombre_completo', 
                 'fecha_nacimiento', 'pais_origen', 'biografia', 
                 'foto', 'total_libros', 'fecha_creacion']
        read_only_fields = ['id', 'fecha_creacion']
    
    def get_total_libros(self, obj):
        return obj.libros.filter(activo=True).count()


class LibroSerializer(serializers.ModelSerializer):
    """Serializer para Libro"""
    
    autor_nombre = serializers.CharField(source='autor.nombre_completo', read_only=True)
    categoria_nombre = serializers.CharField(source='categoria.nombre', read_only=True)
    esta_disponible = serializers.ReadOnlyField()
    
    class Meta:
        model = Libro
        fields = [
            'id', 'titulo', 'subtitulo', 'isbn',
            'autor', 'autor_nombre',
            'categoria', 'categoria_nombre',
            'editorial', 'fecha_publicacion', 'paginas', 'idioma',
            'descripcion', 'imagen_portada',
            'stock', 'estado', 'esta_disponible',
            'precio', 'valoracion',
            'activo', 'fecha_creacion', 'fecha_actualizacion'
        ]
        read_only_fields = ['id', 'fecha_creacion', 'fecha_actualizacion']
    
    def validate_isbn(self, value):
        """Validar que ISBN tenga 13 dígitos"""
        isbn = value.replace('-', '').replace(' ', '')
        if not isbn.isdigit():
            raise serializers.ValidationError("ISBN debe contener solo números")
        if len(isbn) != 13:
            raise serializers.ValidationError("ISBN debe tener 13 dígitos")
        return value
    
    def validate_precio(self, value):
        """Validar que precio sea positivo"""
        if value <= 0:
            raise serializers.ValidationError("El precio debe ser mayor a 0")
        return value


class PrestamoSerializer(serializers.ModelSerializer):
    """Serializer para Préstamo"""
    
    libro_titulo = serializers.CharField(source='libro.titulo', read_only=True)
    usuario_nombre = serializers.CharField(source='usuario.username', read_only=True)
    dias_prestamo = serializers.ReadOnlyField()
    esta_atrasado = serializers.ReadOnlyField()
    
    class Meta:
        model = Prestamo
        fields = [
            'id', 'libro', 'libro_titulo',
            'usuario', 'usuario_nombre',
            'fecha_prestamo', 'fecha_devolucion_esperada', 'fecha_devolucion_real',
            'estado', 'dias_prestamo', 'esta_atrasado', 'notas'
        ]
        read_only_fields = ['id', 'fecha_prestamo']
    
    def validate(self, data):
        """Validar que el libro esté disponible antes de prestar"""
        if self.instance is None:  # Solo en creación
            libro = data.get('libro')
            if not libro.esta_disponible:
                raise serializers.ValidationError({
                    'libro': 'Este libro no está disponible para préstamo'
                })
        return data


class UserSerializer(serializers.ModelSerializer):
    """Serializer para Usuario"""
    
    total_prestamos = serializers.SerializerMethodField()
    
    class Meta:
        model = User
        fields = ['id', 'username', 'email', 'first_name', 'last_name', 
                 'is_staff', 'date_joined', 'total_prestamos']
        read_only_fields = ['id', 'date_joined']
    
    def get_total_prestamos(self, obj):
        return obj.prestamos.count()

Paso 2: Crear ViewSets

Crea el archivo libros/api_views.py (archivo nuevo):

from rest_framework import viewsets, filters, status
from rest_framework.decorators import action
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated, IsAuthenticatedOrReadOnly
from django_filters.rest_framework import DjangoFilterBackend

from .models import Categoria, Autor, Libro, Prestamo
from .serializers import (
    CategoriaSerializer, AutorSerializer, 
    LibroSerializer, PrestamoSerializer
)


class CategoriaViewSet(viewsets.ModelViewSet):
    """
    ViewSet para Categorías
    - GET /api/categorias/ - Listar todas
    - POST /api/categorias/ - Crear nueva
    - GET /api/categorias/{id}/ - Ver detalle
    - PUT /api/categorias/{id}/ - Actualizar
    - DELETE /api/categorias/{id}/ - Eliminar
    """
    queryset = Categoria.objects.all()
    serializer_class = CategoriaSerializer
    permission_classes = [IsAuthenticatedOrReadOnly]
    filter_backends = [filters.SearchFilter, filters.OrderingFilter]
    search_fields = ['nombre', 'descripcion']
    ordering_fields = ['nombre', 'fecha_creacion']
    ordering = ['nombre']


class AutorViewSet(viewsets.ModelViewSet):
    """ViewSet para Autores"""
    
    queryset = Autor.objects.all()
    serializer_class = AutorSerializer
    permission_classes = [IsAuthenticatedOrReadOnly]
    filter_backends = [DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter]
    filterset_fields = ['pais_origen']
    search_fields = ['nombre', 'apellido', 'biografia']
    ordering_fields = ['apellido', 'nombre', 'fecha_creacion']
    ordering = ['apellido', 'nombre']
    
    @action(detail=True, methods=['get'])
    def libros(self, request, pk=None):
        """Endpoint personalizado: /api/autores/{id}/libros/"""
        autor = self.get_object()
        libros = autor.libros.filter(activo=True)
        serializer = LibroSerializer(libros, many=True)
        return Response(serializer.data)


class LibroViewSet(viewsets.ModelViewSet):
    """ViewSet para Libros"""
    
    queryset = Libro.objects.filter(activo=True).select_related('autor', 'categoria')
    serializer_class = LibroSerializer
    permission_classes = [IsAuthenticatedOrReadOnly]
    filter_backends = [DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter]
    filterset_fields = ['estado', 'categoria', 'autor']
    search_fields = ['titulo', 'isbn', 'descripcion']
    ordering_fields = ['titulo', 'precio', 'fecha_publicacion', 'valoracion']
    ordering = ['-fecha_creacion']
    
    @action(detail=False, methods=['get'])
    def disponibles(self, request):
        """Endpoint: /api/libros/disponibles/"""
        libros = self.queryset.filter(
            estado=Libro.DISPONIBLE,
            stock__gt=0
        )
        serializer = self.get_serializer(libros, many=True)
        return Response(serializer.data)
    
    @action(detail=True, methods=['post'])
    def actualizar_stock(self, request, pk=None):
        """
        Endpoint: POST /api/libros/{id}/actualizar_stock/
        Body: {"cantidad": 5}  (puede ser negativo para restar)
        """
        libro = self.get_object()
        cantidad = request.data.get('cantidad', 0)
        
        try:
            cantidad = int(cantidad)
        except (ValueError, TypeError):
            return Response(
                {'error': 'La cantidad debe ser un número entero'},
                status=status.HTTP_400_BAD_REQUEST
            )
        
        libro.actualizar_stock(cantidad)
        serializer = self.get_serializer(libro)
        return Response(serializer.data)


class PrestamoViewSet(viewsets.ModelViewSet):
    """ViewSet para Préstamos"""
    
    queryset = Prestamo.objects.all().select_related('libro', 'usuario')
    serializer_class = PrestamoSerializer
    permission_classes = [IsAuthenticated]
    filter_backends = [DjangoFilterBackend, filters.OrderingFilter]
    filterset_fields = ['estado', 'usuario']
    ordering_fields = ['fecha_prestamo', 'fecha_devolucion_esperada']
    ordering = ['-fecha_prestamo']
    
    def perform_create(self, serializer):
        """Al crear préstamo, asignar usuario actual y actualizar stock"""
        prestamo = serializer.save(usuario=self.request.user)
        prestamo.libro.actualizar_stock(-1)  # Reducir stock en 1
    
    @action(detail=True, methods=['post'])
    def devolver(self, request, pk=None):
        """
        Endpoint: POST /api/prestamos/{id}/devolver/
        Marca el préstamo como devuelto
        """
        from django.utils import timezone
        
        prestamo = self.get_object()
        
        if prestamo.estado == Prestamo.DEVUELTO:
            return Response(
                {'error': 'Este préstamo ya fue devuelto'},
                status=status.HTTP_400_BAD_REQUEST
            )
        
        prestamo.fecha_devolucion_real = timezone.now()
        prestamo.estado = Prestamo.DEVUELTO
        prestamo.save()
        
        # Incrementar stock del libro
        prestamo.libro.actualizar_stock(1)
        
        serializer = self.get_serializer(prestamo)
        return Response(serializer.data)

✅ VERIFICAR archivos creados:

Debe decir: System check identified no issues (0 silenced).

2.4 Configurar URLs de la API (10 minutos)

Paso 1: Crear archivo de URLs de la API

Crea el archivo libros/api_urls.py (nuevo):

# ===================================
# URLS DE LA API - libros/api_urls.py
# ===================================

from django.urls import path, include
from rest_framework.routers import DefaultRouter

# Importar vistas JWT de SimpleJWT
from rest_framework_simplejwt.views import (
    TokenObtainPairView,      # Vista para login (obtener tokens)
    TokenRefreshView,          # Vista para refrescar access token
    TokenVerifyView,           # Vista para verificar token
)

# Importar ViewSets
from . import api_views

# ===== ROUTER PARA VIEWSETS =====
# El router genera automáticamente las URLs para CRUD
router = DefaultRouter()
router.register(r'libros', api_views.LibroViewSet, basename='libro')
router.register(r'autores', api_views.AutorViewSet, basename='autor')
router.register(r'categorias', api_views.CategoriaViewSet, basename='categoria')
router.register(r'prestamos', api_views.PrestamoViewSet, basename='prestamo')

# ===== URL PATTERNS =====
urlpatterns = [
    # ─────────────────────────────────
    # 🔐 AUTENTICACIÓN JWT
    # ─────────────────────────────────
    
    # Login con JWT (POST: username + password → access y refresh tokens)
    path('auth/jwt/login/', TokenObtainPairView.as_view(), name='jwt_login'),
    
    # Refrescar token (POST: refresh_token → nuevo access_token)
    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
    
    # Verificar token (POST: token → válido o inválido)
    path('token/verify/', TokenVerifyView.as_view(), name='token_verify'),
    
    
    # ─────────────────────────────────
    # 📚 ENDPOINTS DE LA API (CRUD)
    # ─────────────────────────────────
    
    # Incluir todas las rutas del router
    # Esto genera automáticamente:
    # GET    /api/libros/          - Listar todos los libros
    # POST   /api/libros/          - Crear nuevo libro
    # GET    /api/libros/{id}/     - Ver detalle de libro
    # PUT    /api/libros/{id}/     - Actualizar libro
    # DELETE /api/libros/{id}/     - Eliminar libro
    # Y lo mismo para autores, categorias, prestamos
    path('', include(router.urls)),
]

Paso 2: Conectar con el proyecto principal

Edita biblioteca_project/urls.py para incluir las URLs de la API:

# biblioteca_project/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    # Admin de Django
    path('admin/', admin.site.urls),
    
    # ✨ URLs de la API (AGREGAR ESTA LÍNEA)
    path('api/', include('libros.api_urls')),
]

✅ Instalar Dependencia:

Salida esperada: volvera a su entorno virtual

✅ VERIFICAR rutas creadas:

Salida esperada: System check identified no issues (0 silenced).

2.5 Probar JWT con Postman/Thunder Client (20 minutos)

Paso 1: Arrancar el servidor

Deja el servidor corriendo. Abre otra terminal si necesitas ejecutar más comandos.

🔑 Prueba 1: Login y Obtener Tokens JWT

Con Postman/Thunder Client:

1. Crear nueva request
2. Método: POST
3. URL: http://127.0.0.1:8000/api/auth/jwt/login/
4. Headers: Content-Type: application/json
5. Body → raw (JSON):

{
  "username": "admin",
  "password": "admin123"
}

Con curl (desde terminal):

✅ Respuesta esperada (Status 200 OK):

{
  "refresh": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eX...",
  "access": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBl..."
}

📚 Prueba 2: Acceder a la API con el Token

Con Postman/Thunder Client:

1. Crear nueva request
2. Método: GET
3. URL: http://127.0.0.1:8000/api/libros/
4. Headers: Agregar header de autorización:
   • Key: Authorization
   • Value: Bearer TU_ACCESS_TOKEN_AQUI

⚠️ IMPORTANTE: El valor debe ser Bearer (con B mayúscula) seguido de un espacio y luego el token.

Con curl:

✅ Respuesta esperada (Status 200 OK):

{
  "count": 5,
  "next": null,
  "previous": null,
  "results": [
    {
      "id": 1,
      "titulo": "Cien años de soledad",
      "autor_nombre": "Gabriel García Márquez",
      "isbn": "9780123456789",
      "precio": "450.00",
      "stock": 10,
      "esta_disponible": true,
      ...
    },
    ...
  ]
}

🔄 Prueba 3: Refrescar el Access Token

¿Cuándo usar esto? Cuando el access token expire (después de 1 hora), usa el refresh token para obtener uno nuevo sin hacer login nuevamente.

Con Postman/Thunder Client:

1. Método: POST
2. URL: http://127.0.0.1:8000/api/token/refresh/
3. Body → raw (JSON):

{
  "refresh": "TU_REFRESH_TOKEN_AQUI"
}

Con curl:

✅ Respuesta esperada (Status 200 OK):

{
  "access": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "refresh": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

Nota: Recibes tanto un nuevo access token como un nuevo refresh token (por la configuración ROTATE_REFRESH_TOKENS).

✅ Prueba 4: Verificar si un Token es Válido

Con Postman/Thunder Client:

1. Método: POST
2. URL: http://127.0.0.1:8000/api/token/verify/
3. Body → raw (JSON):

{
  "token": "TU_ACCESS_TOKEN_AQUI"
}

Con curl:

✅ Si el token es válido: Respuesta 200 OK con {} (objeto vacío)

❌ Si el token es inválido o expirado: Respuesta 401 Unauthorized

📝 Prueba 5: Crear un Libro (Requiere Autenticación)

Con Postman/Thunder Client:

1. Método: POST
2. URL: http://127.0.0.1:8000/api/libros/
3. Headers:
   • Authorization: Bearer TU_ACCESS_TOKEN
   • Content-Type: application/json
4. Body → raw (JSON):

{
  "titulo": "El Principito",
  "isbn": "9781234567897",
  "autor": 1,
  "categoria": 1,
  "editorial": "Editorial Planeta",
  "fecha_publicacion": "1943-04-06",
  "paginas": 96,
  "idioma": "Español",
  "descripcion": "Una historia filosófica sobre la amistad, el amor y la pérdida.",
  "stock": 15,
  "precio": "250.00",
  "valoracion": "4.80"
}

✅ Respuesta esperada (Status 201 Created):

{
  "id": 6,
  "titulo": "El Principito",
  "autor_nombre": "Gabriel García Márquez",
  "isbn": "9781234567897",
  "precio": "250.00",
  "stock": 15,
  "esta_disponible": true,
  "fecha_creacion": "2026-01-23T19:45:00.123456Z",
  ...
}

3.1 Configurar Proyecto en Google Cloud (20 minutos)

Paso 1: Crear Proyecto en Google Cloud

1. Ir a https://console.cloud.google.com/
2. Hacer login con tu cuenta de Google (cualquiera)
3. Click en el selector de proyectos (arriba a la izquierda)
4. Click en "NEW PROJECT"
5. Configurar:
   • Project name: Biblioteca UTH
   • Organization: Dejar en "No organization"
6. Click "CREATE"
7. Esperar 30 segundos a que se cree el proyecto
8. Asegurarte de que el proyecto esté seleccionado (verlo arriba)

Paso 2: Habilitar Google+ API

1. En el menú lateral (☰), ir a "APIs & Services" → "Library"
2. Buscar: Google+ API
3. Click en "Google+ API"
4. Click "ENABLE"
5. Esperar a que se habilite

Paso 3: Configurar OAuth Consent Screen

1. En el menú lateral, ir a "APIs & Services" → "OAuth consent screen"
2. Seleccionar "External" (para que cualquiera pueda usarlo)
3. Click "CREATE"
4. Llenar formulario:
   • App name: Sistema Biblioteca UTH
   • User support email: Tu email
   • App logo: (Opcional, skip por ahora)
   • App domain: (Dejar vacío por ahora)
   • Authorized domains: (Dejar vacío)
   • Developer contact: Tu email
5. Click "SAVE AND CONTINUE"
6. Scopes: Click "ADD OR REMOVE SCOPES"
   • Buscar y seleccionar: userinfo.email
   • Buscar y seleccionar: userinfo.profile
   • Click "UPDATE"
7. Click "SAVE AND CONTINUE"
8. Test users: Agregar tu email de prueba
   • Click "+ ADD USERS"
   • Ingresar tu email
   • Click "ADD"
9. Click "SAVE AND CONTINUE"
10. Revisar y click "BACK TO DASHBOARD"

Paso 4: Crear OAuth 2.0 Credentials

1. En el menú lateral, ir a "APIs & Services" → "Credentials"
2. Click "+ CREATE CREDENTIALS"
3. Seleccionar "OAuth client ID"
4. Configurar:
   • Application type: Web application
   • Name: Biblioteca Web Client
   • Authorized JavaScript origins:
     • Click "+ ADD URI"
     • Agregar: http://localhost:8000
     • Click "+ ADD URI"
     • Agregar: http://127.0.0.1:8000
   • Authorized redirect URIs:
     • Click "+ ADD URI"
     • Agregar: http://localhost:8000/api/auth/google/callback/
     • Click "+ ADD URI"
     • Agregar: http://127.0.0.1:8000/api/auth/google/callback/
5. Click "CREATE"

Paso 5: Guardar Credenciales

4 Personalizar JWT Response

Crea libros/jwt_views.py para agregar datos personalizados al token:

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
from rest_framework_simplejwt.views import TokenObtainPairView


class CustomTokenObtainPairSerializer(TokenObtainPairSerializer):
    """Serializer personalizado con datos adicionales"""
    
    @classmethod
    def get_token(cls, user):
        token = super().get_token(user)
        
        # Agregar claims personalizados al token
        token['username'] = user.username
        token['email'] = user.email
        token['is_staff'] = user.is_staff
        token['full_name'] = f"{user.first_name} {user.last_name}"
        
        return token
    
    def validate(self, attrs):
        data = super().validate(attrs)
        
        # Agregar datos extra al response
        data['user'] = {
            'id': self.user.id,
            'username': self.user.username,
            'email': self.user.email,
            'first_name': self.user.first_name,
            'last_name': self.user.last_name,
            'is_staff': self.user.is_staff,
            'date_joined': str(self.user.date_joined)
        }
        
        return data


class CustomTokenObtainPairView(TokenObtainPairView):
    """Vista personalizada para obtener JWT"""
    serializer_class = CustomTokenObtainPairSerializer

Actualiza las URLs:

from .jwt_views import CustomTokenObtainPairView

urlpatterns = [
    # JWT personalizado
    path('auth/jwt/login/', CustomTokenObtainPairView.as_view(), name='jwt_login'),
    # ... resto
]

5 Probar JWT

1. Obtener Token (Login):

Respuesta esperada:

{
  "refresh": "eyJ0eXAiOiJKV1QiLCJhbGc...",
  "access": "eyJ0eXAiOiJKV1QiLCJhbGc...",
  "user": {
    "id": 1,
    "username": "admin",
    "email": "admin@biblioteca.com",
    "is_staff": true
  }
}

2. Usar Token para Acceder a API:

Respuesta esperada:

{
  "count": 5,
  "next": null,
  "previous": null,
  "results": [
    {
      "id": 1,
      "titulo": "Cien años de soledad",
      "autor": "Gabriel García Márquez",
      ...
    }
  ]
}

3. Refrescar Token:

3.2 Instalar y Configurar Django Allauth (15 minutos)

Paso 1: Instalar Django Allauth

✅ Verificar instalación:

Paso 2: Configurar en settings.py

Edita biblioteca_project/settings.py:

2.1 - Agregar a INSTALLED_APPS:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',  # ← AGREGAR (requerido por allauth)
    
    # Third-party apps
    'rest_framework',
    'corsheaders',
    'django_filters',
    'rest_framework_simplejwt',
    'oauth2_provider',  # ← AGREGAR (Django OAuth Toolkit)
    'allauth',  # ← AGREGAR
    'allauth.account',  # ← AGREGAR
    'allauth.socialaccount',  # ← AGREGAR
    'allauth.socialaccount.providers.google',  # ← AGREGAR
    
    # Tu aplicación
    'libros',
]

2.1.1 - AGREGAR MIDDLEWARE DE ALLAUTH:

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'allauth.account.middleware.AccountMiddleware',  # ← AGREGAR
]

2.2 - Agregar SITE_ID:

# =======================
# SITE CONFIGURATION
# =======================
SITE_ID = 1  # ← AGREGAR

2.3 - Configurar Authentication Backends:

# =======================
# AUTHENTICATION BACKENDS
# =======================
AUTHENTICATION_BACKENDS = [
    # Backend por defecto de Django (username/password)
    'django.contrib.auth.backends.ModelBackend',
    
    # Backend de allauth para OAuth social
    'allauth.account.auth_backends.AuthenticationBackend',
]

2.4 - Configurar Django Allauth:

# =======================
# DJANGO ALLAUTH CONFIG
# =======================

# Configuración de cuentas
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False  # Solo email para login social
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_VERIFICATION = 'optional'  # Para desarrollo: 'mandatory' en producción

# Configuración de login social
SOCIALACCOUNT_AUTO_SIGNUP = True  # Crear usuario automáticamente
SOCIALACCOUNT_EMAIL_VERIFICATION = 'none'  # No verificar email en OAuth

# Proveedores OAuth configurados
SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        },
        'APP': {
            'client_id': 'TU_GOOGLE_CLIENT_ID_AQUI',  # ← REEMPLAZAR
            'secret': 'TU_GOOGLE_CLIENT_SECRET_AQUI',  # ← REEMPLAZAR
            'key': ''
        }
    }
}

'client_id': '123456789-abcdefgh.apps.googleusercontent.com',
'secret': 'GOCSPX-aBcDeFgHiJkLmNoPqRsTuVwXyZ',

2.5 - Agregar Configuración de OAuth 2.0 Provider (Django OAuth Toolkit):

# =======================
# OAUTH 2.0 PROVIDER SETTINGS
# =======================
# Configuración para django-oauth-toolkit
OAUTH2_PROVIDER = {
    # Tiempo de vida de los tokens
    'ACCESS_TOKEN_EXPIRE_SECONDS': 3600,  # 1 hora
    'REFRESH_TOKEN_EXPIRE_SECONDS': 86400 * 7,  # 7 días
    
    # Scopes disponibles
    'SCOPES': {
        'read': 'Acceso de lectura',
        'write': 'Acceso de escritura',
    },
    
    # Tipo de token por defecto
    'ACCESS_TOKEN_MODEL': 'oauth2_provider.models.AccessToken',
    'REFRESH_TOKEN_MODEL': 'oauth2_provider.models.RefreshToken',
}

✅ VERIFICAR configuración:

Debe decir: System check identified no issues (0 silenced).

3.3 Ejecutar Migraciones y Configurar Admin (10 minutos)

Paso 1: Ejecutar migraciones

Salida esperada:

Running migrations:
  Applying sites.0001_initial... OK
  Applying sites.0002_alter_domain_unique... OK
  Applying account.0001_initial... OK
  Applying account.0002_email_max_length... OK
  Applying socialaccount.0001_initial... OK
  Applying socialaccount.0002_token_max_lengths... OK
  Applying socialaccount.0003_extra_data_default_dict... OK
  ...

Paso 2: Configurar Site en Admin

1. Arrancar servidor: python manage.py runserver
2. Ir a: http://127.0.0.1:8000/admin/
3. Login con tu superusuario (admin / admin123)
4. Click en "Sites"
5. Click en "example.com" (el único que hay)
6. Editar:
   • Domain name: localhost:8000
   • Display name: Biblioteca UTH
7. Click "SAVE"

Paso 3: Verificar Social Apps

1. En el admin, ir a "SOCIAL ACCOUNTS" → "Social applications"
2. Deberías ver que está vacío (lo configuraremos por código)

3.3.1 Configurar URLs de OAuth 2.0 (5 minutos)

Editar biblioteca_project/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    
    # API REST
    path('api/', include('libros.api_urls')),
    
    # OAuth URLs de allauth (para login con Google/Facebook)
    path('accounts/', include('allauth.urls')),
    
    # ← AGREGAR: OAuth 2.0 URLs de django-oauth-toolkit
    path('o/', include('oauth2_provider.urls', namespace='oauth2_provider')),
]

✅ VERIFICAR URLs:

Deberías ver algo como:

/accounts/google/login/
/accounts/google/callback/
/o/authorize/
/o/token/
/o/revoke_token/
...

3.3.2 Nota Importante sobre el Error 401 en test_oauth.py

'oauth2_provider.contrib.rest_framework.OAuth2Authentication',  # ← Esta línea

3.4 Crear Vista de OAuth y Generar JWT (25 minutos)

Crear archivo libros/oauth_views.py (nuevo):

from django.conf import settings
from django.contrib.auth import get_user_model
from rest_framework import status
from rest_framework.decorators import api_view, permission_classes
from rest_framework.permissions import AllowAny
from rest_framework.response import Response
from rest_framework_simplejwt.tokens import RefreshToken
from urllib.parse import urlencode  # ← IMPORTAR URLENCODE
import requests
import logging

logger = logging.getLogger(__name__)
User = get_user_model()


@api_view(['POST', 'GET'])  # ← AGREGAR SOPORTE PARA GET
@permission_classes([AllowAny])
def google_oauth_callback(request):
    """
    Endpoint que recibe el código de autorización de Google
    y devuelve tokens JWT de nuestra aplicación
    
    GET /api/auth/google/callback/?code=4/0AbUR2VN...
    o
    POST /api/auth/google/callback/
    Body: {
        "code": "4/0AbUR2VN..."  // Código de autorización de Google
    }
    """
    
    # 1. Obtener el código de autorización (de POST o GET)
    code = request.data.get('code') or request.query_params.get('code')  # ← CAMBIO AQUÍ
    
    if not code:
        error_msg = 'El código de autorización es requerido'
        logger.error(error_msg)
        if request.method == 'GET':
            return redirect(f'/oauth/login/?error={urllib.parse.quote(error_msg)}')
        return Response({'error': error_msg}, status=status.HTTP_400_BAD_REQUEST)
    
    try:
        # 2. Intercambiar código por access token de Google
        token_url = 'https://oauth2.googleapis.com/token'
        
        google_config = settings.SOCIALACCOUNT_PROVIDERS['google']['APP']
        
        token_data = {
            'code': code,
            'client_id': google_config['client_id'],
            'client_secret': google_config['secret'],
            'redirect_uri': 'http://localhost:8000/api/auth/google/callback/',  # Debe coincidir con Google Cloud
            'grant_type': 'authorization_code'
        }
        
        token_response = requests.post(token_url, data=token_data, timeout=10)
        token_response.raise_for_status()
        
        tokens = token_response.json()
        google_access_token = tokens.get('access_token')
        
        if not google_access_token:
            error_msg = 'No se pudo obtener access token de Google'
            logger.error(error_msg)
            return redirect(f'/oauth/login/?error={urllib.parse.quote(error_msg)}')
        
        logger.info(f"Access token de Google obtenido: {google_access_token[:20]}...")
        
        # 3. Obtener información del usuario de Google
        userinfo_url = 'https://www.googleapis.com/oauth2/v2/userinfo'
        headers = {'Authorization': f'Bearer {google_access_token}'}
        
        userinfo_response = requests.get(userinfo_url, headers=headers, timeout=10)
        userinfo_response.raise_for_status()
        
        user_data = userinfo_response.json()
        
        logger.info(f"Datos de usuario de Google: {user_data}")
        
        # 4. Crear o actualizar usuario en Django
        email = user_data.get('email')
        
        if not email:
            error_msg = 'No se pudo obtener el email del usuario'
            logger.error(error_msg)
            return redirect(f'/oauth/login/?error={urllib.parse.quote(error_msg)}')
        
        # Buscar si el usuario ya existe
        user, created = User.objects.get_or_create(
            email=email,
            defaults={
                'username': email.split('@')[0],  # Usar parte antes del @ como username
                'first_name': user_data.get('given_name', ''),
                'last_name': user_data.get('family_name', ''),
            }
        )
        
        # Si el usuario ya existía, actualizar su información
        if not created:
            user.first_name = user_data.get('given_name', user.first_name)
            user.last_name = user_data.get('family_name', user.last_name)
            user.save()
            logger.info(f"Usuario existente actualizado: {user.email}")
        else:
            logger.info(f"Nuevo usuario creado: {user.email}")
        
        # 5. Generar tokens JWT de nuestra aplicación
        refresh = RefreshToken.for_user(user)
        access_token = str(refresh.access_token)
        
        # 6. Preparar datos para enviar al frontend
        user_info = {
            'id': user.id,
            'email': user.email,
            'username': user.username,
            'first_name': user.first_name,
            'last_name': user.last_name,
            'is_staff': user.is_staff,
        }
        
        google_info = {
            'picture': user_data.get('picture'),
            'verified_email': user_data.get('verified_email'),
        }
        
        # Codificar datos para URL
        user_info_json = json.dumps(user_info)
        google_info_json = json.dumps(google_info)
        
        # Construir URL de redirección a oauth_login.html con todos los datos
        redirect_url = (
            f'/oauth/login/?'
            f'access_token={access_token}&'
            f'refresh_token={str(refresh)}&'
            f'user_info={urllib.parse.quote(user_info_json)}&'
            f'google_info={urllib.parse.quote(google_info_json)}&'
            f'message={urllib.parse.quote("Login exitoso con Google" if not created else "Cuenta creada exitosamente con Google")}'
        )
        
        logger.info(f"Redirigiendo a: {redirect_url[:100]}...")
        return redirect(redirect_url)
    
    except requests.Timeout:
        logger.error("Timeout al comunicarse con Google")
        return redirect(f'/oauth/login/?error={urllib.parse.quote("Timeout al comunicarse con Google")}')
    
    except requests.RequestException as e:
        logger.error(f"Error al comunicarse con Google: {str(e)}")
        return redirect(f'/oauth/login/?error={urllib.parse.quote(f"Error con Google: {str(e)}")}')
    
    except Exception as e:
        logger.error(f"Error inesperado en OAuth: {str(e)}")
        return redirect(f'/oauth/login/?error={urllib.parse.quote(f"Error inesperado: {str(e)}")}')


@api_view(['GET'])
@permission_classes([AllowAny])
def google_oauth_redirect(request):
    """
    Endpoint que redirige al usuario a Google para autorización
    
    GET /api/auth/google/redirect/
    
    Devuelve la URL a la que el frontend debe redirigir al usuario
    """
    
    google_config = settings.SOCIALACCOUNT_PROVIDERS['google']['APP']
    scopes = settings.SOCIALACCOUNT_PROVIDERS['google']['SCOPE']
    
    # Construir parámetros como diccionario para usar urlencode
    params = {
        'client_id': google_config["client_id"],
        'redirect_uri': 'http://127.0.0.1:8000/api/auth/google/callback/',  # Usar 127.0.0.1
        'scope': " ".join(scopes),
        'response_type': 'code',
        'access_type': 'offline',
        'prompt': 'consent',
    }
    
    # Construir URL con urlencode para codificar correctamente los parámetros
    auth_url = f'https://accounts.google.com/o/oauth2/v2/auth?{urlencode(params)}'  # ← USAR URLENCODE
    
    return Response({
        'auth_url': auth_url
    }, status=status.HTTP_200_OK)

✅ VERIFICAR archivo creado:

Debe decir: System check identified no issues (0 silenced).

@api_view(['POST', 'GET'])  # ← Ahora acepta GET también
def google_oauth_callback(request):
    code = request.data.get('code') or request.query_params.get('code')  # ← Obtiene code de POST o GET

from urllib.parse import urlencode  # ← Importar al inicio

params = {
    'client_id': google_config["client_id"],
    'redirect_uri': 'http://127.0.0.1:8000/api/auth/google/callback/',
    'scope': " ".join(scopes),
    'response_type': 'code',
    'access_type': 'offline',
    'prompt': 'consent',
}

auth_url = f'https://accounts.google.com/o/oauth2/v2/auth?{urlencode(params)}'  # ← urlencode para codificar

3.5 Agregar URLs para OAuth (5 minutos)

Editar libros/api_urls.py para agregar las rutas OAuth:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from rest_framework_simplejwt.views import (
    TokenObtainPairView,
    TokenRefreshView,
    TokenVerifyView,
)

from . import api_views
from . import oauth_views  # ← AGREGAR

router = DefaultRouter()
router.register(r'libros', api_views.LibroViewSet, basename='libro')
router.register(r'autores', api_views.AutorViewSet, basename='autor')
router.register(r'categorias', api_views.CategoriaViewSet, basename='categoria')
router.register(r'prestamos', api_views.PrestamoViewSet, basename='prestamo')

urlpatterns = [
    # ─────────────────────────────────
    # 🔐 AUTENTICACIÓN JWT
    # ─────────────────────────────────
    path('auth/jwt/login/', TokenObtainPairView.as_view(), name='jwt_login'),
    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
    path('token/verify/', TokenVerifyView.as_view(), name='token_verify'),
    
    # ─────────────────────────────────
    # 🔑 AUTENTICACIÓN OAUTH 2.0 (GOOGLE)
    # ─────────────────────────────────
    path('auth/google/redirect/', oauth_views.google_oauth_redirect, name='google_redirect'),
    path('auth/google/callback/', oauth_views.google_oauth_callback, name='google_callback'),
    
    # ─────────────────────────────────
    # 📚 ENDPOINTS CRUD
    # ─────────────────────────────────
    path('', include(router.urls)),
]

3.6 Crear Templates HTML para Pruebas (15 minutos)

Paso 1: Crear carpeta de templates

Paso 2: Configurar templates en settings.py

Edita biblioteca_project/settings.py, busca TEMPLATES y actualiza:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # ← AGREGAR esto
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Paso 3: Crear página de inicio (Home)

Crea el archivo templates/home.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biblioteca UTH - Sistema de Autenticación</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            background: white;
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 10px 50px rgba(0,0,0,0.2);
            max-width: 500px;
            width: 90%;
            text-align: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 2em;
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 40px;
            font-size: 1.1em;
        }
        
        .btn {
            display: inline-block;
            padding: 15px 40px;
            margin: 10px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1em;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }
        
        .btn-google {
            background: #4285f4;
            color: white;
        }
        
        .btn-google:hover {
            background: #357ae8;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(66, 133, 244, 0.4);
        }
        
        .btn-jwt {
            background: #11998e;
            color: white;
        }
        
        .btn-jwt:hover {
            background: #0e8074;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(17, 153, 142, 0.4);
        }
        
        .btn-api {
            background: #667eea;
            color: white;
        }
        
        .btn-api:hover {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        
        .divider {
            margin: 30px 0;
            height: 1px;
            background: #ddd;
        }
        
        .info {
            background: #f0f4ff;
            padding: 20px;
            border-radius: 8px;
            margin-top: 30px;
            text-align: left;
        }
        
        .info h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .info ul {
            list-style-position: inside;
            color: #555;
        }
        
        .info li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🏛️ Biblioteca UTH</h1>
        <p class="subtitle">Sistema de Gestión de Biblioteca</p>
        
        <!-- Login con Google -->
        <a href="{% url 'oauth_login' %}" class="btn btn-google">
            🔐 Login con Google
        </a>
        
        <div class="divider"></div>
        
        <!-- Login tradicional con JWT -->
        <a href="{% url 'jwt_login_page' %}" class="btn btn-jwt">
            🔑 Login con JWT
        </a>
        
        <div class="divider"></div>
        
        <!-- Ver API -->
        <a href="/api/" class="btn btn-api">
            📚 Explorar API REST
        </a>
        
        <div class="info">
            <h3>ℹ️ Información del Sistema</h3>
            <ul>
                <li>✅ API REST con Django REST Framework</li>
                <li>✅ Autenticación JWT</li>
                <li>✅ OAuth 2.0 con Google</li>
                <li>✅ MySQL como base de datos</li>
                <li>✅ Gestión completa de biblioteca</li>
            </ul>
        </div>
    </div>
</body>
</html>

Paso 4: Crear página de login OAuth

Crea el archivo templates/oauth_login.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login con Google - Biblioteca UTH</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 50px rgba(0,0,0,0.2);
            max-width: 600px;
            width: 100%;
        }
        
        h1 {
            color: #333;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .loading {
            text-align: center;
            color: #666;
            font-size: 1.2em;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .result {
            margin-top: 30px;
            padding: 20px;
            border-radius: 8px;
            display: none;
        }
        
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .user-info {
            background: #f0f4ff;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        .token-display {
            background: #2d2d2d;
            color: #4ec9b0;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            word-wrap: break-word;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 15px;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background: #5568d3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔐 Login con Google</h1>
        
        <div id="loading" class="loading">
            <div class="spinner"></div>
            <p>Procesando autenticación...</p>
        </div>
        
        <div id="result" class="result"></div>
    </div>
    
    <script>
        // Obtener código de autorización de la URL
        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get('code');
        const error = urlParams.get('error');
        
        if (error) {
            showError('Login cancelado o error: ' + error);
        } else if (!code) {
            // Si no hay código, redirigir a Google
            window.location.href = '/api/auth/google/redirect/';
        } else {
            // Si hay código, intercambiarlo por tokens
            exchangeCodeForTokens(code);
        }
        
        async function exchangeCodeForTokens(code) {
            try {
                const response = await fetch('/api/auth/google/callback/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ code: code })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    // Guardar tokens en localStorage
                    localStorage.setItem('access_token', data.access);
                    localStorage.setItem('refresh_token', data.refresh);
                    
                    showSuccess(data);
                } else {
                    showError(data.error || 'Error desconocido');
                }
            } catch (error) {
                showError('Error de red: ' + error.message);
            }
        }
        
        function showSuccess(data) {
            document.getElementById('loading').style.display = 'none';
            const resultDiv = document.getElementById('result');
            resultDiv.className = 'result success';
            resultDiv.style.display = 'block';
            
            resultDiv.innerHTML = `
                <h2>✅ ${data.message}</h2>
                
                <div class="user-info">
                    <h3>👤 Datos del Usuario</h3>
                    <p><strong>Email:</strong> ${data.user.email}</p>
                    <p><strong>Nombre:</strong> ${data.user.first_name} ${data.user.last_name}</p>
                    <p><strong>Username:</strong> ${data.user.username}</p>
                    ${data.google_data.picture ? `<img src="${data.google_data.picture}" alt="Foto de perfil" style="border-radius:50%;margin-top:10px">` : ''}
                </div>
                
                <div class="token-display">
                    <strong>🔑 Access Token (JWT):</strong><br>
                    ${data.access.substring(0, 50)}...
                </div>
                
                <a href="/api/" class="btn">📚 Ir a la API</a>
                <a href="/" class="btn">🏠 Volver al Inicio</a>
            `;
        }
        
        function showError(errorMessage) {
            document.getElementById('loading').style.display = 'none';
            const resultDiv = document.getElementById('result');
            resultDiv.className = 'result error';
            resultDiv.style.display = 'block';
            
            resultDiv.innerHTML = `
                <h2>❌ Error en el Login</h2>
                <p>${errorMessage}</p>
                <a href="/" class="btn">🏠 Volver al Inicio</a>
            `;
        }
    </script>
</body>
</html>

Paso 5: Crear vistas para servir los templates

Crea el archivo libros/web_views.py (nuevo):

from django.shortcuts import render, redirect
from django.conf import settings


def home(request):
    """Página de inicio"""
    return render(request, 'home.html')


def oauth_login(request):
    """Página de login con OAuth que maneja el callback de Google"""
    # Si hay un código en la URL, renderizar la página
    # que procesará el código
    return render(request, 'oauth_login.html')


def jwt_login_page(request):
    """Página de login con JWT (tradicional)"""
    return render(request, 'jwt_login.html')

Paso 6: Agregar URLs para las páginas web

Edita biblioteca_project/urls.py:

from django.contrib import admin
from django.urls import path, include
from libros import web_views  # ← AGREGAR

urlpatterns = [
    path('admin/', admin.site.urls),
    
    # URLs de la API
    path('api/', include('libros.api_urls')),
    
    # URLs de páginas web (para pruebas)
    path('', web_views.home, name='home'),
    path('oauth/login/', web_views.oauth_login, name='oauth_login'),
    path('login/jwt/', web_views.jwt_login_page, name='jwt_login_page'),
]

biblioteca_unidad4/
├── templates/
│   ├── home.html
│   └── oauth_login.html
├── libros/
│   ├── web_views.py  (nuevo)
│   ├── oauth_views.py
│   └── ...
└── ...

3.7 Crear Página de Login JWT Completa (10 minutos)

Paso 1: Crear archivo templates/jwt_login.html:

COPIAR TODO ESTE CÓDIGO en templates/jwt_login.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login JWT - Biblioteca UTH</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 50px rgba(0,0,0,0.2);
            max-width: 500px;
            width: 100%;
        }
        
        h1 {
            color: #333;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
        }
        
        input {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 1em;
            transition: all 0.3s ease;
        }
        
        input:focus {
            outline: none;
            border-color: #11998e;
        }
        
        .btn {
            width: 100%;
            padding: 15px;
            background: #11998e;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background: #0e8074;
            transform: translateY(-2px);
        }
        
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            display: none;
        }
        
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .token-display {
            background: #2d2d2d;
            color: #4ec9b0;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            word-wrap: break-word;
            font-family: 'Courier New', monospace;
            font-size: 0.85em;
            max-height: 150px;
            overflow-y: auto;
        }
        
        .link {
            display: inline-block;
            margin-top: 15px;
            color: #11998e;
            text-decoration: none;
            font-weight: bold;
        }
        
        .link:hover {
            text-decoration: underline;
        }

        .hint {
            font-size: 0.85em;
            color: #999;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔑 Login con JWT</h1>
        
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Usuario:</label>
                <input type="text" id="username" name="username" required placeholder="admin">
                <div class="hint">Usa: admin</div>
            </div>
            
            <div class="form-group">
                <label for="password">Contraseña:</label>
                <input type="password" id="password" name="password" required placeholder="••••••••">
                <div class="hint">Usa: admin123</div>
            </div>
            
            <button type="submit" class="btn" id="submitBtn">Iniciar Sesión</button>
        </form>
        
        <div id="result" class="result"></div>
        
        <a href="/" class="link">← Volver al inicio</a>
    </div>
    
    <script>
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const submitBtn = document.getElementById('submitBtn');
            const resultDiv = document.getElementById('result');
            
            submitBtn.disabled = true;
            submitBtn.textContent = 'Iniciando sesión...';
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            try {
                const response = await fetch('/api/auth/jwt/login/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    localStorage.setItem('access_token', data.access);
                    localStorage.setItem('refresh_token', data.refresh);
                    
                    resultDiv.className = 'result success';
                    resultDiv.style.display = 'block';
                    resultDiv.innerHTML = `
                        <h3>✅ Login Exitoso</h3>
                        <p>Tokens JWT generados correctamente</p>
                        
                        <div class="token-display">
                            <strong>Access Token:</strong><br>
                            ${data.access}
                        </div>
                        
                        <a href="/api/" class="btn" style="margin-top:15px;text-decoration:none;display:inline-block">
                            📚 Ir a la API
                        </a>
                    `;
                    
                    document.getElementById('loginForm').reset();
                    
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.style.display = 'block';
                    resultDiv.innerHTML = `
                        <h3>❌ Error en el Login</h3>
                        <p>${data.detail || 'Credenciales incorrectas'}</p>
                    `;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.style.display = 'block';
                resultDiv.innerHTML = `
                    <h3>❌ Error de Conexión</h3>
                    <p>${error.message}</p>
                `;
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = 'Iniciar Sesión';
            }
        });
    </script>
</body>
</html>

3.8 Probar Todo el Sistema OAuth + JWT (20 minutos)

Paso 1: Verificar que el servidor esté corriendo

Paso 2: Probar página de inicio

1. Abrir navegador en: http://127.0.0.1:8000/
2. Deberías ver la página con 3 botones:
   • 🔐 Login con Google
   • 🔑 Login con JWT
   • 📚 Explorar API REST

Paso 3: Probar Login JWT

1. Click en "🔑 Login con JWT"
2. O ir directamente a: http://127.0.0.1:8000/login/jwt/
3. Ingresar credenciales:
   • Usuario: admin
   • Contraseña: admin123
4. Click "Iniciar Sesión"
5. ✅ Salida esperada:
   • Mensaje: "Login Exitoso"
   • Token JWT visible (eyJhbGc...)
   • Botón "Ir a la API"

Paso 4: Probar Login con Google

1. Volver a la página de inicio: http://127.0.0.1:8000/
2. Click en "🔐 Login con Google"
3. O ir a: http://127.0.0.1:8000/oauth/login/
4. Te redirigirá a Google
5. Selecciona tu cuenta de Google (debe estar en la lista de test users)
6. Acepta los permisos
7. ✅ Salida esperada:
   • Redirige de vuelta a tu app
   • Mensaje: "Login exitoso con Google" o "Cuenta creada exitosamente"
   • Tu información de usuario (nombre, email, foto)
   • Token JWT generado

Paso 5: Probar API con el token

Después de cualquier login (JWT o Google), el token se guarda en localStorage.

Opción A: Usar el navegador (interfaz navegable de DRF)

1. Click en el botón "📚 Ir a la API" o visita: http://127.0.0.1:8000/api/
2. Verás la interfaz navegable de Django REST Framework
3. Explora los endpoints disponibles

Opción B: Usar Postman/Thunder Client

localStorage.getItem('access_token')

[
    {
        "id": 1,
        "titulo": "Don Quijote de la Mancha",
        "isbn": "978-84-376-0494-7",
        "fecha_publicacion": "1605-01-16",
        "stock": 5,
        "categoria": 1,
        "autores": [1]
    },
    ...
]

Paso 6: Probar CRUD completo

a) Crear un nuevo libro (POST):

POST http://127.0.0.1:8000/api/libros/
Headers: Authorization: Bearer TU_TOKEN
Body (JSON):
{
    "titulo": "Cien Años de Soledad",
    "isbn": "978-03-071-4728-7",
    "fecha_publicacion": "1967-05-30",
    "stock": 3,
    "categoria": 1,
    "autores": [1]
}

b) Actualizar un libro (PUT):

PUT http://127.0.0.1:8000/api/libros/1/
Headers: Authorization: Bearer TU_TOKEN
Body (JSON):
{
    "titulo": "Don Quijote de la Mancha (Edición Actualizada)",
    "stock": 10
}

c) Eliminar un libro (DELETE):

DELETE http://127.0.0.1:8000/api/libros/5/
Headers: Authorization: Bearer TU_TOKEN