Login Google pada Android

Bagian berjudul “Pendahuluan”

In this guide, you will learn how to setup Google Login with Capgo Social Login for Android. I assume that you have already read the Petunjuk Konfigurasi Umum.

Menggunakan Login Google di Android

Pada 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 mengembangkan aplikasi ke Google Play Store, Anda WAJIB menambahkan ID klien Android tambahan yang mengandung 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.

Terakhir, perlu diingat 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 dapat melihat bagian troubleshooting dari pengaturan Google Login untuk Android pengaturan Google Login untuk Android untuk informasi lebih lanjut.

Peringatan

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

1. Buat ID klien Android.

   1. Klik pada bar pencarian

      

   2. Cari credentials dan klik pada APIs and Services satu (nomor 2 pada screenshot)

      

   3. Klik pada tombol create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih jenis Android Tipe aplikasi dengan opsi Android dihightlight

      

   6. Pada bagian bawah navigator, cari bagian

   7. Skrip Gradle di proyek navigator Android Studio Gradle Scripts

      

   8. di build.gradle untuk modul app

      

   9. Salinlah android.defaultConfig.applicationIdIni akan menjadi ID aplikasi Anda package name di konsol Google

      

   10. Buka terminal sekarang. Pastikan Anda berada di folder aplikasi Anda dan jalankan android Terminal menampilkan perintah gradlew signInReport ./gradlew signInReport

   
   11. Output terminal menampilkan fingerprint sertifikat SHA1 SHA1.
   
   12. ID aplikasi Anda applicationId Asiakan Package Name dan SHA1 Anda di bidang sertifikat dan klik create
   

2. Buat klien web (ini diperlukan untuk Android)

   1. Pergi ke Create credentials halaman di Google Console

   2. Tetapkan jenis aplikasi ke 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. Cari MainActivity.java dan klik pada itu

         

   3. Ubah MainActivity.java. Tolong tambahkan berikut 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. Panggil SocialLogin.login. Buatlah tombol dan jalankan 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 tukar backend Anda. Jangan memanggil SocialLogin.refresh({ provider: 'google' }) di aplikasi dalam mode tersebut. Tukar serverAuthCode pada backend Anda, simpan token refresh Google di sana, dan tukar di backend.

5. Konfigurasi emulator untuk tes

   1. Masuk ke 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 bahwa gambar OS adalah jenis Google Play. IT WAJIB untuk jenis Google Play

      

   6. Klik next

      

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

      

   8. Masuk ke Device Manager dan boot simulator Anda

      

   9. Setelah simulator booting, masuk ke pengaturannya

      

   10. Masuk ke Google Play

   
   11. Klik Update dan tunggu sekitar 60 detik
   

6. Uji coba aplikasi Anda

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

   

Pengaturan

Jika Anda mengalami masalah, silakan lihat Github masalah.

Masalah dengan login Google adalah SELALU berhubungan dengan sertifikat SHA1.

Jika Anda tidak dapat mendapatkan sertifikat pengembangan SHA1, coba gunakan keystore kustom. Di sini adalah komentar yang 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-social-login untuk kemampuan asli dalam Menggunakan @capgo/capacitor-social-login, Menggunakan @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-login-sosial, @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.