Migración de autenticación de Google a @capgo/social-login

Resumen

Esta guía proporciona pasos completos para migrar desde @codetrix-studio/capacitor-google-auth hacia @capgo/capacitor-social-loginuna experiencia de autenticación mejorada. El nuevo plugin unifica múltiples proveedores de autenticación social bajo un solo y consistente API.

Instalación

1. Elimine el paquete antiguo:

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

2. Instale el nuevo paquete:

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

Cambios importantes en la configuración de autenticación de Google

Requisito de ID de cliente web

Cambio crítico: La actualización del plugin requiere el uso de un ID de cliente web en todas las plataformas.

Tendrá que:

1. Crea un ID de cliente web en el Console de Google Cloud si no lo tienes (Cómo obtener las credenciales)
2. Utiliza este ID de cliente web en el webClientId campo para todas las plataformas
3. Para Android, todavía necesitas crear un ID de cliente Android con tu SHA1, pero esto es solo para fines de verificación - el token no se usará (Guía de configuración de Android)

Code Cambios

Importar Cambios

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

Inicialización

La configuración se transforma de una llamada simple a una más estructurada GoogleAuth.initialize() con configuración de Google anidada: SocialLogin.initialize() Copiar a portapapeles

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

Sección titulada “Iniciar sesión”

a GoogleAuth.signIn() con especificación explícita del proveedor: SocialLogin.login() Copiar a portapapeles

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

Cambios específicos de plataforma

Android

1. Actualice su MainActivity.java (Guía completa de configuración 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. No hay cambios importantes necesarios en AppDelegate.swift (Guía de configuración de iOS)

2. Actualice su configuración en capacitor.config.jsonNo lo usamos en el nuevo plugin:

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

Web

1. Elimine las etiquetas de inicio de sesión de Google de sus metadatos, si las estaba utilizando: index.html Copiar a portapapeles

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

Sección titulada “Cambios en el tipo de respuesta”

Copiar a portapapeles

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

proveedor

• provider: Identifica al proveedor de autenticación ('google')
• __CAPGO_KEEP_0__: Detalles del token de acceso con expiración
• : Token de identidad para la autenticación: Información de perfil del usuario incluyendo correo electrónico, nombre y URL de imagen
• Capacidades AdicionalesSección titulada “Capacidades Adicionales”

El nuevo paquete admite múltiples proveedores de autenticación social más allá de Google:

Iniciar sesión con Facebook

• Apple Sign-In
• Facebook Login

Esta aproximación unificada proporciona:

• Consistencia API en todos los proveedores
• Mejor soporte para TypeScript
• Mejor manejo de errores
• Mantenimiento activo y soporte de comunidad

Verifique el documentación principal para obtener instrucciones de configuración detalladas para estos proveedores adicionales.