Migración de inicio de sesión de Facebook a @capgo/social-login

Resumen

Esta guía proporciona instrucciones detalladas para migrar desde @capacitor-community/facebook-login Versión anterior @capgo/capacitor-social-login. La nueva versión del plugin moderniza la autenticación de Facebook con una interfaz unificada API que admite múltiples proveedores sociales, un mejor soporte para TypeScript y capacidades mejoradas.

Instalación

1. Elimine el paquete antiguo:

   npm uninstall @capacitor-community/facebook-login

2. Instale el paquete nuevo:

   npm install @capgo/capacitor-social-login
   npx cap sync

Code Cambios

Importar Cambios

import { FacebookLogin } from '@capacitor-community/facebook-login';
import { SocialLogin } from '@capgo/capacitor-social-login';

Inicialización

Cambio de clave: El nuevo paquete requiere una configuración explícita en tu code:

// Old package required no explicit initialization in code
// Configuration was done only in native platforms

// New package requires explicit initialization
await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // Required for web and Android
    clientToken: 'YOUR_CLIENT_TOKEN'       // Required for Android
  }
});

Inicio de sesión

Título de la sección “Inicio de sesión”

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

Copiar a portapapeles

Estructura de respuesta modernizada con un objeto de perfil más completo:

// Old response type
interface FacebookLoginResponse {
  accessToken: {
    applicationId: string;
    userId: string;
    token: string;
    expires: string;
  };
  recentlyGrantedPermissions: string[];
  recentlyDeniedPermissions: string[];
}

// New response type
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 provider campo que identifica al proveedor de autenticación
• Un objeto más detallado profile con información de usuario adicional
• Estructura consistente en todos los proveedores de inicio de sesión social

Verificar estado de inicio de sesión

const result = await FacebookLogin.getCurrentAccessToken();
const isLoggedIn = result && result.accessToken;

const status = await SocialLogin.isLoggedIn({
  provider: 'facebook'
});
const isLoggedIn = status.isLoggedIn;

Cerrar sesión

await FacebookLogin.logout();

await SocialLogin.logout({
  provider: 'facebook'
});

Cambios específicos de plataforma

Configuración de Android

La configuración ahora se gestiona mediante el método initialize:

// AndroidManifest.xml changes remain the same
// strings.xml become irrelevant
// Additionally initialize in your code:
await SocialLogin.initialize({
  facebook: {
    appId: 'your-app-id',
    clientToken: 'your-client-token'  // New requirement
  }
});

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

Configuración de iOS

1. La configuración de iOS en AppDelegate.swift se mantiene igual:

import FBSDKCoreKit

// In application:didFinishLaunchingWithOptions:
FBSDKCoreKit.ApplicationDelegate.shared.application(
    application,
    didFinishLaunchingWithOptions: launchOptions
)

// In application:openURL:options:
ApplicationDelegate.shared.application(
    app,
    open: url,
    sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
    annotation: options[UIApplication.OpenURLOptionsKey.annotation]
)

2. La Info.plist La configuración se mantiene 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>

Cambios importantes

Resumen de cambios importantes al migrar:

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

Ventajas Clave

El nuevo plugin proporciona:

• API en varios proveedores sociales (Google, Apple, Facebook)
• Mejor soporte para TypeScript con definiciones de tipo mejoradas
• Datos de perfil mejorados con más información del usuario
• Mantenimiento activo y apoyo de la comunidad
• Manejo de errores consistente en todos los proveedores
• Mejor gestión de tokens con manejo de expiración adecuado

Para obtener instrucciones de configuración más detalladas, consulte el documentación oficial.

Sigue adelante desde la migración de inicio de sesión de Facebook a @capgo/social-login

Si estás utilizando La migración de inicio de sesión de Facebook a @capgo/social-login para planificar flujos de autenticación y cuentas, conecta con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-social-login para el detalle de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.