Cómo Configurar Facebook OAuth 2.0 y Activar el Inicio de Sesión con Meta Paso a Paso

El acceso social mediante Facebook / Meta OAuth 2.0 permite a tus clientes y usuarios registrarse e identificarse en tu plataforma de presupuestos utilizando su cuenta de Facebook con un solo clic. En esta guía técnica paso a paso aprenderás cómo dar de alta tu aplicación en Meta for Developers, configurar el caso de uso de inicio de sesión, evitar el error crítico de Invalid Scopes: email, cumplir con las exigencias de verificación de portfolio de Meta y activar el botón de acceso en el sistema.

1. Requisitos Previos

Antes de iniciar la configuración, asegúrate de disponer de:

• Una cuenta de Facebook activa (personal o comercial).
• Acceso con rol de Administrador en esta instalación de Presupuestos.
• La URL de tu instalación (en entorno local: http://localhost/Presupuestos; en producción con VPS/Hosting: https://tudominio.com).
• Tu logotipo comercial en formato cuadrado (PNG o JPG de al menos 512x512 o 1024x1024 píxeles).
• Las páginas públicas de Términos y Privacidad (tu sistema ya las incluye por defecto en /privacidad y /terminos).

2. Crear una Aplicación en Meta for Developers

Meta for Developers es la consola oficial para gestionar aplicaciones, APIs y accesos de Facebook e Instagram:

1. Ingresa a Meta for Developers e inicia sesión con tu cuenta de Facebook.
2. En la esquina superior derecha, haz clic en «Mis apps».
3. Haz clic en el botón azul «Crear app».
4. En el selector de Casos de uso, selecciona: «Autenticar y solicitar datos a usuarios con el inicio de sesión con Facebook» (o Facebook Login) y presiona «Siguiente».
5. En la pantalla de «Negocio» (Portfolio comercial):
   • Si te aparece el aviso amarillo «No hay negocios disponibles», no te preocupes: no es un bloqueo para crear la app de prueba. Haz clic directamente en el botón azul «Siguiente».
   • (Nota técnica importante: Más adelante, para publicar la app para todo público fuera de tu equipo, Meta te solicitará asociar un portfolio comercial verificado, como veremos en la Sección 6).
6. En la pantalla de Detalles de la app:
   • Nombre de la app: Ingresa Presupuestos o el nombre de tu marca.
   • Correo electrónico de contacto: Tu dirección de correo administrativo.
7. Haz clic en «Crear app». Si Facebook te solicita confirmar tu contraseña, ingrésala para acceder al panel principal.

3. Configuración Básica Obligatoria (Ícono, Políticas y Términos)

Meta exige que cualquier aplicación cuente con información institucional antes de autorizar el tráfico de usuarios:

1. En el menú lateral izquierdo, despliega Configuración de la app y selecciona «Básica».
2. Completa los siguientes campos obligatorios:
   • Ícono de la app: Sube tu logotipo cuadrado (de al menos 512x512 píxeles).
   • URL de la política de privacidad: https://tudominio.com/privacidad (o la URL de tu servidor).
   • URL de Condiciones del servicio: https://tudominio.com/terminos
   • Eliminación de datos de usuario: En el desplegable elige «URL de instrucciones para la eliminación de datos» y coloca: https://tudominio.com/terminos.
   • Categoría: Selecciona Utilidad y productividad o Negocios.
3. ¡Atención con el campo «Dominios de la app»!:
   • Si estás configurando tu servidor de producción con dominio propio, ingresa tu dominio (ejemplo: tudominio.com).
   • Si estás realizando pruebas en tu computadora local (localhost), deja el campo «Dominios de la app» completamente vacío. Facebook no permite mezclar dominios externos con localhost y bloquearía la URL de callback.
4. Haz clic en el botón azul «Guardar cambios» al final de la página.

4. Configurar la URL de Redireccionamiento OAuth (Callback URI)

Facebook necesita registrar la dirección exacta a la cual devolverá al usuario tras autenticarse:

1. En el menú de la izquierda, haz clic en «Casos de uso».
2. En la tarjeta «Autenticar y solicitar datos a usuarios con el inicio de sesión con Facebook», haz clic en «Personalizar» (o en la subpestaña Configurar).
3. Busca la sección «Configuración del inicio de sesión con Facebook» y localiza el campo:
   «URI de redireccionamiento de OAuth válidos» (Valid OAuth Redirect URIs).
4. Pega la URI de callback generada por tu instalación de Presupuestos:
   • Para producción: https://tudominio.com/auth/facebook/callback
   • Para local: http://localhost/Presupuestos/auth/facebook/callback
5. Haz clic en «Guardar cambios».

5. Obtener las Credenciales (App ID y App Secret)

Para conectar Facebook con tu instalación de Presupuestos necesitas dos claves:

1. En el menú lateral de Meta, vuelve a Configuración de la app > Básica.
2. En la parte superior verás:
   • Identificador de la app (App ID): Un número largo de unos 16 dígitos (por ejemplo: 1616626736869439). Cópialo.
   • Clave secreta de la app (App Secret): Oculta bajo puntos negros. Haz clic en el botón «Mostrar», escribe tu contraseña de Facebook y cópiala con cuidado.

6. La Exigencia de Meta para «Todo Público» (Modo Desarrollo vs. Modo En Vivo)

A diferencia de Google OAuth (donde cualquier persona puede publicar un login público en minutos), Meta aplica políticas de privacidad corporativas muy estrictas. Es fundamental que conozcas cómo operan los dos modos:

7. Activar las Credenciales en tu Sistema Presupuestos

Con las claves en mano, activarlas en tu sistema es sumamente sencillo:

1. Inicia sesión con tu cuenta de Administrador en tu plataforma Presupuestos.
2. En el menú de navegación, ve a Configuración (en la URL /local/configuration).
3. Haz clic en la pestaña «Acceso Social».
4. En el bloque Facebook / Meta Login:
   • Pega tu Identificador de la App (App ID) en el primer casillero.
   • Pega tu Clave secreta de la App (App Secret) en el segundo casillero.
   • Enciende el interruptor (switch) marcado como Activo.
5. Haz clic en el botón verde «Guardar configuración de acceso social» al final de la página.

8. Verificación en la Pantalla de Login

Para comprobar que el acceso opera correctamente:

1. Cierra tu sesión o abre una pestaña privada en tu navegador.
2. Ve a la pantalla de acceso en /login.
3. Verás ahora el botón azul «Continuar con Facebook» junto al de Google.
4. Haz clic en él: Facebook te abrirá su pasarela oficial para autorizar el acceso y tu sistema te ingresará al panel de presupuestos de forma instantánea.

9. Solución de Problemas Frecuentes