Migration du login Facebook vers @capgo/social-login

Vue d'ensemble

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

Installation

1. Supprimez l'ancien package :

   npm uninstall @capacitor-community/facebook-login

2. Installez le nouveau package :

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

Code Changes

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 profil d'objet 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 désormais un provider champ identifiant le fournisseur d'authentification
• Objet plus détaillé avec des informations utilisateur supplémentaires profile Structure cohérente pour tous les fournisseurs de connexion sociale
• Vérification de l'état de connexion

__CAPGO_KEEP_0__

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 plateforme

Configuration d'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.

iOS Setup

1. La configuration iOS dans AppDelegate.swift reste la même :

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 configuration reste la même :

<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 maintenant requise - Doit être appelé initialize() avant utilisation
2. La structure de l'objet de 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. Des noms de méthode et des structures de paramètres différents - Approche basée sur les fournisseurs
5. Les modes de gestion des erreurs et les types d'erreurs ont changé - Informations d'erreur plus détaillées

Avantages Clés

Le nouveau plugin fournit :

• Unifié API à travers plusieurs fournisseurs sociaux (Google, Apple, Facebook)
• Un support amélioré de TypeScript avec de meilleures définitions de type
• Des données de profil améliorées avec plus d'informations sur l'utilisateur
• Un entretien actif et un soutien de la communauté
• Un traitement des erreurs cohérent à travers tous les fournisseurs
• Gestion des jetons améliorée avec une gestion appropriée de la durée d'expiration

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