Lebih cepat ke konten

Google Login pada Android

GitHub

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

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

  1. Buat ID klien Android.

    1. Klik di bar pencarian

      Bar pencarian Google Console
    2. Cari credentials dan klik pada APIs and Services salah satu (nomor 2 pada tangkapan layar)

      Hasil pencarian menampilkan opsi kredential dengan APIs dan Services yang dihimbau
    3. Klik pada create credentials

       Tombol buat kredential di Google Console
    4. Pilih OAuth client ID

      Pilih ID klien OAuth di menu pembuatan kunci
    5. Pilih jenis Android Pilih jenis aplikasi

      Pilih jenis aplikasi dengan opsi Android yang ditonjolkan
    6. Buka Android Studio

    7. Di bagian bawah navigator, cari bagian Skrip Gradle Gradle Scripts

      Cari
    8. untuk file build.gradle (Modul: aplikasi) di bagian Skrip Gradle build.gradle Salin app

      Copy
    9. Salin android.defaultConfig.applicationId. Ini akan menjadi package name di konsol Google

      File Build.gradle yang menampilkan konfigurasi applicationId
    10. Sekarang, buka terminal. Pastikan Anda berada di folder aplikasi Anda dan jalankan android Terminal menampilkan perintah gradlew signInReport ./gradlew signInReport

    Geser ke atas perintah ini. Anda harus melihat hal berikut. Salin
    1. Output terminal menampilkan fingerprint sertifikat SHA1 SHA1.
    Sekarang, kembali ke Konsol Google. Masukkan
    1. sebagai applicationId dan SHA1 Anda di bidang sertifikat dan klik Package Name Formasi klien Android dengan nama paket dan bidang SHA1 diisi create
    __CAPGO_KEEP_0__
  2. Membuat klien web (ini diperlukan untuk Android)

    1. Pergi ke halaman Create credentials di Google Console

    2. Setel jenis aplikasi ke Web

      Pilihan jenis aplikasi dengan opsi Web yang ditonjolkan
    3. Klik Create

      Bentuk klien web dengan tombol Buat di bagian bawah
    4. Salin ID klien, Anda akan menggunakan ini sebagai webClientId di kode JS/TS code

      Detail ID klien menampilkan ID klien Web untuk disalin
  3. Mengubah kode MainActivity

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

    2. Cari MainActivity.java

      1. Buka folder app folder

        Buka folder Aplikasi di navigator Android Studio
      2. Cari java

        Buka folder Java di struktur Android Studio
      3. Cari file MainActivity.java Anda dan klik pada itu MainActivity.java Ubah

        . Silakan tambahkan kode berikut __CAPGO_KEEP_0__
    3. Salin ke clipboard 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

  4. Pakai Login Google di aplikasi Anda

    1. Pertama, import SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Panggil inisialisasi. 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))
  5. Konfigurasi emulator untuk tes

    1. Masuk ke Device manager dan klik tombol plus

      Pengelola Perangkat di Android Studio dengan tombol plus dihiglightkan
    2. Buat perangkat virtual

      Tombol Buat Perangkat Virtual di Konfigurasi Perangkat Virtual
    3. Pilih perangkat apa pun dengan Play Store ikon

      Pemilihan perangkat menampilkan perangkat dengan dukungan Toko Play

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

    4. Tombol Next di wizard pembuatan perangkat next

      Pastikan bahwa gambar OS berjenis
    5. HARUS Google Play. berjenis Pemilihan gambar sistem menampilkan gambar jenis Google Play Google Play

      Klik next
    6. Tombol Next di layar pemilihan gambar sistem

      Tombol Next di layar pemilihan gambar sistem
    7. Konfirmasi perangkat Anda. Anda dapat menamai emulator Anda sesuai keinginan Anda

      Jendela konfirmasi pengaturan perangkat dengan tombol Finish
    8. Masuk ke Device Manager dan boot simulator Anda

      Pengelola Perangkat dengan perangkat virtual terdaftar dan tombol main
    9. Setelah simulator boot, masuk ke pengaturan perangkatnya

      Emulator Android menampilkan aplikasi pengaturan
    10. Masuk ke Google Play

    Pengaturan layar dengan opsi Google Play
    1. Klik Update dan tunggu sekitar 60 detik
    Pengaturan Google Play dengan tombol Update
  6. Tes aplikasi Anda

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

    Demo alur login Google pada Android menampilkan proses masuk dan autentikasi sukses

