Google Login pada Android

Pendahuluan

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

Menggunakan login Google di Android

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

Peringatan

SHA1 Android sangat menyakitkan dan saya tidak ingin orang lain mengalami hal ini. Langkah-langkah berikutnya mengasumsikan skenario 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 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 Login Google untuk Android untuk informasi lebih lanjut.

Perhatian

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 salah satu (nomor 2 pada screenshot)

      

   3. Klik pada create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih jenis Android Jenis aplikasi

      

   6. Buka Android Studio

   7. Di bagian bawah navigator, cari bagian Gradle Scripts

      

   8. Cari build.gradle untuk file app

      

   9. Salinlah android.defaultConfig.applicationId. Ini 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 konsol Google. Masukkan applicationId sebagai Package Name dan SHA1 Anda di bidang sertifikat dan klik create
   

2. Buatlah klien web (ini diperlukan untuk Android)

   1. Pergi ke halaman Create credentials di Google Console

   2. Setel jenis aplikasi menjadi Web

      

   3. Klik Create

      

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

      

3. Pengaturan MainActivity

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

   2. Cari MainActivity.java

      1. Buka app Folder

         

      2. Cari java

         

      3. Cari aplikasi Anda dan klik pada itu MainActivity.java File MainActivity.java di struktur paket

         

   3. . Silakan tambahkan kode berikut __CAPGO_KEEP_0__ MainActivity.javacode

      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. Create a button and run the following code on click.

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

      Peringatan khusus (1/2) dan (2/2)

      Jika Anda menginisialisasi Google dengan mode: 'offline', SocialLogin.login() mengembalikan serverAuthCode untuk aliran tukar di backend Anda. Jangan panggil SocialLogin.refresh({ provider: 'google' }) dalam aplikasi dalam mode tersebut. Tukar serverAuthCode di backend Anda, simpan token tukar 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

      

      As kamu bisa melihat, pixel 8 mendukung Play Store layanan

   4. Klik next

      

   5. context: Halaman/area: Pembuat Capgo / produk halaman native cloud build. Peran: Label UI singkat atau item navigasi. Kunci pesan `native_build_builder_credit_next` (Kredit Pembuat Bangun Native). Google Play. Pastikan bahwa gambar OS berjenis IT HARUS Google Play

      

   6. Pemilihan gambar sistem menampilkan gambar jenis Google Play

      

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

      

   8. Masuk ke Device Manager dan boot simulator Anda

      

   9. Setelah simulator boot, masuk ke pengaturannya

      

   10. Masuk ke Google Play

   
   11. Klik Update dan tunggu sekitar 60 detik
   

6. Tes aplikasi Anda

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

   

Pengaturan

Pengelola Kredensial, SHA-1, dan Firebase

Pengaturan

dan Masuk dengan Google), bukan versi legacyandroidx.credentials __CAPGO_KEEP_0__. Error Logcat seperti GoogleSignInClient API. Logcat errors such as GetCredentialCustomException: [28444] Developer console is not set up correctly datang dari stack itu.

Filter Logcat dengan GoogleProvider atau CapgoSocialLogin Bagaimana cara membandingkan mereka dengan Cloud Console Google? webClientId Bagaimana cara membandingkan mereka dengan Cloud Console Google?

Persyaratan Pengaturan Cloud Google

Kamu membutuhkan dua jenis ID klien OAuth 2.0 di proyek Cloud Google yang sama:

Jenis klien	Digunakan untuk	Dimana itu pergi
Aplikasi web	Server / ID token audiens	webClientId in SocialLogin.initialize()
Android, satu per kunci tanda tangan	Mengakui bahwa APK Anda diperbolehkan untuk mengakses Google	Hanya tersedia di Google Cloud Console. Jangan melewatkan ID ini ke webClientId

Salah satu kesalahan umum adalah menggunakan ID klien Android sebagai webClientId. Pengelola Kredensial memerlukan ID klien Web di sana. ID klien Android hanya memerlukan nama paket yang benar dan SHA-1 yang terdaftar di console.

Buatlah satu klien OAuth Android untuk setiap sertifikat yang menandatangani build yang Anda uji:

• Dari ./gradlew signingReport untuk varian debug.
• Untuk varian rilis.
• Dari APK atau AAB yang Anda instal secara nyata.

Google Android OAuth harus sesuai dengan nama paket aplikasi Android OAuth, termasuk apapun suffixnya. applicationId Jika layar persetujuan OAuth dalam mode Testing, tambahkan setiap akun Google yang Anda gunakan untuk tes di bawah Pengguna > Pengguna Uji. android/app/build.gradle Penerbitan aplikasi ke Produksi tidak diperlukan untuk .debug dan

Otorisasi Digital Asset Link ( email ) tidak diperlukan untuk Sign in dengan Google melalui Pengelola Kredensial. profile Pengubahan Cloud Google dapat memakan waktu beberapa jam untuk menyebar.assetlinks.jsonError 28444: Pengaturan konsol pengembang tidak benar

Bagian berjudul “Error 28444: Pengaturan konsol pengembang tidak benar”

Masalah ini biasanya berarti Google menolak kombinasi sertifikat penandatanganan APK, nama paket, dan

in webClientIdPeriksa daftar ini:

1. Konfirmasi webClientId adalah ID klien aplikasi Web dan diakhiri dengan .apps.googleusercontent.com.
2. Jalankan aplikasi, reproduksi kegagalan, dan baca Logcat untuk GoogleProvider, signingSha1=, dan package=.
3. Dalam Google Cloud Console > Credentials, buka klien OAuth Android Anda dan verifikasi nama paket dan SHA-1 yang tepat.
4. Jika Anda menguji versi rilis, daftarkan SHA-1 dari versi tersebut, bukan hanya keystore debug.
5. Jika aplikasi Anda didistribusikan melalui Play Store, daftarkan juga SHA-1 Play App Signing.
6. Pastikan klien Web dan Android berada di proyek Google Cloud yang sama.
7. Jika layar persetujuan berada di mode Testing, konfirmasi bahwa akun Google adalah pengguna uji.
8. Tunggu dan ulangi setelah perubahan konsol.

USER_CANCELLED Tunggu dan ulangi setelah memilih akun pada build debug yang tidak terkonfigurasi dengan benar. Masalahnya mungkin karena kesalahan SHA-1 atau ID klien. Perbaiki terlebih dahulu pengaturan konsol di atas.

Ekstrak SHA-1 dari build yang Anda instal.

Build debug atau lokal:

cd android && ./gradlew signingReport

APK rilis yang ditandatangani:

keytool -printcert -jarfile android/app/release/app-release.apk

Tambahkan SHA-1 tersebut ke klien OAuth Android dengan nama paket yang sesuai, instal kembali APK yang sama yang ditandatangani, dan lakukan tes lagi:

adb install android/app/release/app-release.apk

Membaca hasil login

Token terletak di bawah result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Untuk Firebase Auth, buat kredensial dengan itu idToken dan gunakan ID klien Web sebagai webClientId di initialize.

Jika Anda tidak bisa mendapatkan sertifikat SHA-1 pengembang, coba keystore kustom. Komentar masalah ini menggambarkan cara menambahkan keystore ke proyek Anda.

Lanjutkan dari Google Login di Android

Jika Anda menggunakan Google Login pada Android untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, dan @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric Autorisasi Dua Faktor untuk detail implementasi di Autorisasi Dua Faktor.