Saltar al contenido

Guía de Migración de @Capacitor-community/facebook-login a @Capgo/Capacitor-social-login

Esta guía proporciona instrucciones completas para migrar de @capacitor-community/facebook-login a @capgo/capacitor-social-login. El nuevo Plugin moderniza la autenticación de Facebook con una API unificada que admite múltiples proveedores sociales, soporte mejorado de TypeScript y capacidades mejoradas.

  1. Elimina el paquete antiguo:

    Terminal window
    npm uninstall @capacitor-community/facebook-login
  2. Instala el nuevo paquete:

    Terminal window
    npm install @capgo/capacitor-social-login
    npx cap sync
import { FacebookLogin } from '@capacitor-community/facebook-login';
import { SocialLogin } from '@capgo/capacitor-social-login';

Cambio Clave: El nuevo paquete requiere configuración explícita en tu código:

// El paquete antiguo no requería inicialización explícita en el código
// La configuración se realizaba solo en las plataformas nativas
// El nuevo paquete requiere inicialización explícita
await SocialLogin.initialize({
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID', // Requerido para web y Android
clientToken: 'YOUR_CLIENT_TOKEN' // Requerido para Android
}
});

El método de inicio de sesión ahora acepta un parámetro de proveedor:

const FACEBOOK_PERMISSIONS = ['email', 'public_profile'];
const result = await FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS });
const result = await SocialLogin.login({
provider: 'facebook',
options: {
permissions: ['email', 'public_profile'],
limitedLogin: false,
nonce: 'optional_nonce'
}
});

La estructura de respuesta se ha modernizado con un objeto de perfil más completo:

// Tipo de respuesta antiguo
interface FacebookLoginResponse {
accessToken: {
applicationId: string;
userId: string;
token: string;
expires: string;
};
recentlyGrantedPermissions: string[];
recentlyDeniedPermissions: string[];
}
// Nuevo tipo de respuesta
interface FacebookLoginResponse {
provider: 'facebook';
result: {
accessToken: {
token: string;
applicationId?: string;
expires?: string;
userId?: string;
permissions?: string[];
declinedPermissions?: string[];
} | null;
idToken: string | null;
profile: {
userID: string;
email: string | null;
friendIDs: string[];
birthday: string | null;
ageRange: { min?: number; max?: number } | null;
gender: string | null;
location: { id: string; name: string } | null;
hometown: { id: string; name: string } | null;
profileURL: string | null;
name: string | null;
imageURL: string | null;
};
};
}

Diferencias Clave:

  • La respuesta ahora incluye un campo provider que identifica el proveedor de autenticación
  • Objeto profile más detallado con información adicional del usuario
  • Estructura consistente en todos los proveedores de inicio de sesión social
const result = await FacebookLogin.getCurrentAccessToken();
const isLoggedIn = result && result.accessToken;
const status = await SocialLogin.isLoggedIn({
provider: 'facebook'
});
const isLoggedIn = status.isLoggedIn;
await FacebookLogin.logout();
await SocialLogin.logout({
provider: 'facebook'
});

La configuración ahora se maneja a través del método de inicialización:

// Los cambios en AndroidManifest.xml permanecen iguales
// strings.xml se vuelve irrelevante
// Además, inicializa en tu código:
await SocialLogin.initialize({
facebook: {
appId: 'your-app-id',
clientToken: 'your-client-token' // Nuevo requisito
}
});

Importante: El token de cliente ahora es requerido para la autenticación de Android.

  1. La configuración de iOS en AppDelegate.swift permanece igual:
import FBSDKCoreKit
// En application:didFinishLaunchingWithOptions:
FBSDKCoreKit.ApplicationDelegate.shared.application(
application,
didFinishLaunchingWithOptions: launchOptions
)
// En application:openURL:options:
ApplicationDelegate.shared.application(
app,
open: url,
sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
annotation: options[UIApplication.OpenURLOptionsKey.annotation]
)
  1. La configuración de Info.plist permanece igual:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb[APP_ID]</string>
</array>
</dict>
</array>
<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>fbauth</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>

Resumen de cambios disruptivos al migrar:

  1. Ahora se requiere inicialización explícita - Debe llamar a initialize() antes de usar
  2. La estructura del objeto de respuesta ha cambiado significativamente - Nuevo formato de resultado anidado con datos de perfil mejorados
  3. El token de cliente ahora es requerido para Android - Se necesita configuración adicional
  4. Diferentes nombres de métodos y estructuras de parámetros - Enfoque basado en proveedores
  5. El manejo de errores y los tipos de errores han cambiado - Información de Error más detallada

El nuevo Plugin proporciona:

  • API Unificada en múltiples proveedores sociales (Google, Apple, Facebook)
  • Soporte mejorado de TypeScript con mejores definiciones de tipos
  • Datos de perfil mejorados con más información del usuario
  • Mantenimiento activo y soporte de la comunidad
  • Manejo consistente de errores en todos los proveedores
  • Mejor gestión de tokens con manejo adecuado de expiración

Para instrucciones de configuración más detalladas, consulta la documentación oficial.