Configuración de inicio de sesión de Facebook

Introducción

En esta guía, aprenderá a configurar el inicio de sesión de Facebook con Capgo Social Login. Necesitará lo siguiente:

• Una cuenta de desarrollador de Facebook
• El nombre de paquete o ID de su aplicación
• Acceso a una terminal para generar claves de hash (Android)

Configuración general

Si no tienes ya una aplicación de Facebook creada, sigue estos pasos:

1. Crear una aplicación de Facebook

   Sigue el tutorial para Crear una aplicación

2. Agregar inicio de sesión de Facebook a tu aplicación

   En la consola de desarrolladores de Facebook, agrega el producto de inicio de sesión de Facebook a tu aplicación

3. Antes de que puedas publicar tu aplicación para el público, sigue este tutorial para publicarla

Información importante

Aquí es donde encontrarás la información clave que necesitarás para la integración:

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Inscripción de negocio de Facebook

Este plugin admite el inicio de sesión de Facebook para empresas para características y permisos relacionados con negocios. Las cuentas de empresas pueden solicitar permisos adicionales más allá del inicio de sesión estándar de consumidores, incluyendo la gestión de Instagram y Perfiles.

Los permisos de negocios admitidos incluyen:

• instagram_basic - Acceso a Instagram Basic Display API
• instagram_manage_insights - Acceso a Instagram Insights
• pages_show_list - Lista de Perfiles que la persona administra
• pages_read_engagement - Leer datos de compromiso de Perfiles
• pages_manage_posts - Administrar publicaciones en Perfiles
• business_management - Administre activos comerciales

Consulte el Referencia de permisos de Facebook para obtener la lista completa de permisos.

Requisitos de configuración:

1. Su aplicación de Facebook debe configurarse como una aplicación de negocio en el Console de Desarrolladores de Facebook.
2. Los permisos de negocio pueden requerir una revisión de la aplicación de Facebook antes de su uso en producción.
3. Su aplicación debe cumplir con las políticas de uso comercial de Facebook.

Acceso básico a Instagram

await SocialLogin.initialize({
  facebook: {
    appId: 'your-business-app-id',
    clientToken: 'your-client-token',
  },
});

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'public_profile',
      'instagram_basic',
      'pages_show_list',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'email', 'instagram_business_account'],
  },
});

Gestión de páginas

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'pages_show_list',
      'pages_manage_posts',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'accounts{id,name,instagram_business_account}'],
  },
});

Observaciones importantes:

• Puedes probar permisos comerciales con usuarios de prueba y aplicaciones de desarrollo antes de la revisión de la aplicación.
• Most business permissions require Facebook App Review before production use.
• Las API comerciales tienen límites de velocidad diferentes. Revisa la documentación actual del plataforma de Facebook antes de lanzar.
• Sigue el Guía de integración de Facebook para negocios al configurar la aplicación.

Configuración de Android

1. Agrega permiso de internet a tu AndroidManifest.xml

   Asegúrese de que esta línea esté presente:

   <uses-permission android:name="android.permission.INTERNET"/>

2. Genera tu hash de clave Android

   Este es un paso de seguridad crucial requerido por Facebook. Abre tu terminal y ejecuta:

   keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -A

   Cuando se le solicite una contraseña, utilice: android

   Nota

   Para compilaciones de producción, necesitarás utilizar tu keystore de producción:

   keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl sha1 -binary | openssl base64 -A

3. Agregue la clave hash a su aplicación de Facebook

   1. Diríjase a la consola de su aplicación en Facebook Developers
   2. Navegue hasta Configuración > Básico
   3. Desplácese hacia abajo hasta la sección "Android"
   4. Haga clic en "Agregar plataforma" si Android no está agregado aún y rellene los detalles
   5. Agregue la clave hash que generó
   6. Para producción, agregue ambas claves hash de depuración y de lanzamiento

4. Actualice su AndroidManifest.xml para incluir:

   <application>
       ...
       <activity android:name="com.facebook.FacebookActivity"
           android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
           android:label="@string/app_name" />
   
       <activity
           android:name="com.facebook.CustomTabActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
               <data android:scheme="FB[APP_ID]" />
           </intent-filter>
       </activity>
   </application>

   Precaución

   Asegúrese de reemplazar [APP_ID] con su ID de aplicación de Facebook real en el android:scheme atributo

iOS Setup

