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

Resumen

Esta guía proporciona pasos detallados para migrar desde @codetrix-studio/capacitor-google-auth to @capgo/capacitor-social-loginGarantizando una transición suave y una experiencia de autenticación mejorada. El nuevo plugin unifica varios proveedores de autenticación social bajo un API único y consistente.

Installation

1. Sección titulada “Instalación”

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

2. Instale el nuevo paquete:

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

Important Changes in Google Auth Setup

Requisito de ID de cliente web

Cambio críticoEl plugin actualizado requiere el uso de un ID de cliente web en todas las plataformas.

Necesitará:

1. Crear un ID de cliente web en la consola de Google Cloud si no tiene uno (Cómo obtener las credenciales)
2. Utilice este ID de cliente web en el webClientId campo para todas las plataformas
3. Para Android, todavía necesita crear un ID de cliente Android con su SHA1, pero este es solo para fines de verificación - el token no se usará (Guía de configuración para 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 en una simple GoogleAuth.initialize() llamada a una estructura más organizada SocialLogin.initialize() con configuración de Google anidada:

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

Iniciar sesión

El método de inicio de sesión cambia de GoogleAuth.signIn() a SocialLogin.login() con especificación de proveedor explícita:

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 su index.html si las estaba utilizando:

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

Cambios en el tipo de respuesta

La respuesta de autenticación ahora proporciona un objeto estructurado que contiene información del proveedor, tokens de acceso, tokens de ID y datos de perfil del usuario:

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 estructura de la respuesta incluye:

• proveedor: Identifica al proveedor de autenticación ('google')
• result.accessToken: Detalles del token de acceso con expiración
• token.idToken: Token de ID para la autenticación
• perfilDeResultadoInformación del perfil del usuario incluyendo correo electrónico, nombre y URL de imagen

Capacidades adicionales

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

• Iniciar sesión con Apple
• Iniciar sesión con Facebook

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.

Siga adelante desde la migración de autenticación de Google a @capgo/social-login

Si está utilizando la migración de autenticación de Google a @capgo/social-login para planificar la autenticación y los flujos de cuenta, conecte con Usando @capgo/capacitor-social-login Migración para la capacidad nativa en @capgo/capacitor-login-social @capgo/capacitor-login-social Migración para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-privada Migración para el detalle de implementación en @capgo/capacitor-clave-privada @capgo/capacitor-autenticación-biometrica-nativa Migración para el detalle de implementación en @capgo/capacitor-autenticación-biometrica-nativa, y Autenticación en dos factores Para la implementación detallada en Autenticación de dos factores.