Inicio de sesión con Facebook: login rápido para tus clientes

Inicio de sesión con Facebook: login rápido para tus clientes

Aprenderás a activar el botón “Ingresar con Facebook” en tu sitio y a configurar correctamente una App en Meta para que el inicio de sesión funcione en producción.

Esta aplicación permite que tus clientes inicien sesión o se registren usando su cuenta de Facebook, sin crear una contraseña nueva. Con un clic, autorizan el acceso y quedan logueados automáticamente en tu sitio.

---

Beneficios

• Reduce fricción en registro e inicio de sesión.
• Aumenta conversiones (menos abandonos por formularios largos).
• Mejora la experiencia móvil (más rápido, menos escritura).
• Datos más confiables (nombre, email y foto según permisos).
• Menos “olvidé mi contraseña” y menos soporte.
• Percepción más profesional (login moderno y reconocido).

---

Pasos detallados

A) Instalar y activar la aplicación en Waclis

1. Entra al panel de tu sitio.
2. Ve a Configuración > Aplicaciones.
3. Filtra por la categoria “Recursos extra”
4. Busca Inicio de sesión con Facebook (o “Autenticación con Facebook”).
5. Haz clic en Instalar.
6. Presiona Activar aplicación.

✅ Al activarse, se habilita el botón “Ingresar con Facebook” en:

• Pantalla de inicio de sesión
• Formulario de registro

B) Crear la App en Meta (Facebook Developers)

⚠️

Este paso es obligatorio: el login depende de una App válida en Meta.

1. Entra a Meta for Developers (developers.facebook.com) e inicia sesión.

2. Ve a Mis apps y elige Crear app.

3. Tipo de aplicación: selecciona Consumer (Consumidor) (cuando el objetivo es login de usuarios).

4. Completa:

   • Nombre de la app (ej.: “MiSitio - Login”)
   • Email de contacto

5. Confirma Crear aplicación.

C) Agregar el producto “Facebook Login”

1. Dentro del panel de tu App, ve a Agregar producto.
2. Selecciona Facebook Login y haz clic en Configurar.
3. Elige la plataforma Web.

D) Configurar URL del sitio + dominios autorizados

1. En la configuración de la App, busca Settings / Configuración > Básica.

2. Completa:

   • Dominios de la aplicación (App Domains): tusitio.com
   • URL del sitio: https://tusitio.com

💡

Recomendación: si tu sitio responde con y sin “www”, agrega ambos dominios cuando Meta lo permita (según el campo).

E) Cargar la “URI de redirección OAuth válida” (el paso más importante)

Meta usa una lista de Valid OAuth Redirect URIs y exige coincidencia exacta (modo estricto).

1. Ve a Facebook Login > Settings (Configuración).

2. Busca el campo Valid OAuth Redirect URIs (URI de redirección OAuth válidas).

3. Pega exactamente la URL callback que te indica Waclis en la aplicación. Ejemplo típico:

   • https://tusitio.com/auth/facebook/callback

⚠️

Debe coincidir 100%: protocolo (https), dominio, ruta, y barra final si aplica.

F) Obtener credenciales (App ID y App Secret)

1. Ve a Configuración > Básica.

2. Copia:

   • App ID
   • App Secret (usa “Mostrar” para verlo)

G) Pegar credenciales en Waclis

1. Ve a Configuración > Aplicaciones > Inicio de sesión con Facebook.

2. Pega:

   • App ID
   • App Secret

3. Haz clic en Guardar.

H) Pasar la App a “En vivo (Live)”

Por defecto, Meta crea las apps en modo desarrollo, y en ese modo el login suele funcionar solo para usuarios con rol dentro de la app (admins/testers). Para que funcione para tus clientes reales, debe estar Live.

1. En el panel superior de tu App, cambia: Desarrollo → En vivo (Live).

2. Si Meta te pide completar datos faltantes (muy común), completa lo básico:

   • Email de contacto
   • URL de política de privacidad
   • Categoría de la app
   • (y lo que Meta marque como requerido)

I) Permisos recomendados

Para un login estándar, normalmente alcanza con:

• email
• public_profile

✅ No solicites permisos extra si no son necesarios: suelen exigir revisión y demorar.

J) Prueba final (checklist rápido)

1. Abre tu sitio en modo incógnito.

2. Haz clic en Ingresar con Facebook.

3. Acepta permisos.

4. Verifica que:

   • Te loguea y te lleva al sitio correctamente
   • El usuario queda creado/registrado si era nuevo

---

Ejemplos de casos de uso

• Tienda de indumentaria con tráfico móvil: registro en 1 clic para no perder ventas.
• Mayorista donde hay que iniciar sesión para ver precios: menos fricción al pedir acceso.
• Club de descuentos/membresías: alta rápida y con datos confiables.

---

Errores comunes (y cómo evitarlos)

• No pasar la App a Live → el login no funciona para clientes reales.
• Redirect URI distinta (un carácter cambia todo) → error de OAuth.
• Dominio mal cargado en App Domains → rechazos o bloqueos.
• Copiar mal el App Secret → el login no valida.
• Sitio sin HTTPS → suele generar problemas o advertencias en flujos de autenticación.