1. Agregar la plataforma iOS en el Console de Desarrollador de Facebook

   1. Diríjase a la consola de su aplicación en Facebook Developers
   2. Navigate a Configuración > Básica
   3. Desplácese hacia abajo hasta el final de la página y haga clic en “Agregar plataforma”
   4. Seleccione iOS y complete los detalles requeridos

2. Abra su proyecto de Xcode y navegue a Info.plist

3. Agregue los siguientes registros a su Info.plist:

   <key>FacebookAppID</key>
   <string>[APP-ID]</string>
   <key>FacebookClientToken</key>
   <string>[CLIENT-TOKEN]</string>
   <key>FacebookDisplayName</key>
   <string>[APP-NAME]</string>
   <key>LSApplicationQueriesSchemes</key>
   <array>
       <string>fbapi</string>
       <string>fb-messenger-share-api</string>
   </array>
   <key>CFBundleURLTypes</key>
   <array>
       <dict>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>fb[APP-ID]</string>
           </array>
       </dict>
   </array>

   Precaución

   Sustituye los siguientes valores:

   • [APP-ID] con tu ID de aplicación de Facebook
   • [CLIENT-TOKEN] con tu token de cliente
   • [APP-NAME] con el nombre de tu aplicación

4. Modificar el AppDelegate.swift

   import FBSDKCoreKit
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate {
         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
           // Override point for customization after application launch.
   
           // Initialize Facebook SDK
           FBSDKCoreKit.ApplicationDelegate.shared.application(
               application,
               didFinishLaunchingWithOptions: launchOptions
           )
   
           return true
       }
   
       func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
           // Called when the app was launched with a url. Feel free to add additional processing here,
           // but if you want the App API to support tracking app url opens, make sure to keep this call
   
           if (FBSDKCoreKit.ApplicationDelegate.shared.application(
               app,
               open: url,
               sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
               annotation: options[UIApplication.OpenURLOptionsKey.annotation]
           )) {
               return true;
           } else {
               return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
           }
       }
   }

Usando Facebook Login en tu aplicación

Cuidado

Antes de empezar: Recuerde que con el nuevo Facebook SDK, el tipo de token que recibe depende en su totalidad de la elección de seguimiento de la aplicación del usuario, no de su code configuración. Siempre implemente el manejo tanto de tokens de acceso como de tokens JWT en su backend para asegurarse de que la autenticación funcione para todos los usuarios.

