How to Sign In with Google Using Capacitor (2026)

Per aggiungere Google Sign-In a un'app Capacitor, crea un ID client OAuth Web, iOS e uno o più ID client Android in Google Cloud, installa @capgo/capacitor-social-login, chiama SocialLogin.initialize({ google: { webClientId, iOSClientId } }), poi SocialLogin.login({ provider: 'google' }). Android utilizza il Manager delle credenziali di Google, iOS utilizza il Google Sign-In SDK, e il web utilizza i Servizi di identità di Google. Tutti e tre restituiscono un token di ID che verificare sul tuo server.

Questa guida guida attraverso ogni passo per Capacitor 8 in ottobre 2026, compresi i parti che di solito si rompono: le impronte digitali SHA-1, la chiave di firma dell'app Play e lo schema di URL di iOS.

Come funziona il Google Sign-In in un'app Capacitor

Google blocca OAuth all'interno delle viste Web integrate con il disallowed_useragent errore, il che spiega perché caricare la pagina di accesso Google all'interno del tuo WebView Capacitor non funziona. Il plugin utilizza invece il picker di account nativo.

Passo 1: Configura Google Cloud

Creare un progetto e il Google Auth Platform

1. Apre Google Console Cloud e crea un progetto o scegli uno esistente. Tutti gli ID dei clienti devono vivere nello stesso progetto.
2. Apri Piattaforma di autenticazione Google (lo schermo precedentemente chiamato “schermo di consenso OAuth”).
3. Sotto MarchioImposta il nome dell'app che gli utenti vedranno, un indirizzo email di supporto e i tuoi domini e l'URL della politica sulla privacy.
4. Sotto Pubblico, choose , scegli per applicazioni per il consumatore. Mentre l'app è in Test, solo gli account elencati sotto Utenti di test possono accedere.
5. Sotto Accesso ai dati, mantieni i valori predefiniti openid, email e profile ambiti a meno che tu non ne abbia bisogno.

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.

Crea gli ID del client

Vai a Piattaforma di autenticazione Google > Clienti (o API e servizi > Credenziali)e e crea:

Ottieni i valori 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

Per i build di Play Store, copia il SHA-1 da Console di Play > Test e rilascio > Integrità dell'app > Certificato di firma dell'app. Se hai bisogno di una chiave di release prima, il Generatore di keystore Android crea uno nel browser. Il nostro Guida all'ID del client Google Passo 2: Installa il plugin

Passo 2: Installa il plugin

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

Disabilitare i provider che non utilizzate affinché i loro SDK rimangano fuori dal 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;

Run bunx cap sync dopo aver cambiato provider.

Passo 3: configurazione iOS

Dopo aver cambiato provider.

Apri l'applicazione iOS in Google Cloud e incolla il Schema URL di iOS, che assomiglia a com.googleusercontent.apps.1234567890-abcdef. Aggiungilo a ios/App/App/Info.plist prima della chiusura </dict>:

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

Se hai già un account CFBundleURLTypes entry a esso al posto di creare una seconda chiave. <dict> Lascia che il Google __CAPGO_KEEP_0__ gestisca l'URL di callback

Let the Google SDK handle the callback URL

In ios/App/App/AppDelegate.swiftimporta SDK e reindirizza l'URL a esso prima di 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)
}

chiamata così ApplicationDelegateProxy chiama @capacitor/app riceve ancora i suoi altri collegamenti profondi.

Passo 4: Configurazione Android

È possibile eseguire l'accesso di base con gli ambiti predefiniti senza modifiche native. Se richiedi ambiti aggiuntivi o utilizzi modalità offline, il plugin deve ricevere i risultati dell'attività, quindi MainActivity deve implementare l'interfaccia di marker 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() {}
}

Senza di esso, le chiamate con scopes vengono respinte con “Non è possibile utilizzare gli ambiti senza modificare l'attività principale”.

Per l'emulatore, utilizza un'immagine del sistema con il Google Play etichetta e accedi al tuo account Google nei impostazioni del dispositivo. Immagini senza servizi Play ritornano NoCredentialException.

Passo 5: Configurazione web

Aggiungi ogni origine da cui servisci il build web alla client web Origini JavaScript autorizzate, inclusa la porta (http://localhost:5173Chiamata initialize early: il plugin inietta il tag script di Google e il login fallisce se esegue prima che lo script sia pronto.

Passo 6: Inizializzazione e accesso

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 risposta online contiene:

opzioni di visualizzazione Android esclusiva

L' options oggetto accetta style: 'bottom' per l'interfaccia utente della scheda laterale, più filterByAuthorizedAccounts e autoSelectEnabled per gli utenti di ritorno. Lascia filterByAuthorizedAccounts disabilitato se supportate gli account Family Link. forceRefreshToken: true chiede a Android un token di accesso fresco al posto di uno memorizzato.

Richiedere ambiti aggiuntivi

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

Ricorda il MainActivity modifica su Android, e aggiungi lo scope sotto Accesso ai dati in Cloud Google.

Modalità online vs offline

La modalità offline su iOS richiede iOSServerClientIde su Android richiede il MainActivity modifica.

Logout e controlli di sessione

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

Su Android, logout Anche svuota lo stato del Credential Manager, quindi il selettore account appare nuovamente la prossima volta.

Step 7: Verifica il token di ID sul tuo server

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

context sub come la chiave utente stabile. Collega solo un account esistente tramite email quando email_verified is trueAccettando entrambi gli ID client come pubblico mantiene validi i token da ogni piattaforma. Emessa quindi la propria sessione. Se si utilizza un backend gestito, seguire Supabase con Capacitor Login sociale o il Guida Google di Firebase.

Firebase Google guide

Filtra Logcat su Android GoogleProviderIl plugin registra il nome del pacchetto, la firma SHA-1 e un indirizzo email mascherato webClientIdche puoi confrontare con il console in un minuto.

Consegna e manutenzione

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 updates, che puoi confrontare con la console in un minuto. Capgo Build compila e firma il binario iOS in cloud.

Guida correlate

• Come effettuare l'accesso con Apple utilizzando Capacitor, che avrai bisogno su iOS se Google è il tuo login principale.
• Come aggiungere l'autenticazione a un'app Capacitor per scegliere tra login sociale, OIDC, passkey e Better Auth.
• Pagina plugin di login sociale e il Documentazione di configurazione Android di Google.