Google Login di iOS

Copas 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 bahwa Anda telah membaca Petunjuk pengaturan umum.

Pada 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 salah satu (nomor 2 pada tangkapan layar)
3. Klik pada create credentials
4. Pilih OAuth client ID
5. Pilih Application type ke iOS
6. Cari 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 masukkan ID klien jika Anda telah menerbitkan aplikasi ke App Store
8. Klik setelah semua detail telah diisi create
9. Buat OK
10. Buka klien iOS yang baru dibuat
11. Salin data berikut
  
  The nr. 1 dalam gambar ini akan menjadi iOSClientId panggilan. initialize call.
  The nr. 2 Buka klien iOS yang baru dibuat YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ubah konfigurasi 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 akan melihat sebuah Plist file, Anda akan melihat sebuah </dict> tag
4. Tambahkan fragmen berikut sebelum penutup tag. </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Ubah ke YOUR_DOT_REVERSED_IOS_CLIENT_ID ke nilai yang telah disalin pada langkah sebelumnya
  
  Pastikan nilai ini MULAI dengan com.googleusercontent.apps
6. Simpan file dengan Command + S

Modifikasi AppDelegate.swift

Terbuka file AppDelegate
Masukkan import GoogleSignIn Pada bagian atas file
Cari 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

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

Konfigurasi 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
    }
  })
})
```
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'
    }
  })
})
```
Catatan
Persyaratan ID Klien:
- iOSClientId: Diperlukan - Harus diakhiri dengan googleusercontent.com (dari langkah 1 di atas)
- webClientId: Dapat Dipilih - Hanya dibutuhkan jika Anda juga mendukung platform web atau membutuhkan fitur canggih
- iOSServerClientId: Dapat Dipilih - Sebaiknya sama dengan nilai webClientId ketika disediakan
Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientIdLihatlah , lihat panduan pengaturan web Membuat kredit-kredit 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 serverAuthCodeLihatlah untuk detail implementasi. Untuk detail implementasi.

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

Membuat kredit-kredit ini.

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 coba aplikasi Anda
1. Bangun 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/layar-privasi. Ketika menggunakan kedua plugin bersamaan, layar login web Google akan terganggu oleh layar privasi.

Bantuan: 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 Login Google di iOS untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan asli di Menggunakan @capgo/capacitor-login-social @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-biometrik-asli, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.