Google Login di Android

Salin prompt setup yang berisi langkah install dan panduan markdown lengkap untuk plugin ini.

Pendahuluan

Dalam panduan ini, Anda akan belajar cara mengatur Google Login dengan Capgo Social Login untuk Android. Saya asumsikan Anda sudah membaca panduan setup umum.

Di bagian ini, Anda akan belajar cara mengatur Google login di Android.

Sertifikat SHA1 Android itu benar-benar menyebalkan, dan saya tidak ingin siapa pun harus repot mengaturnya. Langkah-langkah berikut mengasumsikan skenario paling sederhana: aplikasi yang tidak dipublikasikan ke Google Play Store dan hanya digunakan oleh simulator lokal atau perangkat hardware untuk development.

Jika Anda sudah merilis aplikasi ke Google Play Store, Anda WAJIB menambahkan Android client ID tambahan yang berisi SHA1 dari Google Play Console untuk rilis produksi. Anda dapat menemukan hash SHA1 yang digunakan Google Play untuk menandatangani release bundle Anda di bawah Test and release > Setup > App Signing.

Terakhir, perlu diingat bahwa jika terjadi kesalahan, error-nya TIDAK akan terlihat jelas. Ini mungkin akan sangat sulit di-debug. Jika Anda kesulitan dengan setup ini, silakan cek Masalah Github.

Selain itu, Anda juga bisa melihat bagian troubleshooting pada setup Google Login untuk Android untuk informasi lebih lanjut.

Buat Android client ID.
1. Klik kolom pencarian
2. Cari credentials dan klik pada APIs and Services satu (nomor 2 pada screenshot)
3. Klik pada create credentials
4. Pilih OAuth client ID
5. Pilih Android tipe aplikasi
6. Buka Android Studio
7. Di bagian paling bawah navigator, cari Gradle Scripts
8. Cari build.gradle untuk modul app
9. Salin android.defaultConfig.applicationId. Ini akan menjadi package name di konsol Google
10. Sekarang, buka terminal. Pastikan Anda berada di android folder aplikasi Anda dan jalankan ./gradlew signInReport
1. Scroll ke bagian atas perintah ini. Anda akan melihat hal berikut. Salin SHA1.
1. Sekarang, kembali ke Google Console. Masukkan applicationId sebagai Package Name dan SHA1 Anda di field sertifikat, lalu klik create
Buat web client (wajib untuk Android)
1. Buka halaman Create credentials halaman di Google Console
2. Atur tipe aplikasi menjadi Web
3. Klik Create
4. Salin client ID, Anda akan menggunakannya sebagai webClientId di dalam JS/TS code Anda

Ubah MainActivity

Silakan buka aplikasi Anda di Android Studio. Anda bisa menjalankan cap open android
Cari MainActivity.java
1. Buka app folder
2. Cari java
3. Cari MainActivity.java dan klik pada item tersebut

Modifikasi MainActivity.java. Silakan tambahkan code berikut

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

// ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
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 pluginHandle = getBridge().getPlugin("SocialLogin");
          if (pluginHandle == null) {
            Log.i("Google Activity Result", "SocialLogin login handle is null");
            return;
          }
          Plugin plugin = pluginHandle.getInstance();
          if (!(plugin instanceof SocialLoginPlugin)) {
            Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
            return;
          }
          ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
        }
      }

      // This function will never be called, leave it empty
      @Override
      public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

Simpan file

