Migration de connexion Facebook à @capgo/social-login

Présentation

Ce guide fournit des instructions complètes pour la migration de @capacitor-community/facebook-login vers @capgo/capacitor-social-login. Le nouveau plugin modernise l'authentification Facebook avec un API unifié qui prend en charge plusieurs fournisseurs sociaux, une meilleure prise en charge de TypeScript et des capacités améliorées.

Installation

1. Supprimez l'ancien package :

   npm uninstall @capacitor-community/facebook-login

2. Installer le nouveau package :

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

Code Modifications

Importer les modifications

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

Initialisation

Modification clé: La nouvelle package nécessite un setup explicite dans votre 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
  }
});

Connexion

La méthode de connexion accepte maintenant un paramètre de fournisseur :

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

Modifications du type de réponse

La structure de réponse a été modernisée avec un objet de profil plus complet :

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

Differences clés:

• Réponse inclut maintenant un provider champ identifiant le fournisseur d'authentification
• Informations plus détaillées profile objet avec des informations utilisateur supplémentaires
• Structure cohérente pour tous les fournisseurs de connexion sociale

Vérification de l'état de connexion

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

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

Déconnexion

await FacebookLogin.logout();

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

Changements spécifiques au plateau

Configuration Android

La configuration est maintenant gérée par la méthode 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
  }
});

Important : Le jeton client est maintenant requis pour l'authentification Android.

Configuration iOS

1. La configuration iOS reste la même : AppDelegate.swift Copier dans le presse-papier

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. The configuration remains the même : Info.plist Copy to presse-papier

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

Section intitulée “Changements majeurs”

L'initialisation explicite est maintenant requise

1. - Doit appeler avant utilisation initialize() La structure de l'objet réponse a changé de manière significative
2. - Nouveau format de résultat imbriqué avec des données de profil améliorées Le jeton client est maintenant requis pour Android
3. Le jeton client est maintenant requis pour Android - Besoin de configuration supplémentaire
4. - Des noms de méthode et des structures de paramètres différents - Approche basée sur les fournisseurs
5. - Les modes de gestion et les types d'erreur ont changé - Plus d'informations détaillées sur les erreurs

Avantages Clés

Le nouveau plugin fournit :

• Unifié API à travers plusieurs fournisseurs sociaux (Google, Apple, Facebook)
• Amélioration de l'appui TypeScript avec de meilleures définitions de type
• Données de profil améliorées avec plus d'informations sur l'utilisateur
• Maintenance active et support communautaire
• Gestion des erreurs cohérente sur tous les fournisseurs
• Gestion des jetons améliorée avec une gestion correcte de l'expiration

Pour plus de détails sur les instructions de configuration, veuillez vous référer à la documentation officielle.

Continuez de la migration de connexion Facebook à @capgo/social-login

Si vous utilisez Migration de connexion Facebook vers @capgo/social-login pour planifier l'authentification et les flux de compte, connectez-le avec Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login, @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Deux facteurs d'authentification pour les détails d'implémentation dans l'authentification à deux facteurs.