Mise à niveau du connexion Facebook vers @capgo/social-login

Vue d'ensemble

Cette guide fournit des instructions complètes pour la migration de @capacitor-community/facebook-login à @capgo/capacitor-social-loginLa nouvelle extension modernise l'authentification Facebook avec un API unifié qui prend en charge plusieurs fournisseurs sociaux, améliore le support TypeScript et offre de nouvelles fonctionnalités.

Installation

1. Supprimer 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

Changement de clé: Le nouveau package nécessite un paramétrage 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'
  }
});

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

Différences clés:

• La réponse inclut maintenant un provider champ identifiant le fournisseur d'authentification
• Informations plus détaillées profile object with additional user information
• 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 à la plateforme

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

ImportantLe jeton client est maintenant requis pour l'authentification Android.

Configuration iOS

1. La configuration iOS dans AppDelegate.swift reste inchangé :

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. Le Info.plist La configuration reste inchangée :

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

Changements majeurs

Résumé des changements majeurs lors de la migration :

1. L'initialisation explicite est désormais requise - Doit appeler initialize() avant utilisation
2. La structure de l'objet réponse a changé de manière significative - Nouveau format de résultat imbriqué avec des données de profil améliorées
3. Un jeton client est maintenant requis pour Android - Configuration supplémentaire nécessaire
4. Noms de méthode et structures de paramètres différents - Approche basée sur le fournisseur
5. Gestion des erreurs et types d'erreurs ont été modifiés - Informations d'erreur plus détaillées

Avantages Clés

Le nouveau plugin fournit :

• Unification de API à travers plusieurs fournisseurs sociaux (Google, Apple, Facebook)
• Amélioration de la prise en charge de TypeScript avec des définitions de type améliorées
• Données de profil renforcées avec plus d'informations utilisateur
• Maintenance active et soutien communautaire
• Traitement des erreurs cohérent sur tous les fournisseurs
• Gestion des jetons améliorée avec une gestion de expiration appropriée

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

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

Si vous utilisez La migration de connexion Facebook à @capgo/social-login pour planifier l'authentification et les flux de compte, connectez-l’à Utilisez @capgo/capacitor-social-login pour la capacité native dans Utilisez @capgo/capacitor-social-login, @capgo/capacitor-connexion-social pour le détail d'implémentation dans @capgo/capacitor-social-login, @capgo/capacitor-jeton de passe pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometrique pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.