🚀 Configurar ngrok para Facebook API

Solución HTTPS en 10 minutos - Enero 2026

Guía paso a paso con capturas y comandos exactos

✅ ¿Qué es ngrok?

ngrok crea un túnel HTTPS desde Internet hacia tu servidor local Django (localhost:8000)

Ventajas:

  • ✅ HTTPS automático y válido
  • ✅ No necesitas configurar certificados SSL
  • ✅ Facebook lo acepta sin problemas
  • ✅ Gratis para desarrollo
  • ✅ Puedes compartir tu proyecto con otros

📥 PASO 1: Descargar e Instalar ngrok

1A Descargar ngrok

  1. Ve a: https://ngrok.com/download
  2. Haz clic en el botón: Download for Windows
  3. Se descargará un archivo: ngrok-v3-stable-windows-amd64.zip
  4. IMPORTANTE: No necesitas crear cuenta (puedes, pero no es obligatorio)

1B Extraer ngrok

  1. Ve a tu carpeta de Descargas
  2. Haz clic derecho en: ngrok-v3-stable-windows-amd64.zip
  3. Selecciona: "Extraer aquí" o "Extract Here"
  4. Verás un archivo: ngrok.exe
  5. Mueve ngrok.exe a una carpeta fácil de recordar, por ejemplo: 
    C:\ngrok\ngrok.exe

    O simplemente déjalo en Descargas si prefieres

💡 Tip: Puedes crear una carpeta C:\Tools o C:\ngrok para tener todas tus herramientas de desarrollo organizadas.

⚙️ PASO 2: Ejecutar Django y ngrok

2A Abrir DOS terminales/ventanas de CMD

Necesitas 2 ventanas de PowerShell o CMD abiertas al mismo tiempo:

  1. Terminal 1: Para Django (localhost:8000)
  2. Terminal 2: Para ngrok (túnel HTTPS)
⚠️ IMPORTANTE: Ambas ventanas deben estar abiertas al mismo tiempo. NO las cierres hasta que termines de probar.

2B Terminal 1: Ejecutar Django

  1. Abre PowerShell o CMD
  2. Navega a tu proyecto Django: 
    cd C:\Proyectos_Django\facebook_integration
  3. Activa el entorno virtual: 
    venv\Scripts\activate
  4. Ejecuta el servidor Django: 
    python manage.py runserver
  5. Deberías ver:
    Django version 5.x.x, using settings 'facebook_integration.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CTRL-BREAK.
  6. ¡DEJA ESTA VENTANA ABIERTA! No la cierres.

2C Terminal 2: Ejecutar ngrok

  1. Abre una SEGUNDA ventana de PowerShell o CMD
  2. Navega a donde guardaste ngrok.exe: 
    cd C:\ngrok

    O si lo dejaste en Descargas:

    cd C:\Users\TU_USUARIO\Downloads
  3. Ejecuta ngrok: 
    ngrok http 8000
  4. Verás una pantalla como esta:
    ngrok (Ctrl+C to quit) Session Status online Account Free (no account) Version 3.15.0 Region United States (us) Latency 24ms Web Interface http://127.0.0.1:4040 Forwarding https://abc123def456.ngrok-free.app -> http://localhost:8000 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00
  5. ¡IMPORTANTE! Busca la línea que dice:
    Forwarding: https://abc123def456.ngrok-free.app
  6. COPIA esa URL (será diferente cada vez que ejecutes ngrok): 
    https://abc123def456.ngrok-free.app
  7. ¡DEJA ESTA VENTANA ABIERTA TAMBIÉN!
⚠️ NOTA: La URL de ngrok cambia cada vez que lo reinicias (en la versión gratuita). Si quieres una URL fija, necesitas crear cuenta gratuita en ngrok.com y usar un authtoken.

🔧 PASO 3: Configurar Facebook Developers con ngrok

3A Actualizar URI de Redireccionamiento

  1. Ve a: developers.facebook.com
  2. Selecciona tu app
  3. Menú lateral → "Inicio de sesión con Fac..." ▼ → "Configuración"
  4. Busca: "URI de redireccionamiento de OAuth válidas"
  5. BORRA cualquier URL anterior (localhost, 127.0.0.1, etc.)
  6. AGREGA la URL de ngrok + /facebook/callback/: 
    https://abc123def456.ngrok-free.app/facebook/callback/

    ⚠️ REEMPLAZA abc123def456 con TU URL de ngrok

  7. Verifica las configuraciones OAuth:
    • Inicio de sesión de OAuth de cliente: SÍ ✅
    • Inicio de sesión web de OAuth: SÍ ✅
    • Aplicar HTTPS: SÍ ✅ (ahora SÍ puede estar activado)
  8. Haz clic en: "Guardar cambios"
📸 Debe verse así:

URI de redireccionamiento de OAuth válidas:
┌──────────────────────────────────────────────────────┐
│ https://abc123def456.ngrok-free.app/facebook/callback/ │
└──────────────────────────────────────────────────────┘

☑ Inicio de sesión de OAuth de cliente: SÍ
☑ Inicio de sesión web de OAuth: SÍ
☑ Aplicar HTTPS: SÍ

