Cara Masuk dengan Google Menggunakan Capacitor (2026)

Untuk menambahkan Google Sign-In ke sebuah aplikasi Capacitor, buatlah klien OAuth Web, iOS, dan satu atau lebih klien OAuth Android di Google Cloud, instal @capgo/capacitor-social-login, panggil SocialLogin.initialize({ google: { webClientId, iOSClientId } }), kemudian SocialLogin.login({ provider: 'google' })Android menggunakan Manajer Kredensial Google, iOS menggunakan Google Sign-In SDK, dan web menggunakan Layanan Identitas Google. Semua tiga kembali dengan token ID yang Anda verifikasi di server Anda.

Petunjuk ini menjelajahi setiap langkah untuk Capacitor 8 Oktober 2026, termasuk bagian yang biasanya rusak: cap fingerprint SHA-1, kunci Play App Signing, dan skema URL iOS.

Bagaimana Google Sign-In bekerja di aplikasi Capacitor

Google Blokir OAuth di Dalam View Web Terintegrasi dengan disallowed_useragent kesalahan, yang mengapa memuat halaman login Google di dalam Capacitor View Web Anda tidak berfungsi. Plugin menggunakan pilih akun native daripada.

Langkah 1: Konfigurasi Google Cloud

Langkah 1: Konfigurasi Google Cloud

1. Open Google Cloud Console dan buatlah proyek, atau pilih proyek yang sudah ada. Semua ID klien harus berada di proyek yang sama.
2. Terbuka Platform Otoritas Google (layar yang sebelumnya disebut “OAuth consent screen”).
3. Di bawah Pengenalan, atur nama aplikasi yang akan dilihat pengguna, alamat email dukungan, dan URL domain dan kebijakan privasi Anda.
4. Di bawah Audiencontext External for consumer apps. While the app is in PengujianHanya akun yang terdaftar di Pengguna Uji Bisa masuk.
5. Akses Data Akses DataTetapkan opsi default openid, email and profile izin lebih luas kecuali Anda memerlukan yang lebih.

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.

Create the client IDs

Pergi ke Google Auth Platform > Klien (atau APIs & Services > Kredensial) 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 aplikasi Play Store, salin nilai SHA-1 dari Console Play > Uji dan rilis > Integritas aplikasi > Sertifikat kunci tanda tangan aplikasi. Jika Anda membutuhkan kunci rilis terlebih dahulu, Generator Kunci Android Membuat satu di browser. Panduan Klien Google kami mengulas lebih lanjut pada layar console. Masuk lebih dalam pada layar konsol.

Langkah 2: Instal Plugin

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

Matikan penyedia yang tidak Anda gunakan agar SDK-nya tidak masuk ke dalam file biner:

// 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 setelah mengubah penyedia.

Langkah 3: Konfigurasi iOS

Jalankan setelah mengubah penyedia.

Buka klien iOS di Cloud Google dan salin URL Scheme iOS, yang terlihat 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 memiliki CFBundleURLTypes array untuk tautan dalam, tambahkan yang baru <dict> Biarkan Google __CAPGO_KEEP_0__ mengelola URL panggilan balik

Let the Google SDK handle the callback URL

In ios/App/App/AppDelegate.swiftImport SDK dan arahkan URL kepadanya 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)
}

sehingga ApplicationDelegateProxy tahan panggilan @capacitor/app masih menerima tautan dalam yang lain.

Langkah 4: Konfigurasi Android

Konfigurasi sign-in dasar dengan skop default berfungsi tanpa perubahan native. Jika Anda meminta skop tambahan atau gunakan modus offline, plugin harus menerima hasil aktivitas, sehingga MainActivity harus mengimplementasikan interface penanda 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, panggilan dengan scopes ditolak dengan "Anda TIDAK dapat menggunakan skop tanpa mengubah aktivitas utama".

Untuk emulator, gunakan gambar sistem dengan Google Play tanda label dan masuk ke akun Google di pengaturan perangkat. Gambar tanpa Play services kembali NoCredentialException.

Langkah 5: Konfigurasi Web

Tambahkan setiap asal yang Anda layani dari pembangunan web ke klien Web Asal JavaScript yang Diizinkan, termasuk port (http://localhost:5173Panggil initialize awal: plugin menginjeksikan tag skrip Google dan login gagal jika berjalan sebelum skrip siap

Langkah 6: Inisialisasi dan masuk

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

Tanggapan online berisi:

Pilihan tampilan Android hanya

The options untuk UI sheet bawah, plus style: 'bottom' untuk sheet bawah UI, plus filterByAuthorizedAccounts and autoSelectEnabled untuk pengguna yang sudah terdaftar. Biarkan filterByAuthorizedAccounts mati jika Anda mendukung akun Family Link. forceRefreshToken: true Mengajukan Android untuk mendapatkan token akses segar daripada yang disimpan.

Mengajukan ruang lingkup tambahan

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

Remember the MainActivity perubahan pada Android, dan tambahkan ruang lingkup di bawah Akses Data mode online vs offline

Online (default)

Pengaturan offline pada iOS memerlukan iOSServerClientId, dan pada Android memerlukan MainActivity change.

Pengeluaran dan pengecekan sesi

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

Pada Android, logout juga menghapus status Manager Kredensial, sehingga pilihan akun muncul lagi kali berikutnya.

Langkah 7: Verifikasi token ID 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 kunci pengguna stabil. Hanya hubungkan akun yang sudah ada melalui email ketika email_verified adalah true. Menerima kedua ID klien sebagai audiens menjaga token dari setiap platform tetap valid. Kemudian, keluarkan sesi Anda sendiri. Jika Anda menggunakan backend yang diatur, ikuti Supabase dengan Capacitor Login Sosial atau Firebase Guide Google.

Troubleshooting

sebelum bekerja pada fitur baru GoogleProviderPlugin ini mencatat nama paket, tanda tangan SHA-1 dan alamat email yang dienkripsi webClientId. Plugin ini mencatat nama paket, tanda tangan SHA-1, dan tanda bintang

Mengirim dan memelihara

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 updatesJika tim Anda tidak memiliki Mac untuk rilis iOS, Capgo Pembangunan membangun dan menandatangani file biner iOS di cloud.

Petunjuk terkait

• Bagaimana cara masuk dengan Apple menggunakan Capacitor, yang Anda butuhkan di iOS jika Google adalah login utama Anda.
• Bagaimana menambahkan autentikasi ke aplikasi Capacitor untuk memilih antara login sosial, OIDC, passkeys dan Better Auth.
• Plugin Login Sosial dan Document pengaturan Android Google.