Bagian berjudul “Pengaturan”

Jika Anda mengalami masalah, pertama-tama bandingkan konfigurasi aplikasi Anda dengan nilai Google Cloud Console. Gagal login Google pada Android biasanya disebabkan oleh nama paket, SHA-1, atau ID klien yang tidak sesuai.

Pengelola Kredensial, SHA-1, dan Firebase

Bagian berjudul “Pengelola Kredensial, SHA-1, dan Firebase”androidx.credentials Pada Android, plugin ini menggunakan Pengelola Kredensial Google ( GoogleSignInClient API. Logcat errors such as GetCredentialCustomException: [28444] Developer console is not set up correctly __CAPGO_KEEP_0__

Filter Logcat dengan GoogleProvider atau CapgoSocialLogin atau untuk membandingkannya dengan Google Cloud Console. webClientId Pengaturan Cloud Google yang Diperlukan

Judul bagian yang berjudul “Pengaturan Cloud Google yang Diperlukan”

Anda memerlukan dua jenis ID klien OAuth 2.0 yang sama di proyek Google Cloud:

Jenis klien

Digunakan untukDimana itu pergiAplikasi web
Audien token ID / ServeratauwebClientId di SocialLogin.initialize()
Android, satu per kunci tanda tanganMengakui bahwa APK Anda diperbolehkan untuk mengakses GoogleHanya dapat diakses melalui 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. 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.
  • Dari APK atau AAB yang Anda instal secara nyata.
  • Dari Play App Signing: dari Play Console > Keamanan Aplikasi > Sertifikat kunci tanda tangan aplikasi. Ini diperlukan untuk build Play Store bahkan jika SHA-1 kunci unggah Anda sudah terdaftar.

The applicationId di android/app/build.gradle harus tepat sama dengan nama paket Android OAuth client, termasuk apapun .debug sufiks.

Jika layar persetujuan OAuth dalam mode Testing, tambahkan setiap akun Google yang Anda uji di bawah Pengguna > Pengguna Uji. Pengumuman aplikasi ke Produksi tidak diperlukan untuk email dan profile skop. Aset Digital (assetlinks.json) tidak diperlukan untuk Masuk dengan Google melalui Pengelola Kredensial.

Pengubahan Cloud Google dapat memakan waktu beberapa jam untuk menyebar.

Error 28444: Pengaturan konsol pengembang tidak benar

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

Ini hampir selalu berarti Google menolak kombinasi sertifikat penandatanganan APK yang terpasang, nama paket, dan webClientId. Jalani daftar checklist 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 > Kredensial, buka klien OAuth Android Anda dan verifikasi nama paket yang tepat dan SHA-1.
  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 tanda tangan aplikasi Play.
  6. Pastikan klien Web dan Android berada di proyek Google Cloud yang sama.
  7. Jika layar persetujuan berada di mode Pengujian, konfirmasi bahwa akun Google adalah pengguna uji.
  8. Tunggu dan ulangi setelah perubahan di console.

USER_CANCELLED Setelah memilih akun pada build debug yang tidak terkonfigurasi, masih bisa terjadi kesalahan SHA-1 atau ID klien. Perbaiki terlebih dahulu pengaturan konsol di atas.

Ekstrak SHA-1 dari build yang Anda instal.

Bagian: Ekstrak SHA-1 dari build yang Anda instal.

Build debug atau lokal:

Jendela terminal
cd android && ./gradlew signingReport

APK rilis yang ditandatangani:

Jendela terminal
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 tes lagi:

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

Token terletak di bawah result:

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

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

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

Teruskan dari Google Login pada Android

Bab berjudul “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-sosial untuk kemampuan native di Menggunakan @capgo/capacitor-login-sosial @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.