3B Actualizar Dominios de la App

  1. Menú lateral → "Configuración de la app" ▼ → "Básica"
  2. Busca: "Dominios de la app"
  3. BORRA localhost si está ahí
  4. AGREGA el dominio de ngrok (sin https://, sin /): 
    abc123def456.ngrok-free.app

    ⚠️ IMPORTANTE: Solo el dominio, NO la URL completa

  5. Haz clic en: "Guardar cambios"
📸 Debe verse así:

Dominios de la app:
┌────────────────────────────────────┐
│ abc123def456.ngrok-free.app │
└────────────────────────────────────┘

⚙️ PASO 4: Actualizar Django settings.py

4 Cambiar FACEBOOK_REDIRECT_URI

  1. Abre: C:\Proyectos_Django\facebook_integration\facebook_integration\settings.py
  2. Busca la línea de FACEBOOK_REDIRECT_URI
  3. CAMBIA de localhost a ngrok: 
    # ===== ANTES (localhost - NO funciona con HTTPS forzado) =====
FACEBOOK_REDIRECT_URI = 'http://localhost:8000/facebook/callback/'

# ===== DESPUÉS (ngrok - funciona con HTTPS) =====
FACEBOOK_REDIRECT_URI = 'https://abc123def456.ngrok-free.app/facebook/callback/'

    ⚠️ REEMPLAZA abc123def456 con TU URL de ngrok

  4. Guarda el archivo (Ctrl+S)
  5. NO reinicies el servidor Django (Django detecta cambios automáticamente)
⚠️ IMPORTANTE: Cada vez que reinicies ngrok, la URL cambiará. Deberás actualizar:
  1. Facebook Developers (URI de redireccionamiento + Dominio)
  2. Django settings.py (FACEBOOK_REDIRECT_URI)

Solución: Crear cuenta en ngrok.com (gratis) te da una URL fija.

🧪 PASO 5: Probar la Aplicación

5 Prueba Completa

  1. Verifica que ambas terminales estén corriendo:
    • Terminal 1: Django en localhost:8000 ✅
    • Terminal 2: ngrok mostrando la URL ✅
  2. Abre navegador en modo incógnito (Ctrl+Shift+N)
  3. Ve a la URL de ngrok + /facebook/login/: 
    https://abc123def456.ngrok-free.app/facebook/login/
  4. La primera vez que uses ngrok, verás una página de advertencia de ngrok:
    📸 "You are about to visit: abc123def456.ngrok-free.app"
    [Botón: Visit Site]

    Haz clic en "Visit Site"

  5. Deberías ser redirigido a Facebook
  6. Facebook mostrará:
    • "¿Quieres que [Tu App] tenga acceso a tu perfil público?"
    • Botón "Continuar" o "De acuerdo"
    • ✅ El botón DEBE estar ACTIVO (azul, clickeable)
  7. Haz clic en "Continuar"
  8. Deberías ser redirigido a: 
    https://abc123def456.ngrok-free.app/dashboard/
  9. Si ves tu dashboard con tu nombre y foto → ¡FUNCIONA! 🎉

✅ Verificación Final

Checklist - TODO debe estar ✅:

Facebook Developers:

  • ☐ URI de redireccionamiento: https://TU_URL_NGROK/facebook/callback/
  • ☐ Dominios de la app: TU_DOMINIO_NGROK (sin https)
  • ☐ Client OAuth Login: SÍ
  • ☐ Web OAuth Login: SÍ
  • ☐ Aplicar HTTPS: SÍ (ahora puede estar activado)

Django:

  • ☐ settings.py tiene: FACEBOOK_REDIRECT_URI = 'https://TU_URL_NGROK/facebook/callback/'
  • ☐ FACEBOOK_APP_ID correcto
  • ☐ FACEBOOK_APP_SECRET correcto

Terminales:

  • ☐ Terminal 1: Django corriendo en localhost:8000
  • ☐ Terminal 2: ngrok corriendo y mostrando URL HTTPS

💡 TIPS Importantes

🔄 Si reinicias ngrok:

  1. La URL de ngrok cambiará (versión gratuita)
  2. Debes actualizar:
    • Facebook Developers (URI + Dominio)
    • Django settings.py (FACEBOOK_REDIRECT_URI)

🔐 Para URL fija (Recomendado):

  1. Crea cuenta GRATIS en: ngrok.com/signup
  2. Copia tu authtoken del dashboard
  3. Ejecuta: 
    ngrok config add-authtoken TU_TOKEN_AQUI
  4. Ahora puedes reservar un dominio fijo (gratis) en tu cuenta
  5. Ejecuta: 
    ngrok http --domain=tu-dominio-fijo.ngrok-free.app 8000

📊 Dashboard de ngrok:

Mientras ngrok está corriendo, puedes ver todas las peticiones HTTP en:

http://localhost:4040

Útil para debuggear y ver qué datos envía/recibe Facebook.

🆘 Solución de Problemas

Error: "Tunnel not found"

Causa: ngrok no está corriendo o se cerró

Solución:

  1. Abre Terminal 2 de nuevo
  2. Ejecuta: ngrok http 8000
  3. Actualiza la URL en Facebook y settings.py con la nueva

Error: "Failed to complete tunnel connection"

Causa: Django no está corriendo

Solución:

  1. Verifica Terminal 1 (Django debe estar corriendo)
  2. Si no está, ejecuta: python manage.py runserver

Error: "Invalid redirect_uri"

Causa: La URL en settings.py no coincide con Facebook

Solución:

  1. Copia EXACTAMENTE la URL de ngrok
  2. Verifica que sea HTTPS
  3. Verifica que termine en /facebook/callback/
  4. Actualiza en Facebook Y en settings.py

🎉 ¡LISTO!

Ahora tienes HTTPS funcionando con ngrok

  1. Terminal 1: python manage.py runserver ✅
  2. Terminal 2: ngrok http 8000 ✅
  3. Facebook configurado con URL de ngrok ✅
  4. Django settings.py actualizado ✅
  5. Probar en: https://TU_URL_NGROK/facebook/login/ ✅

¡Tu integración con Facebook API está completa!