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. Panduan Pengaturan Umum.

Menggunakan login Google pada Android

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

Peringatan

Sertifikat SHA1 Android sangat menyulitkan 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 mengirimkan aplikasi ke Google Play Store, Anda WAJIB 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 Test and release > Setup > App Signing.

Akhirnya, penting untuk disebutkan bahwa jika Anda salah, kesalahan tidak akan jelas. Mungkin sangat sulit untuk memperbaiki kesalahan. Jika Anda kesulitan dengan pengaturan, silakan lihat Github masalah.

Selain itu, Anda juga dapat melihat bagian pemecahan masalah dari pengaturan login Google untuk Android untuk informasi lebih lanjut. Pengaturan Login Google untuk Android

Catatan

Anda dapat membuat beberapa ID klien Android. Ini diperlukan jika Anda memiliki beberapa sertifikat SHA1.

1. Buat ID klien Android.

   1. Klik di bar 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 jenis Android aplikasi

      

   6. Buka Android Studio

   7. Di bagian bawah navigator, cari bagian Gradle Scripts

      

   8. Cari build.gradle untuk file app

      

   9. Salin android.defaultConfig.applicationId. Ini akan menjadi milikmu 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. Salin SHA1.
   
   12. Sekarang, kembali ke Konsol Google. Masukkan applicationId sebagai Package Name dan SHA1 Anda di bidang sertifikat dan klik create
   

2. Buat klien web (ini diperlukan untuk Android)

   1. Pergi ke halaman Create credentials dalam Google Console

   2. Atur jenis aplikasi ke Web

      

   3. Klik Create

      

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

      

3. Modifikasi MainActivity

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

   2. Temukan MainActivity.java

      1. Buka folder app folder

         

      2. Temukan java

         

      3. Temukan folder Anda dan klik pada itu MainActivity.java MainActivity.java file di struktur paket

         

   3. . Tambahkan __CAPGO_KEEP_0__ MainActivity.java. Please add the following 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 ini

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. Panggil SocialLogin.login. Buatlah tombol dan jalankan kode berikut code ketika diklik.

      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 pertukaran backend Anda. Jangan panggil SocialLogin.refresh({ provider: 'google' }) di aplikasi dalam mode tersebut. Pertukaran serverAuthCode pada backend Anda, simpan token refresh Google di sana, dan refresh di backend.

5. Konfigurasi emulator untuk tes

   1. Masuk Device manager dan klik tombol plus

      

   2. Buat perangkat virtual

      

   3. Pilih perangkat apa pun dengan Play Store ikon

      

      Seperti yang Anda lihat, pixel 8 mendukung layanan Play Store Pilih

   4. Klik next

      

   5. Pastikan bahwa gambar OS berjenis Google Play. IT MUST berjenis Google Play

      

   6. Klik next

      

   7. Konfirmasikan perangkat Anda. Anda dapat memberi nama emulator Anda sesuai keinginan Anda

      

   8. Masuk ke Device Manager dan booting simulator Anda

      

   9. Setelah simulator booting, masuk ke pengaturan simulatornya

      

   10. Masuk ke Google Play

   
   11. Klik Update dan tunggu sekitar 60 detik
   

6. [Test aplikasi Anda]

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

   

Pengaturan

Jika Anda mengalami masalah, silakan lihat Github masalah.

Masalah dengan login Google adalah SELALU terkait dengan sertifikat SHA1.

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

Teruskan dari Google Login pada Android

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