Migration de Google Auth vers @capgo/social-login

Aperçu

Ce guide détaille toutes les étapes pour migrer de @codetrix-studio/capacitor-google-auth vers @capgo/capacitor-social-login, afin de garantir une transition fluide et une meilleure expérience d'authentification. Le nouveau plugin unifie plusieurs fournisseurs d'authentification sociale sous un seul API cohérent.

Installation

1. Supprimez l'ancien package :

   npm uninstall @codetrix-studio/capacitor-google-auth

2. Installez le nouveau package :

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

Important Changes in Google Auth Setup

ID client Web requis

Changement critique: Le plugin mis à jour nécessite l’utilisation d’un Web Client ID sur toutes les plateformes.

Vous devrez :

1. Créez un ID client Web dans Google Cloud Console si vous n’en avez pas (Comment obtenir les identifiants)
2. Utilisez cet ID client Web dans le webClientId champ pour toutes les plateformes
3. Pour Android, vous devez encore créer un ID client Android avec votre SHA1, mais c'est uniquement à des fins de vérification — le token ne sera pas utilisé (Guide de configuration Android)

Changements Code

Modifications des imports

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { SocialLogin } from '@capgo/capacitor-social-login';

Initialisation

La configuration passe d’un simple GoogleAuth.initialize() appel à une approche plus structurée SocialLogin.initialize() avec une configuration Google imbriquée :

GoogleAuth.initialize({
  clientId: 'CLIENT_ID.apps.googleusercontent.com',
  scopes: ['profile', 'email'],
  grantOfflineAccess: true,
});

await SocialLogin.initialize({
  google: {
    webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com', // Use Web Client ID for all platforms
    iOSClientId: 'IOS_CLIENT_ID', // for iOS
    mode: 'offline' // replaces grantOfflineAccess
  }
});

Connexion

La méthode de connexion passe de GoogleAuth.signIn() vers SocialLogin.login() avec le fournisseur spécifié explicitement :

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    forceRefreshToken: true // if you need refresh token
  }
});

Changements spécifiques aux plateformes

Android

1. Mettez à jour votre MainActivity.java (Guide complet de configuration Android):

 import ee.forgr.capacitor.social.login.GoogleProvider;
 import ee.forgr.capacitor.social.login.SocialLoginPlugin;
 import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
 import com.getcapacitor.PluginHandle;
 import com.getcapacitor.Plugin;
 import android.content.Intent;
 import android.util.Log;

 public class MainActivity extends BridgeActivity {
 public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

   @Override
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);

     if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
       PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
       if (pluginHandle == null) {
         Log.i("Google Activity Result", "SocialLogin login handle is null");
         return;
       }
       Plugin plugin = pluginHandle.getInstance();
       if (!(plugin instanceof SocialLoginPlugin)) {
         Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
         return;
       }
       ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
     }
   }

   public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

iOS

1. Aucun changement majeur n’est nécessaire dans AppDelegate.swift (Guide de configuration iOS)

2. Mettez à jour votre configuration dans capacitor.config.json, nous ne l’utilisons pas dans le nouveau plugin :

{
  "plugins": {
   "GoogleAuth": {
     "scopes": ["profile", "email"],
     "serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
     "forceCodeForRefreshToken": true
   }
}

Le Web

1. Supprimez les balises meta Google Sign-In de votre index.html si vous les utilisiez :

<meta name="google-signin-client_id" content="{your client id here}" />
<meta name="google-signin-scope" content="profile email" />

Changements du type de réponse

La réponse d’authentification fournit désormais un objet structuré contenant les informations du fournisseur, les tokens d’accès, les ID tokens et les données du profil utilisateur :

interface GoogleLoginResponse {
  provider: 'google';
  result: {
    accessToken: {
      token: string;
      expires: string;
      // ... other token fields
    } | null;
    idToken: string | null;
    profile: {
      email: string | null;
      familyName: string | null;
      givenName: string | null;
      id: string | null;
      name: string | null;
      imageUrl: string | null;
    };
  };
}

La structure de la réponse comprend :

• fournisseur: identifie le fournisseur d’authentification ('google')
• result.accessToken: Détails du token d'accès avec expiration
• result.idToken: Token d'ID pour l'authentification
• result.profile: Informations du profil utilisateur incluant l'e-mail, le nom et l'URL de l'image

Fonctionnalités supplémentaires

Le nouveau package prend en charge plusieurs fournisseurs d'authentification sociale en plus de Google :

• Connexion avec Apple
• Connexion Facebook

Cette approche unifiée offre :

• Un API cohérent sur tous les fournisseurs
• Support TypeScript amélioré
• Meilleure gestion des erreurs
• Maintenance active et support communautaire

Consultez la documentation principale pour des instructions de configuration détaillées pour ces fournisseurs supplémentaires.

Continuer après la migration de Google Auth vers @capgo/social-login

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