Configura el inicio de sesión social con Facebook

El conector oficial de Logto para el inicio de sesión social de Facebook.

tip

En esta guía, asumimos que tienes conocimientos básicos de los conectores de Logto. Si no los tienes, consulta la guía Configurar conectores para comenzar.

Comenzar

El conector de Facebook proporciona una forma concisa para que tu aplicación utilice el sistema de autenticación OAuth 2.0 de Facebook.

Registra una cuenta de desarrollador de Facebook

Regístrate como Desarrollador de Facebook si aún no tienes una.

Configura una aplicación de Facebook

1. Visita la página de Aplicaciones.
2. Haz clic en tu aplicación existente o crea una nueva si es necesario.
   • El tipo de aplicación seleccionado depende de ti, pero debe tener el producto Facebook Login.
3. En la página del panel de la aplicación, desplázate a la sección "Agregar un producto" y haz clic en el botón "Configurar" en la tarjeta "Facebook Login".
4. Omite la página de inicio rápido de Facebook Login y haz clic en la barra lateral -> "Productos" -> "Facebook Login" -> "Configuración".
5. En la página de Configuración de Facebook Login, completa ${your_logto_origin}/callback/${connector_id} en el campo "Valid OAuth Redirect URIs". El connector_id se puede encontrar en la barra superior de la página de detalles del conector en la Consola de Administración de Logto. Por ejemplo:
   • https://logto.dev/callback/${connector_id} para producción
   • https://localhost:3001/callback/${connector_id} para pruebas en el entorno local
6. Haz clic en el botón "Guardar cambios" en la esquina inferior derecha.

Componer el JSON del conector

1. En la página del panel de la aplicación de Facebook, haz clic en la barra lateral -> "Configuración" -> "Básico".
2. Verás el "ID de la aplicación" y el "Secreto de la aplicación" en el panel.
3. Haz clic en el botón "Mostrar" junto al cuadro de entrada del Secreto de la aplicación para copiar su contenido.
4. Completa la configuración del conector de Logto:
   • Completa el campo clientId con la cadena del ID de la aplicación.
   • Completa el campo clientSecret con la cadena del Secreto de la aplicación.
   • Completa el campo scope con una lista separada por comas o espacios de permisos en cadena. Si no especificas un alcance, el alcance predeterminado es email,public_profile.

Prueba el inicio de sesión con los usuarios de prueba de Facebook

Puedes usar las cuentas de los usuarios de prueba, desarrolladores y administradores para probar el inicio de sesión con la aplicación relacionada tanto en modo de desarrollo como en modo en vivo.

También puedes llevar la aplicación a producción directamente para que cualquier usuario de Facebook pueda iniciar sesión con la aplicación.

• En la página del panel de la aplicación, haz clic en la barra lateral -> "Roles" -> "Usuarios de prueba".
• Haz clic en el botón "Crear usuarios de prueba" para crear un usuario de prueba.
• Haz clic en el botón "Opciones" del usuario de prueba existente, y verás más operaciones, por ejemplo, "Cambiar nombre y contraseña".

Publicar la configuración de inicio de sesión de Facebook

Por lo general, solo los usuarios de prueba, administradores y desarrolladores pueden iniciar sesión con la aplicación relacionada en modo de desarrollo.

Para permitir que los usuarios normales de Facebook inicien sesión con la aplicación en el entorno de producción, es posible que necesites cambiar tu aplicación de Facebook a modo en vivo, dependiendo del tipo de aplicación. Por ejemplo, la aplicación de tipo puramente empresarial no tiene el botón de cambio a "en vivo", pero no bloqueará tu uso.

1. En la página del panel de la aplicación de Facebook, haz clic en la barra lateral -> "Configuración" -> "Básico".
2. Completa los campos "URL de la política de privacidad" y "Eliminación de datos de usuario" en el panel si es necesario.
3. Haz clic en el botón "Guardar cambios" en la esquina inferior derecha.
4. Haz clic en el botón de cambio a "En vivo" en la barra superior de la aplicación.

Tipos de configuración

Nombre	Tipo
clientId	string
clientSecret	string
scope	string

Referencias

• Facebook Login - Documentación - Facebook para Desarrolladores
  • Construir manualmente un flujo de inicio de sesión
  • Guía de permisos