1. Inicialice el inicio de sesión de Facebook en su aplicación

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. Implementar la función de inicio de sesión

   async function loginWithFacebook() {
     try {
       const result = await SocialLogin.login({
         provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile'],
          limitedLogin: false // See Limited Login section below for important details
        }
       });
       console.log('Facebook login result:', result);
       // Handle successful login
     } catch (error) {
       console.error('Facebook login error:', error);
       // Handle error
     }
   }

   Cuidado

   Login limitado (solo iOS): Establezca limitedLogin a true si desea utilizar el recurso de inicio de sesión limitado de Facebook. Este es un recurso solo disponible para iOS que proporciona una mayor privacidad restringiendo los datos compartidos durante el inicio de sesión.

   Limitaciones Importantes:

   • Solo para iOS: Solo afecta a dispositivos iOS y no tiene impacto en Android
   • Ocultar ATT: Incluso si estableces limitedLogin: false, Facebook lo forzará automáticamente a true : si el usuario no ha concedido permiso de transparencia de seguimiento de la aplicación (ATT)
   • Siempre Manejar Ambos Casos: Tu aplicación debe estar preparada para manejar ambos escenarios de inicio de sesión limitado y completo

   Verificar Estado de ATT:

   // Check if user has granted tracking permission
   const trackingStatus = await SocialLogin.providerSpecificCall({
     call: 'facebook#requestTracking',
     options: {}
   });
   console.log('Tracking status:', trackingStatus.status); // 'authorized', 'denied', 'notDetermined', or 'restricted'

   Implementación recomendada si se prefiere access_token:

   async function loginWithFacebook() {
     try {
       // Check ATT status first
       const trackingStatus = await SocialLogin.providerSpecificCall({
         call: 'facebook#requestTracking',
         options: {}
       });
   
       const result = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: trackingStatus.status === 'denied' // Auto-adjust based on ATT
         }
       });
   
       // Handle different response types based on limited login
       if (result.result.accessToken) {
         // Your app logic should work with both limited and full login
         console.log('Login successful:', result);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

   ¿Qué sucede en inicio de sesión limitado:

   • Acceso de datos reducido: Algunos datos del usuario pueden no estar disponibles
   • Diferentes tipos de tokens: Los tokens de acceso pueden tener diferentes capacidades
   • Cumplimiento de privacidadAyuda a cumplir con los requisitos de privacidad de iOS

   Importante: Always test your app with both limited and full login scenarios to ensure your app works correctly in both cases. You can learn more about Limited Login here.

3. Obtener datos de perfil del usuario

   Después del inicio de sesión exitoso, puedes recuperar información de perfil adicional:

   async function getFacebookProfile() {
     try {
       const profileResponse = await SocialLogin.providerSpecificCall({
         call: 'facebook#getProfile',
         options: {
           fields: ['id', 'name', 'email', 'first_name', 'last_name', 'picture']
         }
       });
   
       console.log('Facebook profile:', profileResponse.profile);
       return profileResponse.profile;
     } catch (error) {
       console.error('Failed to get Facebook profile:', error);
       return null;
     }
   }
   
   // Example usage after login
   async function loginAndGetProfile() {
     const loginResult = await loginWithFacebook();
     if (loginResult) {
       const profile = await getFacebookProfile();
       if (profile) {
         console.log('User ID:', profile.id);
         console.log('Name:', profile.name);
         console.log('Email:', profile.email);
         console.log('Profile Picture:', profile.picture?.data?.url);
       }
     }
   }

   Consejo

   Campos de perfil disponibles: Puedes solicitar cualquier campo disponible en el gráfico de Facebook API. Los campos comunes incluyen: id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. Ten en cuenta que algunos campos pueden requerir permisos adicionales.

   Limitación del tipo de token: El getProfile llamado solo funciona cuando tienes un token de acceso token de acceso (standard login with tracking allowed). If the user denied tracking or you’re using limited login (JWT token only), this call will fail. In that case, use the profile data provided in the initial login response.

⚠️ Crítico: Manejo de Token de Backend

Peligro

CRÍTICO Comportamiento de iOSLimitado Login y Transparencia de Aplicación (ATT) SOLO PARA iOS características. En Android, siempre recibirá tokens de acceso independientemente de la limitedLogin configuración.

Comportamiento de Token de iOS:

• limitedLogin: true → Siempre token JWT (solo para iOS)
• limitedLogin: false + El usuario PERMITE el seguimiento → Token de acceso
• limitedLogin: false + El usuario DENIEGA el seguimiento → Token JWT (iOS sobreescribe automáticamente su configuración)

Comportamiento del token de Android: Siempre token de acceso, limitedLogin la configuración se ignora.

Su servidor debe manejar dos tipos de tokens diferentes porque los usuarios de iOS pueden recibir tokens de acceso o tokens JWT dependiendo de su elección de transparencia de seguimiento de aplicaciones, mientras que los usuarios de Android siempre reciben tokens de acceso.

Tipos de tokens por plataforma

Plataforma	Acceso limitado	Opción de elección del usuario	Tipo de token de resultado
iOS	true	Cualquiera	Token JWT
iOS	false	Permite el seguimiento	Token de acceso
iOS	false	Niega el seguimiento	Token JWT (superposición automática)
Android	Cualquiera	N/A	Token de acceso (siempre)

Implementación de backend

1. Detectar tipo de token y manejar según corresponda

   async function loginWithFacebook() {
     try {
       const loginResult = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: false // iOS: depends on ATT, Android: ignored
         }
       });
   
       if (loginResult.accessToken) {
         // Access token (Android always, iOS when tracking allowed)
         return handleAccessToken(loginResult.accessToken.token);
       } else if (loginResult.idToken) {
         // JWT token (iOS only when tracking denied or limitedLogin: true)
         return handleJWTToken(loginResult.idToken);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

2. Ejemplo de integración con Firebase

   import { OAuthProvider, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
   
   async function handleAccessToken(accessToken: string, nonce: string) {
     // For access tokens, use OAuthProvider (new method)
     const fbOAuth = new OAuthProvider("facebook.com");
     const credential = fbOAuth.credential({
       idToken: accessToken,
       rawNonce: nonce
     });
   
     try {
       const userResponse = await signInWithCredential(auth, credential);
       return userResponse;
     } catch (error) {
       console.error('Firebase OAuth error:', error);
       return false;
     }
   }
   
   async function handleJWTToken(jwtToken: string) {
     // For JWT tokens, send to your backend for validation
     try {
       const response = await fetch('/api/auth/facebook-jwt', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ jwtToken })
       });
   
       const result = await response.json();
       return result;
     } catch (error) {
       console.error('JWT validation error:', error);
       return false;
     }
   }

