Google Login di iOS

Salin prompt setup yang berisi langkah install dan panduan markdown lengkap untuk plugin ini.

Pendahuluan

Dalam panduan ini, Anda akan belajar cara setup Google Login dengan Capgo Social Login untuk iOS. Saya asumsikan Anda sudah membaca panduan setup umum.

Di bagian ini, Anda akan belajar cara setup Google login di iOS.

Buat iOS client ID di Google console
1. Klik kolom pencarian
2. Cari credentials dan klik pada APIs and Services satu (nomor 2 pada screenshot)
3. Klik pada create credentials
4. Pilih OAuth client ID
5. Pilih Application type ke iOS
6. Cari bundle ID
  1. Buka Xcode
  2. Klik dua kali pada App
  3. Pastikan Anda berada di Targets -> App
  4. Cari Bundle Identifier
  5. Kembali ke Google Console dan tempelkan Bundle Identifier ke Bundle ID
7. Opsional, tambahkan App Store ID atau Team ID ke client ID jika Anda sudah merilis aplikasi ke App Store
8. Setelah mengisi semua detail, klik create
9. Klik OK
10. Buka iOS client yang baru dibuat
11. Salin data berikut
  
  Panduan nr. 1 di gambar ini nantinya akan menjadi iOSClientId di dalam initialize call.
  Panduan nr. 2 di gambar ini nantinya akan menjadi YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ubah Info.plist aplikasi Anda
1. Buka Xcode dan cari Info.plist file
2. Klik kanan file ini dan buka sebagai source code
3. Di bagian bawah Plist file, Anda akan melihat </dict> tag
4. Masukkan fragmen berikut tepat sebelum tag penutup </dict> tag
```
<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 nilai ini DIAWALI dengan com.googleusercontent.apps
6. Simpan file dengan Command + S

Ubah AppDelegate.swift

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

Ubah fungsi menjadi 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)
}

Fungsi application openURL yang telah dimodifikasi dengan penanganan GoogleSignIn

Simpan file dengan Command + S

Setup login Google di code JavaScript/TypeScript Anda

Impor SocialLogin dan Capacitor

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

Panggil method initialize (cukup panggil satu kali saja)

Setup dasar (mode online - direkomendasikan untuk sebagian besar aplikasi):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
Setup lanjutan dengan tambahan client ID:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: for web platform support
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Required: from step 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: same as webClientId, needed for some advanced features
      mode: 'online'                               // 'online' or 'offline'
    }
  })
})
```
Catatan
Persyaratan Client ID:
- iOSClientId: Wajib - Harus diakhiri dengan googleusercontent.com (dari langkah 1 di atas)
- webClientId: Opsional - Hanya diperlukan jika Anda mendukung platform web atau butuh fitur lanjutan
- iOSServerClientId: Opsional - Harus memiliki nilai yang sama dengan webClientId saat disediakan
Untuk setup lanjutan dengan webClientId dan iOSServerClientId, lihat panduan setup 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 code auth dari server yang harus ditukar dengan informasi pengguna melalui backend server Anda. SocialLogin.refresh({ provider: 'google' }) tidak tersedia dalam mode ini; refresh harus dilakukan di backend Anda setelah penukaran serverAuthCode. Lihat panduan setup umum untuk detail implementasi.

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

Untuk mode online:

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

Untuk mode offline:

const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Recommended for offline mode
  }
})
// res contains serverAuthCode, not user data
// Send serverAuthCode to your backend to get user information
// Do not call SocialLogin.refresh() in offline mode
console.log('Server auth code:', res.result.serverAuthCode)

Tes aplikasi Anda
1. Build dan jalankan aplikasi Anda cap sync
2. Jika semua sudah benar, alur login Google seharusnya berjalan dengan lancar

Masalah yang Diketahui

Inkompatibilitas Privacy Screen Plugin

Plugin Google Login tidak kompatibel dengan @capacitor/privacy-screen. Saat menggunakan kedua plugin bersamaan, webview Google Login akan terganggu oleh Privacy Screen.

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: {}
});

Jika Anda menggunakan Google Login di iOS untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas 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, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.