Migrare l'autenticazione di Google a @capgo/social-login

Panoramica

Questa guida fornisce passaggi dettagliati per la migrazione da @codetrix-studio/capacitor-google-auth a @capgo/capacitor-social-login, garantendo una transizione liscia e un'esperienza di autenticazione migliorata. Il nuovo plugin unifica i provider di autenticazione sociale multipli sotto un singolo e coerente API.

Installa

1. Elimina il vecchio pacchetto:

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

2. Installa il nuovo pacchetto:

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

Modifiche importanti nella configurazione di autenticazione di Google

Requisito di ID del client web

Cambiamento Critico : L'aggiornamento del plugin richiede l'utilizzo di un ID del Client Web su tutte le piattaforme.

Avrai bisogno di:

1. Crea un ID del Client Web nel Console di Google Cloud se non ne hai già uno (Come ottenere le credenziali)
2. Utilizza questo ID del Client Web nel webClientId campo per tutte le piattaforme
3. Per Android, hai ancora bisogno di creare un ID del Client Android con il tuo SHA1, ma questo è solo a scopo di verifica - il token non verrà utilizzato (Guida di configurazione per Android)

Code Modifiche

Importa Modifiche

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

Inizializzazione

La configurazione di avvio si trasforma da una semplice GoogleAuth.initialize() chiamata a una più strutturata 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 accesso cambia da GoogleAuth.signIn() a SocialLogin.login() con specificazione del provider esplicita:

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

Android

1. Aggiorna il tuo MainActivity.java (Guida completa per la configurazione di 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 importante è necessaria in AppDelegate.swift (Guida di configurazione per iOS)

2. Aggiorna la tua configurazione in capacitor.config.jsonNon lo utilizziamo nel nuovo plugin:

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

Web

1. Elimina le etichette meta di Google Sign-In dal tuo index.html se le stavi utilizzando:

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

Cambiamenti di tipo di risposta

La risposta di autenticazione fornisce ora un oggetto strutturato che contiene informazioni sul provider, i token di accesso, i token ID e i 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 del token di accesso con scadenza
• result.idToken: Token ID per l'autenticazione
• result.profile: Informazioni del profilo dell'utente, compreso l'indirizzo email, il nome e l'URL dell'immagine

Funzionalità aggiuntive

Il nuovo pacchetto supporta più provider di autenticazione sociale oltre a Google:

• Apple Sign-In
• Facebook Login

Questa approccio unificato fornisce:

• Consistenza API su tutti i provider
• Migliorata supporto per TypeScript
• Miglior gestione degli errori
• Supporto attivo e comunitario

Controlla il documento principale per le istruzioni di configurazione dettagliate per questi provider aggiuntivi.

Continua da Google Auth Migration a @capgo/social-login

Se stai utilizzando Migrare l'autenticazione di Google a @capgo/social-login per pianificare le autenticazioni e i flussi di account, connettilo con Utilizzare @capgo/capacitor-social-login per la capacità nativa in Utilizzare @capgo/capacitor-social-login, @capgo/capacitor-social-login per il dettaglio di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per il dettaglio di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.