Login Google di 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 Petunjuk Umum Pengaturan.

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

Buat ID klien iOS di konsol Google
1. Klik di bar 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 untuk iOS
6. Temukan ID paket
  1. Buka Xcode
  2. Klik ganda 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 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
  
  The nr. 1 dalam gambar ini akan menjadi iOSClientId dalam initialize panggilan.
  The nr. 2 dalam gambar ini akan menjadi YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ubah Info.plist aplikasi Anda
1. Buka Xcode dan cari file Info.plist file
2. Klik kanan pada file ini dan buka sebagai sumber code
3. Pada bagian bawah file Anda, Anda akan melihat tag Plist Tag penutup di file Info.plist </dict> Masukkan fragmen berikut sebelum tag penutup
4. penutup </dict> penutup
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Ubah menjadi YOUR_DOT_REVERSED_IOS_CLIENT_ID ke nilai yang disalin pada langkah sebelumnya
  
  Pastikan nilai ini DIMULAI dengan com.googleusercontent.apps
6. Simpan file dengan Command + S

Ubah file ini AppDelegate.swift

Buka AppDelegate
Tambahkan import GoogleSignIn di atas file AppDelegate.swift dengan import GoogleSignIn ditambahkan
Fungsi asli aplikasi openURL di AppDelegate func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) Modifikasi fungsi untuk terlihat seperti ini

Fungsi aplikasi openURL yang telah dimodifikasi dengan penanganan GoogleSignIn

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)
}

__CAPGO_KEEP_1__ Command + S

Setup Google login di JavaScript/TypeScript code
1. Import SocialLogin dan Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Panggil metode inisialisasi (metode ini harus dipanggil hanya sekali)
  
  Konfigurasi Dasar (mode online - disarankan untuk aplikasi sebagian besar):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  Konfigurasi 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'
    }
  })
})
```
  Peringatan
  Persyaratan ID Klien:
  - iOSClientId: Diperlukan - Harus diakhiri dengan googleusercontent.com (dari langkah 1 di atas)
  - webClientId: Opsional - Hanya dibutuhkan jika Anda juga mendukung platform web atau memerlukan fitur canggih
  - iOSServerClientId: Opsional - Seharusnya memiliki nilai yang sama dengan webClientId ketika disediakan
  Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientId, lihat panduan pengaturan web web setup guide untuk membuat kredit ini.
  Tentang mode offline: Ketika menggunakan mode: 'offline', respons login tidak akan berisi data pengguna secara langsung. Sebaliknya, Anda akan menerima autentikasi server code yang harus ditukar dengan informasi pengguna melalui server backend Anda. SocialLogin.refresh({ provider: 'google' }) tidak tersedia dalam mode ini; refresh harus terjadi pada backend Anda setelah menukar serverAuthCode. Lihat panduan setup umum untuk detail implementasi. Implementasikan fungsi login. Buat tombol dan jalankan __CAPGO_KEEP_0__ berikut pada klik
3. Implement the login function. Create a button and run the following code on click
  
  Tidak ada perubahan yang diperlukan untuk mode ini; refresh dapat terjadi secara otomatis.
```
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. Buat aplikasi Anda dan jalankan cap sync
2. Jika Anda telah melakukan semuanya dengan benar, Anda seharusnya melihat alur login Google berjalan dengan baik

Masalah yang Diketahui

Kesalahan Kompatibilitas Plugin Layar Privasi

Plugin Login Google tidak kompatibel dengan @capacitor/privacy-screen. Ketika menggunakan kedua plugin bersamaan, layar login web Google 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: {}
});

Jika Anda menggunakan Google Login pada iOS untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-social, @capgo/capacitor-login-social untuk detail implementasi dalam @capgo/capacitor-login-social, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi dalam @capgo/capacitor-biometrik-asli, dan Dua faktor autentikasi untuk detail implementasi dalam Dua faktor autentikasi.