Login Google di Android

Pendahuluan

Dalam panduan ini, Anda akan belajar cara mengatur Login Google dengan Capgo Login Sosial untuk Android. Saya asumsikan bahwa Anda telah membaca panduan pengaturan umum. Pengaturan Umum.

Menggunakan login Google pada Android

Dalam bagian ini, Anda akan belajar cara mengatur login Google pada Android.

Peringatan

Sertifikat SHA1 Android sangat menyakitkan dan saya tidak ingin orang lain mengalami hal ini. Langkah-langkah berikutnya mengasumsikan skenario yang paling sederhana, yaitu aplikasi yang belum dipublikasikan ke Google Play Store dan hanya digunakan oleh simulator lokal atau perangkat pengembangan.

Jika Anda telah mengembangkan aplikasi ke Google Play Store, MUST menambahkan ID klien Android tambahan yang berisi SHA1 dari Google Play console untuk rilis produksi. Anda dapat menemukan hash SHA1 yang digunakan oleh Google Play untuk menandatangani bundle rilis Anda di bawah Akhirnya, perlu diingat bahwa jika Anda melakukan kesalahan, kesalahan itu TIDAK akan jelas. Mungkin sangat sulit untuk memperbaiki kesalahan. Jika Anda kesulitan dengan pengaturan, silakan lihat Test and release > Setup > App Signing.

__CAPGO_KEEP_0__ masalah Github issues.

Pengaturan Login Google untuk Android untuk informasi lebih lanjut. Catatan

Anda dapat membuat ID klien Android yang lebih dari satu. Ini diperlukan jika Anda memiliki sertifikat SHA1 yang lebih dari satu.

Buat ID klien Android.

1. Klik di atas bar pencarian

   1. MUST

      

   2. Cari dan klik pada credentials satu (nomor 2 pada tangkapan layar) APIs and Services Hasil pencarian menampilkan opsi kredential dengan API dan Services yang ditebalkan

      

   3. Create credentials di Google Console create credentials

      

   4. Opsi OAuth client ID di menu pembuatan kredential OAuth client ID

      

   5. tipe aplikasi Android Pilihan tipe aplikasi dengan opsi Android yang ditebalkan

      

   6. Buka Android Studio

   7. Di bagian bawah navigator, cari Gradle Scripts

      

   8. Cari build.gradle untuk modul app

      

   9. Salin android.defaultConfig.applicationIdIni akan menjadi package name di konsol Google

      

   10. Sekarang, buka terminal. Pastikan Anda berada di android folder aplikasi Anda dan jalankan ./gradlew signInReport

   
   11. Geser ke atas perintah ini. Anda harus melihat hal berikut. Salinlah SHA1.
   
   12. Sekarang, kembali ke Console Google. Masukkan applicationId sebagai Package Name dan SHA1 Anda di bidang sertifikat dan klik create
   

2. Buatlah klien web (ini diperlukan untuk Android)

   1. Lihat halaman Create credentials di Console Google

   2. Atur jenis aplikasi menjadi Web

      

   3. Klik Create

      

   4. Salin ID klien, Anda akan menggunakan ini sebagai webClientId dalam JS/TS code

      

3. Ubah MainActivity

   1. Silakan buka aplikasi Anda di Android Studio. Anda dapat menjalankan cap open android

   2. Cari MainActivity.java

      1. Buka app folder

         

      2. Cari java

         

      3. Temukan MainActivity.java dan klik pada itu

         

   3. Ubah MainActivity.javaSilakan tambahkan code

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

   4. Simpan file

4. Gunakan Login Google di aplikasi Anda

   1. Pertama, import SocialLogin

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

   2. 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',
          }
        })
      })

   3. Telp SocialLogin.login. Buatlah tombol dan jalankan code ketika di klik.

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

      Peringatan

      Jika Anda menginisialisasi Google dengan mode: 'offline', SocialLogin.login() mengembalikan serverAuthCode untuk aliran tukar backend Anda. Jangan panggil SocialLogin.refresh({ provider: 'google' }) di aplikasi dalam mode tersebut. Tukar serverAuthCode di backend Anda, simpan token refresh Google di sana, dan tukar di backend.

5. Konfigurasi emulator untuk tes

   1. Masuk dan klik tombol plus Device manager dan klik tombol plus

      

   2. Buat perangkat virtual

      

   3. Pilih perangkat apa pun dengan Play Store ikon

      

      Seperti yang Anda lihat, perangkat ini pixel 8 mendukung Play Store layanan

   4. Klik next

      

   5. Pastikan gambar OS berjenis __CAPGO_KEEP_0__ Google Play. IT MUST harus berjenis Google Play

      

   6. Klik Berikut

      

   7. Konfirmasi perangkat Anda. Anda dapat menamai emulator Anda sesuai keinginan

      

   8. Masuk dan boot simulator Anda Device Manager Manajer Perangkat dengan perangkat virtual terdaftar dan tombol Main

      

   9. Setelah simulator diaktifkan, masuklah ke pengaturannya

      

   10. Masuklah ke Google Play

   
   11. Klik Update dan tunggu sekitar 60 detik
   

6. Tes aplikasi Anda

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

   

Pengaturan

Jika Anda memiliki masalah, silakan lihat Github masalah.

Masalah dengan login Google adalah SEMPATNYA terkait dengan sertifikat SHA1.

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