Google Login di iOS

Pendahuluan

Dalam panduan ini, Anda akan mempelajari cara mengatur Google Login dengan Capgo Social Login untuk iOS. Saya menganggap bahwa Anda telah membaca panduan pengaturan umum.

Dalam bagian ini, Anda akan mempelajari cara mengatur Google login di iOS.

Buat client ID iOS di konsol Google
1. Klik pada bilah pencarian
2. Cari credentials dan klik pada yang APIs and Services (nomor 2 pada tangkapan layar)
3. Klik pada create credentials
4. Pilih OAuth client ID
5. Pilih Application type menjadi iOS
6. Temukan bundle ID
  1. Buka Xcode
  2. Klik dua kali pada App
  3. Pastikan bahwa Anda berada di Targets -> App
  4. Temukan Bundle Identifier Anda
  5. Kembali ke Google Console dan tempelkan Bundle Identifier Anda ke Bundle ID
7. Secara opsional, tambahkan App Store ID atau Team ID Anda ke client ID jika Anda telah mempublikasikan aplikasi Anda ke App Store
8. Setelah mengisi semua detail, klik create
9. Klik OK
10. Buka client iOS yang baru dibuat
11. Salin data berikut
  
  nr. 1 dalam gambar ini nantinya akan menjadi iOSClientId dalam panggilan initialize.
  nr. 2 dalam gambar ini nantinya akan menjadi YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifikasi Info.plist aplikasi Anda
1. Buka Xcode dan temukan file Info.plist
2. Klik kanan file ini dan buka sebagai kode sumber
3. Di bagian bawah file Plist Anda, Anda akan melihat tag </dict>
4. Masukkan fragmen berikut tepat sebelum tag </dict> penutup
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Ubah YOUR_DOT_REVERSED_IOS_CLIENT_ID ke nilai yang disalin pada langkah sebelumnya
  
  Pastikan bahwa nilai ini DIMULAI dengan com.googleusercontent.apps
6. Simpan file dengan Command + S

Modifikasi AppDelegate.swift

Buka AppDelegate
Masukkan import GoogleSignIn di bagian atas file
Temukan fungsi func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:])

Modifikasi fungsi agar terlihat seperti ini

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    // Called when the app was launched with a url. Feel free to add additional processing here,
    // but if you want the App API to support tracking app url opens, make sure to keep this call

    var handled: Bool

    handled = GIDSignIn.sharedInstance.handle(url)
    if handled {
      return true
    }

    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

Modified application openURL function with GoogleSignIn handling

Simpan file dengan Command + S

Atur Google login di kode JavaScript/TypeScript Anda

Impor SocialLogin dan Capacitor

import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';

Panggil metode initialize (ini harus dipanggil hanya sekali)

Pengaturan dasar (mode online - direkomendasikan untuk sebagian besar aplikasi):
```
// onMounted adalah spesifik Vue
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Mode default
    }
  })
})
```
Pengaturan lanjutan dengan client ID tambahan:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Opsional: untuk dukungan platform web
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Wajib: dari langkah 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Opsional: sama dengan webClientId, diperlukan untuk beberapa fitur lanjutan
      mode: 'online'                               // 'online' atau 'offline'
    }
  })
})
```
Note
Persyaratan Client ID:
- iOSClientId: Wajib - Harus diakhiri dengan googleusercontent.com (dari langkah 1 di atas)
- webClientId: Opsional - Hanya diperlukan jika Anda juga mendukung platform web atau memerlukan fitur lanjutan
- iOSServerClientId: Opsional - Harus sama dengan nilai webClientId ketika disediakan
Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientId, lihat panduan pengaturan web untuk membuat kredensial ini.
Tentang mode offline: Saat menggunakan mode: 'offline', respons login tidak akan berisi data pengguna secara langsung. Sebagai gantinya, Anda akan menerima kode autentikasi server yang harus ditukar dengan informasi pengguna melalui server backend Anda. Lihat panduan pengaturan umum untuk detail implementasi.

Implementasikan fungsi login. Buat tombol dan jalankan kode berikut saat diklik

Untuk mode online:

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// menangani respons - berisi data pengguna
console.log(JSON.stringify(res))

Untuk mode offline:

const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Direkomendasikan untuk mode offline
  }
})
// res berisi serverAuthCode, bukan data pengguna
// Kirim serverAuthCode ke backend Anda untuk mendapatkan informasi pengguna
console.log('Server auth code:', res.result.serverAuthCode)

Uji aplikasi Anda
1. Build aplikasi Anda dan jalankan cap sync
2. Jika Anda telah melakukan semuanya dengan benar, Anda harus melihat alur Google login berfungsi dengan baik

Masalah yang Diketahui

Inkompatibilitas Plugin Privacy Screen

Plugin Google Login tidak kompatibel dengan @capacitor/privacy-screen. Ketika menggunakan kedua plugin bersama-sama, webview Google login akan terganggu oleh layar privasi.

Solusi: Panggil await PrivacyScreen.disable(); sebelum memanggil fungsi login:

import { PrivacyScreen } from '@capacitor/privacy-screen';
import { SocialLogin } from '@capgo/capacitor-social-login';

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});