Google Login pada iOS

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 iOS. Saya asumsikan bahwa Anda telah membaca panduan pengaturan umum. Pengaturan umum.

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

Membuat ID klien iOS di konsol Google
1. Klik di bar pencarian
2. Cari dan klik pada credentials satu (nomor 2 pada tangkapan layar) APIs and Services Hasil pencarian menampilkan opsi kredential dengan APIs dan Services yang ditebalkan
3. Tombol Create credentials di Console Google create credentials
4. Opsi OAuth client ID di menu pembuatan kredential OAuth client ID
5. untuk Application type Pilihan jenis aplikasi dengan opsi iOS yang ditebalkan iOS
6. Temukan ID Paket
  1. Buka Xcode
  2. Klik dua kali pada App
  3. Pastikan Anda berada di Targets -> App
  4. Temukan Bundle Identifier
  5. Kembali ke Console Google dan tempelkan Bundle Identifier ke Bundle ID
7. Opsional, tambahkan App Store ID atau Team ID ke dalam ID klien jika Anda telah menerbitkan aplikasi ke App Store
8. Setelah mengisi semua detail, klik create
9. Klik OK
10. Buka klien iOS yang baru dibuat
11. Salin data berikut ini
  
  The nr. 1 dalam gambar ini akan menjadi iOSClientId dalam panggilan. initialize The
  dalam gambar ini akan menjadi nr. 2 Ubah Info.plist aplikasi Anda YOUR_DOT_REVERSED_IOS_CLIENT_ID
Buka Xcode dan cari file
1. file Info.plist Info.plist file di navigator proyek Xcode
2. Menu klik kanan menampilkan opsi Buka Sebagai Sumber code
3. Di bagian bawah file Anda, Anda akan melihat sebuah tag Plist tag penutup di file Info.plist </dict> Tag penutup di file Info.plist
4. Info.plist dengan skema URL __CAPGO_KEEP_0__ yang dimasukkan sebelum tag penutup </dict> Salin ke clipboard
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Peringatan YOUR_DOT_REVERSED_IOS_CLIENT_ID Info.plist dengan skema URL yang sebenarnya yang dimasukkan ke dalam skema URL
  
  Pastikan nilai ini MULAI dengan com.googleusercontent.apps
6. Simpan file dengan Command + S

Ubah AppDelegate.swift

Buka file AppDelegate
Tulis import GoogleSignIn di atas file AppDelegate.swift dengan import GoogleSignIn ditambahkan
at the top of the file func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) fungsi

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

Fungsi aplikasi yang telah dimodifikasi dengan penanganan GoogleSignIn

Simpan file dengan Command + S

Setup login Google di JavaScript/TypeScript code
1. Impor SocialLogin dan Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Panggil metode inisialisasi (ini harus dipanggil hanya sekali)
  
  Pengaturan dasar (mode online - disarankan untuk aplikasi yang paling banyak):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  Pengaturan lanjutan dengan ID klien tambahan:
```
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 ID Klien:
  - 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 canggih
  - iOSServerClientId: Opsional - Harus sama nilai dengan webClientId ketika disediakan
  Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientId, lihat panduan pengaturan web untuk membuat kreditensi-kreditensi ini. Peringatan
  Ketika menggunakan , respons login tidak akan berisi data pengguna secara langsung. Sebaliknya, Anda akan menerima autentikasi server __CAPGO_KEEP_0__ yang harus ditukar dengan informasi pengguna melalui server backend Anda. mode: 'offline'When using Capacitor, the login response will not contain user data directly. Instead, you’ll receive a server auth code that must be exchanged for user information via your backend server. SocialLogin.refresh({ provider: 'google' }) tidak tersedia dalam mode ini; refresh harus terjadi di backend Anda setelah menukar serverAuthCode. Lihat panduan pengaturan umum untuk detail implementasi.
3. Implementasikan fungsi login. Buat tombol dan jalankan code ketika 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)
```
Uji aplikasi Anda
1. Buat aplikasi Anda dan jalankan cap sync
2. Jika Anda telah melakukan semuanya dengan benar, Anda seharusnya melihat aliran login Google berjalan dengan baik

Masalah yang Dikenal

Kompabilitas Plugin Layar Privasi

Plugin Login Google tidak kompatibel dengan @capacitor/privacy-screenKetika menggunakan kedua plugin bersamaan, layar webview login Google akan terganggu oleh layar privasi.

Solusi Alternatif: Tunggu 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 pada iOS untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli dalam Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi dalam @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.