Migrazione Google Auth a @capgo/social-login

Panoramica

Questa guida fornisce i passaggi dettagliati per migrare da @codetrix-studio/capacitor-google-auth a @capgo/capacitor-social-login, garantendo una transizione fluida e un'esperienza di autenticazione migliore. Il nuovo plugin unifica diversi provider di autenticazione social in un unico API coerente.

Installazione

1. Rimuovi il vecchio package:

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

2. Installa il nuovo pacchetto:

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

Modifiche importanti alla configurazione di Google Auth

Requisito Web Client ID

Cambio critico: Il plugin aggiornato richiede l'uso di un Web Client ID su tutte le piattaforme.

You’ll need to:

1. Creare un Web Client ID in Google Cloud Console se non ne hai uno (Come ottenere le credenziali)
2. Usa questo Web Client ID nel webClientId campo per tutte le piattaforme
3. Per Android, devi comunque creare un Android Client ID con il tuo SHA1, ma serve solo per la verifica: il token non verrà usato (guida alla configurazione Android)

Modifiche Code

Modifiche agli import

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

Inizializzazione

La configurazione passa da un semplice GoogleAuth.initialize() chiamata a una struttura più complessa SocialLogin.initialize() con configurazione Google nidificata:

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

Accedi

Il metodo di login cambia da GoogleAuth.signIn() a SocialLogin.login() con specifica esplicita del provider:

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

Modifiche specifiche per piattaforma

Android

1. Aggiorna il tuo MainActivity.java (Guida completa al setup su 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. Nessuna modifica rilevante in AppDelegate.swift (Guida al setup su iOS)

2. Aggiorna la configurazione in capacitor.config.json, non lo usiamo nel nuovo plugin:

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

Web

1. Rimuovi i meta tag di Google Sign-In dal tuo index.html se li stavi utilizzando:

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

Modifiche al Response Type

La risposta di autenticazione ora fornisce un oggetto strutturato con informazioni sul provider, access token, ID token e dati del profilo utente:

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 struttura della risposta include:

• provider: Identifica il provider di autenticazione ('google')
• result.accessToken: Dettagli dell'access token con scadenza
• result.idToken: ID token per l'autenticazione
• result.profile: Informazioni sul profilo utente (email, nome e URL immagine)

Funzionalità aggiuntive

Il nuovo pacchetto supporta diversi provider di autenticazione social oltre a Google:

• Apple Sign-In
• Facebook Login

Questo approccio unificato offre:

• API coerente per tutti i provider
• Migliore supporto TypeScript
• Gestione degli errori ottimizzata
• Manutenzione attiva e supporto della community

Consulta la documentazione principale per le istruzioni dettagliate su questi provider aggiuntivi.

Continua dalla migrazione di Google Auth a @capgo/social-login

Se stai usando Migrazione Google Auth a @capgo/social-login per pianificare i flussi di autenticazione e account, collegalo con Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.