Mit Google anmelden: Eine Anleitung für Capacitor (2026)

To add Google Sign-In to a Capacitor app, create a Web, an iOS and one or more Android OAuth client IDs in Google Cloud, install @capgo/capacitor-social-loginrufen Sie SocialLogin.initialize({ google: { webClientId, iOSClientId } })an, dann SocialLogin.login({ provider: 'google' }). Android uses Google’s Credential Manager, iOS uses the Google Sign-In SDK, and the web uses Google Identity Services. All three return an ID token you verify on your server.

This guide walks through every step for Capacitor 8 in October 2026, including the parts that usually break: SHA-1 fingerprints, the Play App Signing key, and the iOS URL scheme.

How Google Sign-In works in a Capacitor app

Google blockiert OAuth innerhalb von eingebetteten WebViews mit dem disallowed_useragent fehler, weshalb die Laden von Googles Login-Seite in Ihrem Capacitor WebView nicht funktioniert. Die Erweiterung verwendet stattdessen den nativen Account-Picker.

Schritt 1: Konfigurieren Sie Google Cloud

Erstellen Sie ein Projekt und die Google Auth-Plattform

1. Öffnen Google Cloud Console und erstellen Sie ein Projekt oder wählen Sie ein bestehendes aus. Alle Client-IDs müssen sich im gleichen Projekt befinden.
2. Öffnen Google Auth-Plattform die Bildschirmseite (früher als „OAuth-Zustimmungsbildschirm“ bezeichnet)
3. Unter MarkenSetze den Namen, den Benutzer im App sehen werden, eine Support-E-Mail, deine Domains und die URL deiner Datenschutzbestimmungen.
4. Unter Zielgruppewählen Sie Extern für Verbraucheranwendungen. Während die Anwendung sich im Testen, only the accounts listed under Testnutzer kann sich anmelden.
5. Unter Datenzugriffhalten Sie die Standardwerte. openid, email und profile Berechtigungen, es sei denn, Sie benötigen mehr.

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.

Erstellen Sie die Client IDs

Gehe zu APIs & Services > Zertifikate oder APIs & Dienste > Zertifikate) und erstellen:

Erlauben Sie die SHA-1-Werte:

# 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

Für Play Store-Builds kopieren Sie die SHA-1 aus Google Play Konsole > Testen und freigeben > App-Integrität > App-Zertifikat für digitale SignaturWenn Sie ein Release-Keystore benötigen, erstellt der Android-Keystore-Generator einen in der Browser. Unsere Google-Kunden-ID-Anleitung geht tiefer auf die Konsole-Bildschirme ein.

Schritt 2: Installieren Sie das Plugin

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

Deaktivieren Sie die Anbieter, die Sie nicht verwenden, damit ihre SDKs aus dem Binärdatei bleiben:

// 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 nachdem Sie den Anbieter gewechselt haben.

Schritt 3: iOS-Konfiguration

Fügen Sie die umgekehrte Client-ID-URL-Scheme hinzu

Öffnen Sie den iOS-Klienten in Google Cloud und kopieren Sie iOS-URL-SchemaiOS-URL-Scheme com.googleusercontent.apps.1234567890-abcdef, das wie ios/App/App/Info.plist vor dem Abschluss </dict>:

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

Wenn Sie bereits ein CFBundleURLTypes für tiefere Links haben, fügen Sie ein neues <dict> anstatt eine zweite Schlüssel zu erstellen.

Lassen Sie Google SDK die Callback-URL bearbeiten

In ios/App/App/AppDelegate.swift, importiere SDK und leite die URL an es weiter, bevor 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)
}

Behalten Sie ApplicationDelegateProxy rufen @capacitor/app erhält immer noch deine anderen deep links.

Schritt 4: Android-Konfiguration