3. Validación de JWT de backend

   // Backend: Validate JWT token from Facebook
   import jwt from 'jsonwebtoken';
   import { Request, Response } from 'express';
   
   app.post('/api/auth/facebook-jwt', async (req: Request, res: Response) => {
     const { jwtToken } = req.body;
   
     try {
       // Verify JWT token with Facebook's public key
       // See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(jwtToken, getFacebookPublicKey(), {
         algorithms: ['RS256'],
         audience: process.env.FACEBOOK_APP_ID,
         issuer: 'https://www.facebook.com' // From: https://www.facebook.com/.well-known/openid-configuration/?_rdr
       });
   
       // Extract user info from JWT
       const userInfo = {
         id: decoded.sub,
         email: decoded.email,
         name: decoded.name,
         isJWTAuth: true
       };
   
       // Create your app's session/token
       const sessionToken = createUserSession(userInfo);
   
       res.json({
         success: true,
         token: sessionToken,
         user: userInfo
       });
     } catch (error) {
       console.error('JWT validation failed:', error);
       res.status(401).json({ success: false, error: 'Invalid token' });
     }
   });

4. Manipulador de tokens de backend genérico

   // Handle both token types in your backend
   async function authenticateFacebookUser(tokenData: any) {
     if (tokenData.accessToken) {
       // Handle access token - validate with Facebook Graph API
       const response = await fetch(`https://graph.facebook.com/me?access_token=${tokenData.accessToken}&fields=id,name,email`);
       const userInfo = await response.json();
   
       return {
         user: userInfo,
         tokenType: 'access_token',
         expiresIn: tokenData.expiresIn || 3600
       };
     } else if (tokenData.jwtToken) {
       // Handle JWT token - decode and validate
       // See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(tokenData.jwtToken, getFacebookPublicKey());
   
       return {
         user: {
           id: decoded.sub,
           name: decoded.name,
           email: decoded.email
         },
         tokenType: 'jwt',
         expiresIn: decoded.exp - Math.floor(Date.now() / 1000)
       };
     } else {
       throw new Error('No valid token provided');
     }
   }

Consideraciones clave

Peligro

Crítico iOS-Único Entendimiento:

• iOSLa elección de seguimiento de la aplicación del usuario determina el tipo de token, NO sus configuraciones code. limitedLogin: false)
• Android: Siempre recibe tokens de acceso, independientemente de limitedLogin configuración
• Ingreso limitado es solo para iOS - Android ignora completamente esta configuración

Token de acceso (Inicio de sesión estándar):

• ✅ Android: Siempre disponible (las restricciones de iOS no se aplican)
• ✅ iOS:Sólo cuando el usuario permite el seguimiento de la aplicación
• ✅ Puede usarse para acceder al gráfico de Facebook API
• ✅ Tiempos de expiración más largos
• ✅ Más datos del usuario disponibles
• ❌ Se está volviendo menos común en iOS as users increasingly deny tracking

Token JWT (Modo de privacidad de iOS solo):

• ❌ Android: Nunca ocurre (no soportado)
• ✅ iOS: Cuando se deniega el seguimiento o limitedLogin: true
• Respeto las preferencias de privacidad del usuario de iOS
• ❌ Contiene información básica del usuario solo
• ❌ Tiempos de expiración más cortos
• ❌ Sin acceso al Gráfico de Facebook API
• ⚠️ Ahora el escenario más común para los usuarios de iOS

Comportamiento específico de plataforma:

• aplicaciones iOS: Debe manejar tanto tokens de acceso como tokens JWT
• Aplicaciones de Android: Solo necesita manejar tokens de acceso
• Aplicaciones de múltiples plataformas: Debe implementar ambos métodos de manejo de tokens

Consejo

Esencial para iOSDebes implementar ambos métodos de manejo de tokens. Muchos desarrolladores de iOS asumen que siempre obtendrán tokens de acceso y sus aplicaciones fallan cuando los usuarios deniegan el seguimiento.

Requisitos de contexto seguro (Web/Capacitor)

