Cómo iniciar sesión con Google utilizando Capacitor (2026)

Para agregar Google Sign-In a una Capacitor aplicación, cree identificadores de cliente OAuth Web, iOS y uno o más de Android en Google Cloud, instale @capgo/capacitor-social-login, llame SocialLogin.initialize({ google: { webClientId, iOSClientId } }), luego SocialLogin.login({ provider: 'google' })Android utiliza el Administrador de Credenciales de Google, iOS utiliza el inicio de sesión de Google SDK, y la web utiliza los Servicios de Identidad de Google. Todos los tres devuelven un token de ID que verificas en tu servidor.

Esta guía te guía a través de cada paso para Capacitor 8 en octubre de 2026, incluidas las partes que usualmente fallan: huellas dactilares SHA-1, la clave de firma de la aplicación de Play y el esquema de URL de iOS.

How Google Sign-In works in a Capacitor app

Google bloquea OAuth dentro de vistas de Web integradas con el disallowed_useragent el error, por lo que cargar la página de inicio de sesión de Google dentro de su Capacitor WebView no funciona. El plugin utiliza el selector de cuentas nativo en su lugar.

Configuración de paso 1: Google Cloud

Crear un proyecto y la plataforma de autenticación de Google

1. Abrir Google Cloud Console y crear un proyecto, o elegir uno existente. Todos los identificadores de cliente deben residir en el mismo proyecto.
2. Abrir Plataforma de Autenticación de Google (pantalla de consentimiento de OAuth)
3. Bajo Marcado, set the app name users will see, a support email, and your domains and privacy policy URL.
4. Bajo Públicoelegir Externo mientras la aplicación está en Pruebas, solo los cuentas listados bajo Usuarios de prueba pueden iniciar sesión.
5. Bajo Acceso a datos, mantenga el valor predeterminado openid, email y profile permisos a menos que necesites más.

You do not need to publish to production or pass verification for the basic scopes. Sensitive scopes (Calendar, Drive, Gmail) need verification before public release.

Crear los identificadores de cliente

Vaya a Plataforma de autenticación de Google > Clientes (o APIs y Servicios > Credenciales) y crear:

Obtenga los valores SHA-1:

# Debug key and any signing config in build.gradle
cd android && ./gradlew signingReport

# From a signed APK you actually install
keytool -printcert -jarfile android/app/build/outputs/apk/release/app-release.apk

Para ediciones de Play Store, copie el SHA-1 de Consola de juegos > Prueba y publica > Integridad de la aplicación > Certificado de clave de firma de la aplicación. Si necesita un keystore de liberación primero, el Generador de keystore de Android crea uno en el navegador. Nuestra Guía del ID de cliente de Google explora más a fondo en las pantallas de consola.

Step 2: Instale el plugin

bun add @capgo/capacitor-social-login
bunx cap sync

Desactive los proveedores que no utilice para que sus SDKs no estén en el binario:

// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'Example',
  webDir: 'dist',
  plugins: {
    SocialLogin: {
      providers: {
        google: true,
        apple: true,
        facebook: false,
        twitter: false,
      },
    },
  },
};

export default config;

Corra bunx cap sync Step 3: Configuración de iOS

Paso 3: configuración de iOS

Agregar el esquema de URL de ID de cliente invertido

Abra el cliente de iOS en Google Cloud y copie el Esquema de URL de iOS, que se ve así com.googleusercontent.apps.1234567890-abcdef. Agregue esto a ios/App/App/Info.plist antes de la etiqueta de cierre </dict>:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.1234567890-abcdef</string>
    </array>
  </dict>
</array>

Si ya tienes un CFBundleURLTypes array para enlaces profundos, agregar un nuevo <dict> ingreso a ella en lugar de crear una segunda clave.

, importe el SDK y ruteé la URL a él antes de __CAPGO_KEEP_1__:

In ios/App/App/AppDelegate.swift, importe el SDK y redirija la URL a él antes de Capacitor

import GoogleSignIn // add at the top of the file

// Replace the generated application(_:open:options:) method
func application(_ app: UIApplication, open url: URL,
                 options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    if GIDSignIn.sharedInstance.handle(url) {
        return true
    }
    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

call so ApplicationDelegateProxy so @capacitor/app sigue recibiendo tus otros enlaces profundos.

Configuración 4: Configuración de Android

Funciona el inicio de sesión básico con los ámbitos predeterminados sin cambios nativos. Si solicita ámbitos adicionales o utiliza modo offline, el plugin necesita recibir resultados de actividad, por lo que MainActivity debe implementar la interfaz de marcador del plugin:

package com.example.app;

import android.content.Intent;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginHandle;
import ee.forgr.capacitor.social.login.GoogleProvider;
import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
import ee.forgr.capacitor.social.login.SocialLoginPlugin;

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 handle = getBridge().getPlugin("SocialLogin");
            if (handle == null) return;
            Plugin plugin = handle.getInstance();
            if (plugin instanceof SocialLoginPlugin) {
                ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
            }
        }
    }

    @Override
    public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

