Google Login di Android

Pengantar

Dalam panduan ini, Anda akan mempelajari cara mengatur Google Login dengan Capgo Social Login untuk Android. Saya berasumsi bahwa Anda telah membaca panduan pengaturan umum.

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

Sertifikat SHA1 Android sangat menyakitkan dan saya tidak akan menginginkan siapa pun harus mengaturnya. Langkah-langkah berikut mengasumsikan skenario paling sederhana dari aplikasi yang tidak dipublikasikan ke Google Play Store dan hanya digunakan oleh simulator lokal, atau perangkat keras pengembangan.

Jika Anda telah men-deploy aplikasi Anda ke Google Play Store, Anda HARUS menambahkan Android client ID tambahan yang berisi SHA1 dari Google Play console untuk rilis production. Anda dapat menemukan SHA1 hash yang digunakan Google Play untuk menandatangani bundle rilis Anda di bawah Test and release > Setup > App Signing.

Terakhir, penting untuk disebutkan bahwa jika Anda salah, kesalahan TIDAK akan jelas. Mungkin sangat sulit untuk di-debug. Jika Anda kesulitan dengan pengaturan, silakan lihat Github issues.

Selain itu, Anda dapat melihat bagian troubleshooting dari pengaturan Google Login untuk Android untuk informasi lebih lanjut.

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

Modifikasi MainActivity Anda

Silakan buka aplikasi Anda di Android Studio. Anda dapat menjalankan cap open android
Temukan MainActivity.java
1. Buka folder app
2. Temukan java
3. Temukan MainActivity.java Anda dan klik di atasnya

Modifikasi MainActivity.java. Silakan tambahkan kode 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

Pertama, import SocialLogin

import { SocialLogin } from '@capgo/capacitor-social-login';

Panggil initialize. Ini harus dipanggil hanya 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',
    }
  })
})

Panggil SocialLogin.login. Buat tombol dan jalankan kode berikut saat diklik.

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))

Konfigurasikan emulator untuk pengujian
1. Masuk ke Device manager dan klik tombol plus
2. Buat virtual device
3. Pilih perangkat apa pun dengan ikon Play Store
  
  Seperti yang Anda lihat, pixel 8 mendukung layanan Play Store
4. Klik next
5. Pastikan bahwa OS image bertipe Google Play. HARUS bertipe Google Play
6. Klik next
7. Konfirmasi perangkat Anda. Anda dapat memberi nama emulator sesuai keinginan Anda
8. Masuk ke Device Manager dan boot up simulator Anda
9. Setelah simulator boot up, masuk ke pengaturannya
10. Masuk ke Google Play
1. Klik Update dan tunggu sekitar 60 detik
Uji aplikasi Anda

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

Pemecahan Masalah

Jika Anda mengalami masalah, silakan lihat Github issues.

Masalah dengan login Google SELALU terkait dengan sertifikat SHA1.

Jika Anda tidak dapat mendapatkan sertifikat SHA1 pengembangan, coba gunakan keystore kustom. Di sini adalah komentar yang menjelaskan cara menambahkan keystore ke proyek Anda.

Google Login di Android

Pengantar

Menggunakan login Google di Android

Pemecahan Masalah