Limitaciones de criptografía API

El flujo de inicio de sesión de Facebook actualizado requiere Criptografía Web API para la generación de nonce, que solo está disponible en contextos seguros:

// This requires secure context (HTTPS or localhost)
async function sha256(message: string) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); // ❌ Fails in insecure context
  // ...
}

Problemas del Entorno de Desarrollo

Problema común: ionic serve con URLs HTTP rompe la autenticación de Facebook

Entorno	Criptografía API Disponible	Inicia sesión en Facebook funciona
http://localhost:3000	✅ Sí	✅ Sí
http://127.0.0.1:3000	✅ Sí	✅ Sí
http://192.168.1.100:3000	❌ No	❌ No
https://any-domain.com	✅ Sí	✅ Sí

Soluciones para el desarrollo de Capacitor

1. Utilice localhost para pruebas web

   # Instead of ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. Habilitar HTTPS en Ionic

   ionic serve --ssl

3. Probar en dispositivos reales

   # Capacitor apps run in secure context on devices
   ionic cap run ios
   ionic cap run android

4. Generación alternativa de nonce para desarrollo

   async function generateNonce() {
     if (typeof crypto !== 'undefined' && crypto.subtle) {
       // Secure context - use crypto.subtle
       return await sha256(Math.random().toString(36).substring(2, 10));
     } else {
       // Fallback for development (not secure for production)
       console.warn('Using fallback nonce - not secure for production');
       return btoa(Math.random().toString(36).substring(2, 10));
     }
   }

Nota de integración de Firebase

La documentación de Firebase reciente requiere tokens JWT con nosecas para la autenticación de Facebook, independientemente de las configuraciones de inicio de sesión. Este enfoque funciona con ambos. limitedLogin: true y limitedLogin: false:

   // Both modes can return JWT tokens depending on user choice
   const loginResult = await SocialLogin.login({
     provider: 'facebook',
     options: {
       permissions: ['email', 'public_profile'],
       limitedLogin: false, // true = always JWT, false = depends on user tracking choice
       nonce: nonce
     }
   });

Límite de desarrollo: Si está utilizando ionic serve en una IP de red (no localhost), la autenticación de Facebook fallará debido a restricciones de API de criptografía. Utilice localhost o HTTPS para pruebas web.

Consejo

Seguridad en producciónAplicaciones Capacitor en iOS/Android siempre se ejecutan en contextos seguros, por lo que esta limitación solo afecta entornos de desarrollo web.

Troubleshooting

Problemas comunes y soluciones

1. Errores de clave hash en Android

   • Revisa que hayas agregado la clave hash correcta a la consola de Facebook
   • Para versiones de lanzamiento, asegúrate de haber agregado ambas claves hash de depuración y de lanzamiento
   • Verifica que estás utilizando el keystore correcto al generar la hash

2. Botón de inicio de sesión de Facebook no aparece

   • Verificar todas las entradas del manifiesto son correctas
   • Revisa que tus ID de aplicación de Facebook y Token de cliente estén correctos
   • Asegúrate de haber inicializado correctamente el SDK

3. Problemas comunes en iOS

   • Asegúrate de que todas las entradas de Info.plist estén correctas
   • Verify URL schemes are properly configured
   • Compruebe que su identificador de paquete coincida con lo registrado en la consola de Facebook

Pruebas

1. Antes de realizar pruebas, agrega usuarios de prueba en la Consola del Desarrollador de Facebook

   • Vaya a Roles > Usuarios de prueba
   • Crear un usuario de prueba
   • Use estos credenciales para realizar las pruebas

2. Test both debug and release builds

   • Edición de depuración con clave de hash de depuración
   • Lanzar construcción con clave de hash de lanzamiento
   • Pruebe en dispositivos tanto emuladores como físicos

Recuerde probar el flujo de inicio de sesión completo, incluyendo:

• Inicio de sesión exitoso
• Cancelar inicio de sesión
• Manejo de errores
• Funcionalidad de cierre de sesión

Keep going from Facebook Login Setup

Si está utilizando Configuración de inicio de sesión de Facebook para planificar la autenticación y los flujos de cuentas, conectéalo con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-login social para el detalle de implementación en @capgo/capacitor-login social @capgo/capacitor-clave para el detalle de implementación en @capgo/capacitor-clave @capgo/capacitor-biometría nativa para el detalle de implementación en @capgo/capacitor-biometría nativa, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.