Google Migration d'authentification vers @capgo/social-login

Aperçu

Ce guide fournit des étapes complètes pour migrer de @codetrix-studio/capacitor-google-auth vers @capgo/capacitor-social-login, garantissant une transition en douceur et une expérience d’authentification améliorée. Le nouveau plugin unifie plusieurs fournisseurs d’authentification sociale sous un API unique et 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

Modifications importantes dans la configuration de l’authentification Google

Exigence d’ID de client Web

Changement critique : Le plugin mis à jour nécessite l’utilisation d’un ID client Web sur toutes les plates-formes.

Vous devrez :

1. Créez un ID client Web dans Google Cloud Console si vous n’en avez pas (Comment obtenir les informations d’identification)
2. Utilisez cet ID client Web dans le champ webClientId pour toutes les plateformes
3. Pour Android, vous devez toujours créer un identifiant client Android avec votre SHA1, mais ceci est uniquement à des fins de vérification - le jeton ne sera pas utilisé (Android guide de configuration)

Modifications du code

Importer les modifications

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

Initialisation

La configuration passe d’un simple appel GoogleAuth.initialize() à un SocialLogin.initialize() plus structuré 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
  }
});

Se connecter

La méthode de connexion passe de GoogleAuth.signIn() à SocialLogin.login() avec une spécification explicite du fournisseur :

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

Modifications spécifiques à la plateforme

Android

1. Mettez à jour votre MainActivity.java (Guide de configuration complet de 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. Aucune modification majeure n’est nécessaire dans AppDelegate.swift (iOS guide de configuration)

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

###Web

1. Supprimez les balises méta de connexion Google 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" />

Modifications du type de réponse

La réponse d’authentification fournit désormais un objet structuré contenant des informations sur le fournisseur, des jetons d’accès, des jetons d’identification et des données de 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 réponse comprend :

• provider : Identifie le fournisseur d’authentification (“google”)
• result.accessToken : accédez aux détails du jeton avec expiration
• result.idToken : jeton d’identification pour l’authentification
• result.profile : informations sur le profil de l’utilisateur, notamment son adresse e-mail, son nom et l’URL de l’image.

Capacités supplémentaires

Le nouveau package prend en charge plusieurs fournisseurs d’authentification sociale au-delà de Google :

• Apple Connexion
• Facebook Connexion

Cette approche unifiée fournit :

• API cohérent chez tous les fournisseurs
• Prise en charge améliorée de TypeScript
• Meilleure gestion des erreurs
• Maintenance active et support communautaire

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