Sin él, las llamadas con scopes se rechazan con ‘No se pueden utilizar ámbitos sin modificar la actividad principal’.

Para el emulador, utilice una imagen del sistema con el Google Play inicie sesión en una cuenta de Google en ajustes de dispositivo. Imágenes sin servicios de Play devuelven NoCredentialException.

Step 5: Configuración web

Agregue cada origen que sirve la construcción web desde a la cliente Web. Orígenes de JavaScript autorizadosOrígenes de JavaScript autorizadoshttp://localhost:5173). Call initialize pronto: el plugin inyecta la etiqueta de script de Google y el inicio de sesión falla si se ejecuta antes de que el script esté listo.

Paso 6: Inicializar y conectarse

import { SocialLogin } from '@capgo/capacitor-social-login';

const WEB_CLIENT_ID = '1234567890-web.apps.googleusercontent.com';
const IOS_CLIENT_ID = '1234567890-ios.apps.googleusercontent.com';

export async function initAuth() {
  await SocialLogin.initialize({
    google: {
      webClientId: WEB_CLIENT_ID, // Android + web
      iOSClientId: IOS_CLIENT_ID, // iOS
      iOSServerClientId: WEB_CLIENT_ID, // same as webClientId, required for offline mode on iOS
      mode: 'online',
    },
  });
}

export async function signInWithGoogle() {
  try {
    const { result } = await SocialLogin.login({
      provider: 'google',
      options: {},
    });

    if (result.responseType !== 'online' || !result.idToken) {
      throw new Error('Expected an ID token from Google');
    }

    const res = await fetch('https://api.example.com/auth/google', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ idToken: result.idToken }),
    });
    return res.json();
  } catch (error: any) {
    if (error?.code === 'USER_CANCELLED') return null;
    throw error;
  }
}

La respuesta en línea contiene:

opciones de visualización solo para Android

El options objeto acepta style: 'bottom' para la interfaz de hoja de diálogo inferior, más filterByAuthorizedAccounts y autoSelectEnabled para usuarios que vuelven. Deja filterByAuthorizedAccounts apagado si soportas cuentas de Family Link forceRefreshToken: true pregunta a Android por un token de acceso fresco en lugar de uno en caché

Solicitar ámbitos adicionales

const { result } = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['https://www.googleapis.com/auth/calendar.readonly'],
  },
});

Recuerda el MainActivity cambiar en Android, y agregar el alcance bajo Acceso a datos en la nube de Google.

modo en línea (predeterminado)

Modo offline en iOS requiere iOSServerClientIdy en Android requiere el MainActivity cambio.

Cerrar sesión y comprobaciones de sesión

await SocialLogin.isLoggedIn({ provider: 'google' }); // { isLoggedIn: boolean }
await SocialLogin.logout({ provider: 'google' });

En Android, logout también limpia el estado del Administrador de credenciales, por lo que el selector de cuenta aparece nuevamente la próxima vez.

Verificar el token de ID en tu servidor

import { OAuth2Client } from 'google-auth-library';

const client = new OAuth2Client();

export async function verifyGoogleToken(idToken: string) {
  const ticket = await client.verifyIdToken({
    idToken,
    audience: [
      '1234567890-web.apps.googleusercontent.com',
      '1234567890-ios.apps.googleusercontent.com',
    ],
  });
  const payload = ticket.getPayload();
  if (!payload) throw new Error('Empty token payload');

  return {
    googleUserId: payload.sub,
    email: payload.email,
    emailVerified: payload.email_verified === true,
    name: payload.name,
  };
}

Utiliza sub solo enlace una cuenta existente por correo electrónico cuando email_verified is trueAceptar ambos IDs de cliente como audiencia mantiene válidos los tokens de todas las plataformas. Luego, emita su propia sesión. Si utiliza un backend administrado, siga Supabase con Capacitor Inicio de sesión social o el Guía de Google de Firebase.

Troubleshooting

En Android, filtre Logcat por GoogleProviderEl plugin registra el nombre del paquete, la firma SHA-1 y una clave de acceso oculta webClientId, con la que puedes comparar en un minuto contra la consola.

Envío y mantenimiento

Console changes can take a few hours to propagate, so do not rotate client IDs on release day. Once the native setup is in a store build, client-side changes such as scopes, error handling or the backend URL can go out through Capgo live updatesSi su equipo no tiene un Mac para las liberaciones de iOS, Capgo Construcción construye y firma el binario iOS en la nube.

Guías relacionadas

• ¿Cómo iniciar sesión con Apple utilizando Capacitor, lo que necesitarás en iOS si Google es tu inicio de sesión principal.
• ¿Cómo agregar autenticación a una aplicación Capacitor entre social login, OIDC, passkeys y autenticación mejorada.
• Página de plugin de inicio de sesión social y el Documentación de configuración de Android de Google.