Login Google pada Android

Pengenalan

Dalam panduan ini, Anda akan belajar cara mengatur Login Google dengan Capgo Login Sosial untuk Android. Saya asumsikan Anda telah membaca panduan pengaturan umum sebelumnya. Panduan 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 siapa pun harus mengatur hal ini. Langkah-langkah berikutnya mengasumsikan skenario yang paling sederhana dari 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 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, perlu diingat bahwa jika Anda salah, kesalahan tidak akan jelas. Mungkin sangat sulit untuk memperbaiki kesalahan. Jika Anda kesulitan dengan pengaturan, silakan lihat masalah Github.

Selain itu, Anda dapat melihat bagian troubleshooting dari Pengaturan Login Google 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 tangkapan layar)

      

   3. Klik pada tombol create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih jenis Android tipe aplikasi

      

   6. Buka Android Studio

   7. Di bagian bawah navigator, cari bagian Gradle Scripts

      

   8. Temukan build.gradle untuk modul app

      

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

      

   10. Sekarang, buka terminal. 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. Sekarang, kembali ke Console 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 Create credentials halaman 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. Cari MainActivity.java dan klik pada folder tersebut

         

   3. Ubah MainActivity.java. Silakan 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 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 ke Device manager dan klik tombol plus

      

   2. Buat perangkat virtual

      

   3. Pilih perangkat apa pun dengan Play Store icon

      

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

   4. Klik next

      

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

      

   6. Klik next

      

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

      

   8. Masuk ke Device Manager dan booting 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 SEMPATUTNYA berhubungan dengan sertifikat SHA1.

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

Teruskan dari Google Login pada Android

Google Login pada Android untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login untuk kemampuan asli dalam Menggunakan @capgo/capacitor-social-login, Jika Anda menggunakan Google Login pada Android untuk merencanakan autentikasi dan alur akun, hubungkannya dengan @capgo/capacitor-social-login untuk kemampuan asli dalam @capgo/capacitor-social-login. @capgo/capacitor-login sosial 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.