Google Login pada Android

Salin prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

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

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

SHA1 sertifikat Android sangat menyakitkan dan saya tidak ingin orang lain harus menyiapkan ini. Langkah-langkah berikut mengasumsikan skenario yang paling sederhana dari aplikasi yang tidak dipublikasikan ke Google Play Store dan hanya digunakan oleh simulator lokal atau perangkat pengembangan.

Jika Anda telah mengembangkan aplikasi ke Google Play Store, Anda MUST 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.

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 Penggunaan Login Google untuk Android untuk informasi lebih lanjut.

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 Jenis aplikasi
6. Buka Android Studio
7. Pada bagian bawah navigator, cari Gradle Scripts
8. Cari build.gradle untuk modul app
9. Salin android.defaultConfig.applicationId Ini akan menjadi package name anda di konsol Google
10. Sekarang, buka terminal. Pastikan Anda berada di folder aplikasi Anda dan jalankan android Terminal menampilkan perintah gradlew signInReport ./gradlew signInReport
1. Output terminal menampilkan fingerprint sertifikat SHA1 SHA1.
1. sebagai applicationId dan SHA1 Anda di bidang sertifikat dan klik Package Name Bentuk klien Android dengan nama paket dan SHA1 diisi create
Pergi ke
1. Console Google Create credentials halaman di Google Console
2. Atur jenis aplikasi menjadi Web
3. Klik Create
4. Salin ID klien, Anda akan menggunakan ini sebagai webClientId di JS/TS code

Ubah MainActivity

Silakan buka aplikasi di Android Studio. Anda bisa menjalankan cap open android
Cari MainActivity.java
1. Buka app folder
2. Cari java
3. Cari folder Anda MainActivity.java dan klik pada folder tersebut

Ubah MainActivity.java. Tambahkan 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() {}
}

Simpan file

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 sebuah tombol dan jalankan code ketika diklik.
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))
```
  Jika Anda menginisialisasi Google dengan mode: 'offline', SocialLogin.login() mengembalikan serverAuthCode untuk aliran pertukaran backend Anda. Jangan panggil SocialLogin.refresh({ provider: 'google' }) di dalam aplikasi dalam mode tersebut. Tukar serverAuthCode simpan token refresh Google di backend Anda, dan refresh di backend.
Konfigurasi emulator untuk tes
1. Masuk ke Device manager dan klik tombol plus
2. Buat perangkat virtual
3. Pilih perangkat apa saja dengan Play Store ikon
  
  Seperti yang Anda lihat, pixel 8 mendukung layanan Play Store layanan
4. Klik next
5. Pastikan gambar OS berjenis Google Play. IT MUST berjenis Google Play
6. Klik next
7. Konfirmasi perangkat Anda. Anda dapat menamai emulator Anda sesuai keinginan Anda
8. Masuk ke Device Manager dan boot up simulator Anda
9. Setelah simulator boot up, masuk ke pengaturannya
10. Masuk ke Google Play
1. Klik Update dan tunggu sekitar 60 detik
Tes aplikasi Anda

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

Troubleshooting

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

Pengelola Kredensial, SHA-1, dan Firebase

Pada Android, plugin ini menggunakan Pengelola Kredensial Google (androidx.credentials dan Masuk dengan Google), bukan versi legacy GoogleSignInClient API. Error Logcat seperti GetCredentialCustomException: [28444] Developer console is not set up correctly bisa berasal dari stack tersebut.

Filter Logcat dengan GoogleProvider atau CapgoSocialLogin setelah gagal login. Plugin ini merekam nama paket Anda, tanda tangan SHA-1, dan tanda bintang webClientId sehingga Anda dapat membandingkannya dengan Google Cloud Console.

Pengaturan Cloud Google yang Diperlukan

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

Jenis klien	Digunakan untuk	Dimana itu pergi
Aplikasi web	Audien token ID / Server	`webClientId` di `SocialLogin.initialize()`
Pada Android, satu per tanda tangan signing	Menguji apakah APK Anda diperbolehkan untuk mengakses Google	Hanya Cloud Console Google. Jangan transfer ID ini ke `webClientId`

Biasanya, kesalahan yang sering dilakukan 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 klien OAuth Android untuk setiap sertifikat yang menandatangani build yang Anda uji:

Debug: dari ./gradlew signingReport untuk varian debug.
Release: dari APK atau AAB yang Anda instal secara nyata.
Play App Signing: dari Console Play > Keamanan Aplikasi > Sertifikat tanda tangan aplikasi. Ini diperlukan untuk build Play Store bahkan jika SHA-1 kunci unggah Anda sudah terdaftar.

Kunci applicationId dalam android/app/build.gradle harus tepat sesuai dengan nama paket klien OAuth Android, termasuk apapun .debug suffix.

Jika layar persetujuan OAuth berada dalam mode Pengujian, tambahkan setiap akun Google yang Anda uji di bawah Pengguna > Pengujian. email Penerbitan aplikasi ke Produksi tidak diperlukan untuk profile danassetlinks.jsonSkop.

Tautan Aset Digital (

) tidak diperlukan untuk Masuk dengan Google melalui Manajer Kredensial.

Error 28444: Konsol pengembang tidak diatur dengan benar webClientIdJudul bagian “Error 28444: Konsol pengembang tidak diatur dengan benar”

Ini biasanya berarti Google menolak kombinasi sertifikat penandatangan APK yang terinstal, nama paket, dan webClientId Kerja melalui daftar checklist ini: .apps.googleusercontent.com.
Jalankan aplikasi, reproduksi kegagalan, dan baca Logcat untuk GoogleProvider, signingSha1=, dan package=.
Dalam Google Cloud Console > Akun Kredensial, buka klien OAuth Android Anda dan verifikasi nama paket yang tepat dan SHA-1.
Jika Anda menguji rilis, daftarkan SHA-1 dari rilis tersebut, bukan hanya keystore debug.
Jika aplikasi Anda didistribusikan melalui Toko Play, daftarkan juga SHA-1 Signing Aplikasi Play.
Pastikan klien Web dan Android berada di proyek Google Cloud yang sama.
Jika layar persetujuan berada di Uji Coba, konfirmasi bahwa akun Google adalah pengguna uji coba.
Tunggu dan ulangi setelah perubahan di konsol.

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

Ekstrak SHA-1 dari rilis yang Anda instal

Debug atau build 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, reinstall APK yang sama yang ditandatangani, dan tes lagi:

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

Token-nya terletak di bawah result:

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

Untuk Firebase Auth, buat kunci dengan cara ini 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.

Jika Anda menggunakan Google Login di Android Untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login Untuk kemampuan asli 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, @capgo/capacitor-native-biometric Untuk detail implementasi di @capgo/capacitor-native-biometric, dan Dua faktor autentikasi Untuk detail implementasi di Dua faktor autentikasi.