Login Google di iOS

Copy 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 Social Login untuk iOS. Saya asumsikan Anda telah membaca panduan pengaturan umum..

Dalam 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 di APIs and Services satu (nomor 2 pada screenshot)
3. Klik pada tombol create credentials
4. Pilih OAuth client ID
5. Pilih Application type ke iOS
6. Pilih jenis aplikasi dengan opsi iOS yang ditonjolkan
  1. Cari ID bundle
  2. Buka Xcode App
  3. Tujuan aplikasi di navigator proyek Xcode Targets -> App
  4. Cari tahu Bundle Identifier
  5. Kembali ke Console Google dan tempelkan tautan Anda ke Bundle Identifier ke Bundle ID
7. Opsional, tambahkan tautan Anda ke App Store ID atau Team ID masukkan ke ID Paket di formulir pembuatan klien iOS Google Console jika Anda telah menerbitkan aplikasi ke App Store
8. Setelah mengisi semua detail, klik create
9. Klik OK
10. Buka klien iOS baru yang dibuat
11. Salin data berikut
  
  Dalam gambar ini akan menjadi nr. 1 dalam iOSClientId panggilan. initialize Dalam
  Dalam 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 file ini dan buka sebagai sumber code
3. Di bagian bawah file, Anda akan melihat tag Plist Tag penutup di file Info.plist </dict> Masukkan fragmen berikut sebelum penutup
4. Tutup tag dictionary di Info.plist </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Ganti dengan YOUR_DOT_REVERSED_IOS_CLIENT_ID ke nilai yang disalin pada langkah sebelumnya
  
  Pastikan nilai ini MULAI dengan com.googleusercontent.apps
6. Simpan file dengan Command + S

Ubahlah AppDelegate.swift

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

Ubahlah 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

Import SocialLogin dan Capacitor

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

Panggil metode inisialisasi (metode ini harus dipanggil hanya sekali)

Pengaturan dasar (mode online - disarankan untuk aplikasi kebanyakan):
```
// 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: Diperlukan - 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 - Seharusnya memiliki nilai yang sama dengan webClientId ketika disediakan
Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientId, lihat Petunjuk pengaturan web untuk membuat kredensial ini.
Tentang mode offline: 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 petunjuk pengaturan umum untuk detail implementasi. Implementasikan fungsi login. Buat tombol dan jalankan __CAPGO_KEEP_0__ berikut pada klik

Implement the login function. Create a button and run the following code on click

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. 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 Dikenal

Kompabilitas Plugin Layar Privasi

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

Solusi: Panggil await PrivacyScreen.disable(); context

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 native di Menggunakan @capgo/capacitor-social-login Menggunakan @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login Menggunakan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey Menggunakan @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di Pengaturan Dua Faktor.