Gunakan Google Login di aplikasi Anda
1. Pertama, import SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. Panggil initialize. Ini hanya boleh dipanggil sekali.
```
// onMounted is Vue specific
// webClientId is the client ID you got in the web client creation step not the android client ID.
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
    }
  })
})
```
3. Panggil SocialLogin.login. Buat tombol dan jalankan code berikut saat diklik.
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))
```
  Jika Anda menginisialisasi Google dengan mode: 'offline', SocialLogin.login() mengembalikan serverAuthCode untuk flow exchange backend Anda. Jangan panggil SocialLogin.refresh({ provider: 'google' }) di dalam app pada mode tersebut. Lakukan exchange serverAuthCode di backend Anda, simpan Google refresh token di sana, dan lakukan refresh di backend.
Konfigurasi emulator untuk testing
1. Masuk ke Device manager dan klik tombol plus
2. Buat virtual device
3. Pilih perangkat apa saja dengan Play Store ikon
  
  Seperti yang Anda lihat, pixel 8 mendukung Play Store layanan
4. Klik next
5. Pastikan bahwa image OS bertipe Google Play. HARUS bertipe Google Play
6. Klik berikutnya
7. Konfirmasi perangkat Anda. Anda dapat memberi nama emulator sesuai keinginan
8. Masuk ke Device Manager dan jalankan simulator Anda
9. Setelah simulator menyala, buka pengaturan di dalamnya
10. Masuk ke Google Play
1. Klik Update dan tunggu sekitar 60 detik
Tes aplikasi Anda

Jika Anda melakukan semuanya dengan benar, alur login Google seharusnya berfungsi dengan baik:

Pemecahan Masalah

Jika ada masalah, bandingkan dulu konfigurasi aplikasi Anda dengan nilai di Google Cloud Console. Kegagalan Google Sign-In di Android biasanya disebabkan oleh ketidakcocokan package name, SHA-1, atau client ID.

Credential Manager, SHA-1, dan Firebase

Di Android, plugin ini menggunakan Google Credential Manager (androidx.credentials dan Sign in with Google), bukan yang legacy GoogleSignInClient API. Error Logcat seperti GetCredentialCustomException: [28444] Developer console is not set up correctly berasal dari stack tersebut.

Filter Logcat dengan GoogleProvider atau CapgoSocialLogin setelah login gagal. Plugin ini mencatat package name, signing SHA-1, dan yang di-mask webClientId agar Anda bisa membandingkannya dengan Google Cloud Console.

Konfigurasi Google Cloud yang diperlukan

Anda memerlukan dua jenis OAuth 2.0 client ID di proyek Google Cloud yang sama:

Tipe client	Digunakan untuk	Digunakan di
Aplikasi web	Server / audiens token ID	`webClientId` di `SocialLogin.initialize()`
Android, satu per signing key	Membuktikan APK Anda diizinkan memanggil Google	Hanya di Google Cloud Console. Jangan berikan ID ini ke `webClientId`

Kesalahan umum adalah menggunakan Android client ID sebagai webClientId. Credential Manager membutuhkan Web client ID di sana. Android client hanya butuh package name dan SHA-1 yang benar yang sudah terdaftar di console.

Buat satu Android OAuth client untuk setiap sertifikat yang menandatangani build yang Anda tes:

Debug: dari ./gradlew signingReport untuk varian debug.
Release: dari APK atau AAB yang benar-benar Anda instal.
Play App Signing: dari Play Console > App integrity > App signing key certificate. Ini wajib untuk build Play Store meskipun SHA-1 upload key Anda sudah terdaftar.

Panduan applicationId di android/app/build.gradle harus sama persis dengan package name Android OAuth client, termasuk .debug akhiran.

Jika OAuth consent screen dalam mode Testing, tambahkan setiap akun Google yang Anda gunakan untuk tes di Audience > Test users. Mempublikasikan aplikasi ke Production tidak diperlukan untuk email dan profile scopes. Digital Asset Links ("assetlinks.json) tidak diperlukan untuk Sign in with Google melalui Credential Manager.

Perubahan di Google Cloud mungkin butuh waktu beberapa jam untuk diterapkan.

Error 28444: Developer console belum dikonfigurasi dengan benar

Ini hampir selalu berarti Google menolak kombinasi sertifikat signing APK yang terinstal, package name, dan webClientId. Ikuti checklist berikut:

Konfirmasi webClientId adalah Web application client ID dan diakhiri dengan .apps.googleusercontent.com.
Jalankan aplikasi, ulangi error tersebut, dan cek Logcat untuk GoogleProvider, signingSha1=, dan package=.
Di Google Cloud Console > Kredensial, buka client OAuth Android Anda dan verifikasi package name serta SHA-1 yang tepat.
Jika menguji release build, daftarkan SHA-1 dari build tersebut, bukan hanya dari debug keystore.
Jika aplikasi didistribusikan melalui Play Store, daftarkan juga Play App Signing SHA-1.
Pastikan client Web dan Android berada dalam satu proyek Google Cloud yang sama.
Jika consent screen dalam status Testing, pastikan akun Google tersebut adalah test user.
Tunggu dan coba lagi setelah ada perubahan di console.

USER_CANCELLED setelah memilih akun pada debug build yang salah konfigurasi, masalahnya bisa tetap berupa mismatch SHA-1 atau client ID. Perbaiki dulu setup console di atas.

Ekstrak SHA-1 dari build yang diinstal

Debug atau build lokal:

cd android && ./gradlew signingReport

APK rilis yang ditandatangani:

keytool -printcert -jarfile android/app/release/app-release.apk

Tambahkan SHA-1 tersebut ke Android OAuth client dengan nama package yang sesuai, instal ulang signed APK yang sama, lalu uji kembali:

adb install android/app/release/app-release.apk

Tokens bersarang di bawah result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Untuk Firebase Auth, buat kredensial dengan itu idToken dan gunakan Web client ID sebagai webClientId di initialize.

Jika Anda tidak bisa mendapatkan sertifikat SHA-1 development, coba gunakan custom keystore. Komentar issue ini menjelaskan cara menambahkan keystore ke proyek Anda.

Jika Anda menggunakan Google Login di Android untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.