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-login, ensuring a smooth transition and improved authentication experience. The new plugin unifies multiple social authentication providers under a single, consistent API.

asegurando una transición suave y una experiencia de autenticación mejorada. El nuevo plugin unifica múltiples proveedores de autenticación social bajo un solo y consistente __CAPGO_KEEP_0__.

1. Sección titulada “Instalación”

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

2. Copiar a portapapeles

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

Cambios Importantes en la Configuración de Autenticación de Google

Requisito de Identificador de Cliente Web

Cambio Crítico: La actualización del plugin requiere el uso de un Identificador de Cliente Web en todas las plataformas.

Tendrás que:

1. Crear un Identificador de Cliente Web en la Consola de Cloud de Google si no lo tienes (Cómo obtener las credenciales)
2. Usar este Identificador de Cliente Web en el webClientId campo para todas las plataformas
3. Para Android, todavía necesitarás crear un Identificador de Cliente Android con tu 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';

Iniciación

La configuración se transforma de una llamada simple GoogleAuth.initialize() a una estructurada más compleja 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 se necesitan cambios importantes en AppDelegate.swift (Guía de configuración de iOS)

2. Actualice su configuración en capacitor.config.json, no 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 lo 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 proporciona ahora un objeto estructurado que contiene información del proveedor, tokens de acceso, tokens de ID y datos de perfil de 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
• result.idToken: Token de ID para la autenticación
• result.perfilInformación del perfil del usuario, incluyendo correo electrónico, nombre y URL de imagen

Capacidades adicionales

Iniciar sesión con Apple

• Iniciar sesión con Facebook
• Esta aproximación unificada proporciona:

Consistencia __CAPGO_KEEP_0__ en todos los proveedores

• Consistent API across all providers
• Mejor manejo de errores
• Mantenimiento activo y soporte de la comunidad
• Soporte activo y comunidad activa

Ver la documentación principal para obtener instrucciones de configuración detalladas para estos proveedores adicionales.