Basicer Anmeldung mit den Standardberechtigungen funktioniert ohne native Änderungen. Wenn Sie die Berechtigungen anfordern Zusätzliche Berechtigungen oder verwenden Offline-Modus, der Plugin muss Aktivitätsresultate erhalten, also MainActivity musst du die Schnittstelle des Plugins implementieren:

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() {}
}

Ohne es, werden Anrufe mit scopes mit der Meldung 'Sie können keine Berechtigungen ohne Änderung der Hauptaktivität verwenden' abgelehnt.

Für den Emulator verwende ein Systemimage mit dem Google Play Label und melde dich bei einem Google-Konto in den Geräte-Einstellungen an. Bilder ohne Play-Dienste liefern NoCredentialException.

Schritt 5: Web-Konfiguration

Alle Ursprünge, die du mit dem Web-Build ausgeliefert hast, füge der Web-Klients genehmigte JavaScript-Ursprünge, einschließlich der Port (http://localhost:5173) Aufrufen initialize Früh: Der Plugin injiziert Googles Skript-Tag und der Login fehlt, wenn er vor dem Skript bereit ist.

Schritt 6: Initialisierung und Anmeldung

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

Die Online-Antwort enthält:

Android-spezifische Anzeigeoptionen

Das options Objekt akzeptiert style: 'bottom' für die Benutzeroberfläche des unteren Blatts, plus filterByAuthorizedAccounts und autoSelectEnabled für registrierte Benutzer. Lassen filterByAuthorizedAccounts Sie es aus, wenn Sie Familienlink-Konten unterstützen. forceRefreshToken: true fragt Android nach einem frischen Zugriffstoken anstatt eines gecacheten.

Berechtigungen anfordern

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

Denken Sie daran MainActivity die Änderung auf Android und fügen Sie den Bereich unter Datenzugriff in Google Cloud hinzu.

Online- vs Offline-Modus

Bei Offline-Modus auf iOS ist erforderlich, dass iOSServerClientIdund auf Android ist erforderlich, dass MainActivity den

Abmelden und Sitzungsprüfungen

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

Bei Android logout löscht auch den Zustand des Credential Managers, sodass sich das Kontoauswahlmenü wieder beim nächsten Aufruf zeigt.

Schritt 7: Überprüfen Sie den ID-Token auf Ihrem 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,
  };
}

Verwenden sub als die stabile Benutzerschlüssel. Verbinden Sie nur eine bestehende E-Mail-Konto, wenn email_verified ist trueAkzeptieren Sie beide Client-IDs als Zielgruppe, um Tokens von jedem Plattform zu erhalten. Dann erteilen Sie Ihre eigene Sitzung. Wenn Sie einen verwalteten Backend verwenden, folgen Sie Supabase mit Capacitor Social Login oder Firebase Google Anleitung.

Troubleshooting

Auf Android filtern Sie Logcat durch GoogleProvider. Das Plugin loggt den Paketnamen, die Signatur SHA-1 und eine maskierte webClientId, die Sie gegenüber dem Konsole in einer Minute vergleichen können.

Versand und Wartung

Änderungen in der Konsole können einige Stunden dauern, um sich zu verbreiten, also sollten Sie keine Client-IDs auf Veröffentlichungstag rotieren. Sobald die native Einrichtung in einem Ladenbuild ist, können Client-seitige Änderungen wie Scopes, Fehlerbehandlung oder die Backend-URL über Capgo live Updates durchgeführt werden. Wenn Ihr Team keinen Mac für iOS-Releases hat, Capgo Build baut und signiert die iOS-Binary im Cloud.

Zugehörige Anleitungen

• Wie Sie sich mit Apple anmelden, indem Sie sich mit Capacitordie Sie auf iOS benötigen, wenn Google Ihr Hauptanmeldesystem ist.
• Ein Capacitor-App authentifizieren zur Auswahl zwischen sozialer Anmeldung, OIDC, Passwörtern und besseren Authentifizierungsmethoden.
• Social Login-Plugin-Seite und das Google-Android-Einrichtungsanleitungen.