Facebook Configuración de inicio de sesión

Inicialice el inicio de sesión 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',
  }
})

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
  }
}

Inicio de sesión limitado (solo iOS): establezca limitedLogin en verdadero si desea utilizar la función de inicio de sesión limitado de Facebook. Esta es una característica exclusiva de iOS que proporciona privacidad mejorada al restringir los datos compartidos durante el inicio de sesión.

Limitaciones importantes:

iOS únicamente: el inicio de sesión limitado solo afecta a iOS dispositivos y no tiene ningún impacto en Android
Anulación de ATT: incluso si configura limitedLogin: false, Facebook lo forzará automáticamente a true si el usuario no ha otorgado el permiso de Transparencia de seguimiento de aplicaciones (ATT)
Siempre maneje ambos casos: su aplicación siempre debe estar preparada para manejar escenarios de inicio de sesión tanto limitados como completos.

Comprobación del 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 el inicio de sesión limitado:

Acceso a datos reducido: es posible que algunos datos del usuario no estén disponibles
Diferentes tipos de tokens: los tokens de acceso pueden tener diferentes capacidades
Cumplimiento de privacidad: ayuda a cumplir con iOS requisitos de privacidad

Importante: Pruebe siempre su aplicación con escenarios de inicio de sesión limitado y completo para asegurarse de que funcione correctamente en ambos casos. Puede obtener más información sobre el inicio de sesión limitado aquí.

Obtener datos de perfil de usuario

Después de iniciar sesión correctamente, puede 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);
    }
  }
}

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

Limitación del tipo de token: la llamada getProfile solo funciona cuando tienes un token de acceso (inicio de sesión estándar con seguimiento permitido). Si el usuario negó el seguimiento o está utilizando un inicio de sesión limitado (solo token JWT), esta llamada fallará. En ese caso, utilice los datos del perfil proporcionados en la respuesta de inicio de sesión inicial.

⚠️ Crítico: manejo de tokens de backend

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

Tipos de tokens por plataforma

Plataforma	Configuración de inicio de sesión limitada	Elección ATT del usuario	Tipo de token de resultado
iOS	`true`	Cualquiera	JWT Ficha
iOS	`false`	Permite seguimiento	Token de acceso
iOS	`false`	Niega seguimiento	JWT Token (anulación automática)
Android	Cualquiera	N/A	Token de acceso (siempre)

Implementación de backend

Detectar el tipo de token y manejarlo en consecuencia

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);
  }
}

Firebase Ejemplo de integración

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;
  }
}

Validación del backend JWT

// 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' });
  }
});

Manejador 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

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

✅ Android: Siempre disponible (solo iOS no se aplican restricciones)
✅ iOS: Solo cuando el usuario permite explícitamente el seguimiento de la aplicación
✅ Se puede utilizar para acceder al Facebook Gráfico API
✅ Tiempos de vencimiento más largos
✅ Más datos de usuario disponibles
❌ Cada vez menos común en iOS a medida que los usuarios niegan cada vez más el seguimiento

JWT Token (iOS-solo modo de privacidad):

❌ Android: nunca ocurre (no es compatible)
✅ iOS: Cuando el seguimiento es denegado o limitedLogin: true
✅ Respeta iOS preferencias de privacidad del usuario
❌ Contiene solo información básica del usuario
❌ Tiempos de vencimiento más cortos
❌ No hay acceso al Facebook Gráfico API
⚠️ Ahora el escenario más común para los usuarios de iOS

Comportamiento específico de la plataforma:

iOS aplicaciones: debe manejar ambos tokens de acceso Y JWT tokens
Android aplicaciones: solo es necesario manejar tokens de acceso
Aplicaciones multiplataforma: deben implementar ambos métodos de manejo de tokens :::Recuerde probar el flujo de inicio de sesión completo, que incluye:
Inicio de sesión exitoso
Cancelación de inicio de sesión
Manejo de errores
Funcionalidad de cierre de sesión