Cara Login dengan Google Menggunakan Capacitor (2026)

Untuk menambahkan Google Sign-In ke aplikasi Capacitor, buat Web, iOS, dan satu atau lebih Android OAuth client ID di Google Cloud, lalu install @capgo/capacitor-social-login, panggil SocialLogin.initialize({ google: { webClientId, iOSClientId } }), lalu SocialLogin.login({ provider: 'google' }). Android menggunakan Credential Manager dari Google, iOS menggunakan SDK Google Sign-In, dan web menggunakan Google Identity Services. Ketiganya mengembalikan ID token yang Anda verifikasi di server Anda.

Panduan ini membahas setiap langkah untuk Capacitor 8 pada Oktober 2026, termasuk bagian yang biasanya bermasalah: fingerprint SHA-1, kunci Play App Signing, dan skema URL iOS.

Cara kerja Google Sign-In di aplikasi Capacitor

Google memblokir OAuth di dalam WebView tertanam dengan disallowed_useragent error, itulah mengapa memuat halaman login Google di dalam Capacitor WebView tidak berfungsi. Plugin ini menggunakan pemilih akun native sebagai gantinya.

Langkah 1: Konfigurasi Google Cloud

Buat project dan Google Auth Platform

1. Buka Google Cloud Console dan buat proyek, atau pilih yang sudah ada. Semua client ID harus berada di proyek yang sama.
2. Buka Platform Autentikasi Google (layar yang sebelumnya disebut “OAuth consent screen”).
3. Di bawah Branding, atur nama aplikasi yang akan dilihat pengguna, email dukungan, serta domain dan URL kebijakan privasi Anda.
4. Di bawah Audiens, pilih Eksternal untuk aplikasi konsumen. Saat aplikasi dalam Pengujian, hanya akun yang tercantum di Pengguna uji yang bisa login.
5. Di bawah Akses Data, biarkan scope default openid, email dan profile kecuali jika butuh lebih banyak.

Anda tidak perlu publish ke production atau lolos verifikasi untuk scope dasar. Scope sensitif (Calendar, Drive, Gmail) perlu verifikasi sebelum rilis publik.

Create the client IDs

Buka Google Auth Platform > Clients (atau APIs & Services > Credentials) dan buat:

Dapatkan nilai 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

Untuk build Play Store, salin SHA-1 dari Play Console > Test and release > App integrity > App signing key certificate. Jika Anda perlu release keystore terlebih dahulu, yang Generator keystore Android membuatnya di browser. Panduan Google client ID kami menjelaskan lebih dalam tentang layar console.

Langkah 2: Instal plugin

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

Nonaktifkan provider yang tidak Anda gunakan agar SDK-nya tidak masuk ke binary:

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

Jalankan bunx cap sync setelah mengganti provider.

Langkah 3: Konfigurasi iOS

Tambahkan URL scheme reversed client ID

Buka client iOS di Google Cloud dan salin Skema URL iOS, yang formatnya seperti com.googleusercontent.apps.1234567890-abcdef. Tambahkan ke ios/App/App/Info.plist sebelum penutup </dict>:

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

Jika Anda sudah punya CFBundleURLTypes array untuk deep links, tambahkan <dict> entry baru ke dalamnya alih-alih membuat key kedua.

Biarkan Google SDK menangani callback URL

Di ios/App/App/AppDelegate.swift, import SDK dan arahkan URL ke sana sebelum 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)
}

Pertahankan ApplicationDelegateProxy panggil begitu @capacitor/app tetap menerima deep link Anda yang lain.

Langkah 4: Konfigurasi Android

Login dasar dengan scope default berfungsi tanpa perubahan native. Jika Anda meminta scope tambahan atau gunakan mode offline, plugin perlu menerima activity result, jadi MainActivity harus mengimplementasikan marker interface 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() {}
}

Tanpa itu, pemanggilan dengan scopes akan ditolak dengan “You CANNOT use scopes without modifying the main activity”.

Untuk emulator, gunakan system image dengan Google Play label dan login ke akun Google di pengaturan perangkat. Image tanpa Play services mengembalikan NoCredentialException.

Langkah 5: Konfigurasi Web

Tambahkan setiap origin tempat Anda menyajikan web build ke Web client Asal JavaScript yang diizinkan, termasuk port (http://localhost:5173). Panggil initialize awal: plugin menyuntikkan tag script Google dan login akan gagal jika dijalankan sebelum script tersebut siap.

Langkah 6: Inisialisasi dan login

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

Respons online berisi:

Opsi tampilan khusus Android

Panduan options object menerima style: 'bottom' untuk UI bottom sheet, ditambah filterByAuthorizedAccounts dan autoSelectEnabled untuk pengguna lama. Biarkan filterByAuthorizedAccounts nonaktif jika Anda mendukung akun Family Link. forceRefreshToken: true meminta access token baru dari Android alih-alih yang di-cache.

Meminta scope tambahan

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

Remember the MainActivity perubahan di Android, dan tambahkan scope Akses Data di Google Cloud.

Mode online vs offline

Mode offline di iOS memerlukan iOSServerClientId, dan di Android memerlukan MainActivity perubahan.

Logout dan pengecekan sesi

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

Di Android, logout juga membersihkan state Credential Manager, sehingga account picker muncul lagi di kesempatan berikutnya.

Langkah 7: Verifikasi ID token di server Anda

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

Gunakan sub sebagai stable user key. Hanya link akun yang sudah ada via email jika email_verified adalah true. Menerima kedua client ID sebagai audience membuat token dari semua platform tetap valid. Lalu issue session Anda sendiri. Jika Anda menggunakan managed backend, ikuti Supabase dengan Capacitor Social Login atau panduan Google Firebase. Neon Auth menangani Google melalui redirect OAuth, yang @capgo/capacitor-neon berjalan secara native.

Pemecahan Masalah

Di Android, filter Logcat dengan GoogleProvider. Plugin mencatat nama package, SHA-1 signing, dan nilai yang disamarkan webClientId, yang bisa Anda bandingkan dengan console dalam satu menit.

Merilis dan memelihara

Perubahan di console bisa memakan waktu beberapa jam untuk menyebar, jadi jangan rotasi client ID di hari rilis. Setelah setup native ada di store build, perubahan di sisi client seperti scope, error handling, atau URL backend bisa dikirim melalui Live updates Capgo. Jika tim Anda tidak punya Mac untuk rilis iOS, Build Capgo build dan sign binary iOS di cloud.

Panduan terkait

• Cara sign in dengan Apple menggunakan Capacitor, yang akan Anda butuhkan di iOS jika Google adalah metode login utama Anda.
• Cara menambah autentikasi ke aplikasi Capacitor untuk memilih antara social login, OIDC, passkeys, dan Better Auth.
• Halaman plugin Social Login dan Dokumentasi setup Google Android.