Login Google di iOS

Panduan untuk dicopy

Pendahuluan

Dalam panduan ini, Anda akan belajar cara mengatur Login Google dengan Capgo Login Sosial untuk iOS. Saya asumsikan Anda telah membaca panduan pengaturan umum..

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

Buat ID Klien iOS di Console Google
1. Klik pada bar pencarian
2. Cari credentials dan klik pada APIs and Services salah satu (nomor 2 pada screenshot)
3. Klik pada tombol create credentials
4. Pilih OAuth client ID
5. Pilih Application type To iOS
6. Halaman/area: Halaman produk live update. Peran: Label UI singkat atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Live Update Dynamic Label To).
  1. Pilih jenis aplikasi dengan opsi iOS yang dihiglight
  2. Cari ID paket App
  3. Pastikan Anda berada di Targets -> App
  4. Cari ID Bundle Anda di Bundle Identifier
  5. Pindah ke Google Console dan tempelkan ID Bundle Anda ke Bundle Identifier Pada ID Bundle di formulir pembuatan klien iOS Google Console Bundle ID
7. ke ID klien Google Console jika Anda telah menerbitkan aplikasi ke App Store App Store ID Setelah mengisi semua detail, klik Team ID Button Buat di bagian bawah formulir pembuatan klien iOS
8. Pilih ID Anda atau create
9. Klik OK
10. Buka klien iOS yang baru saja dibuat
11. Salin data berikut
  
  Perlu diingat nr. 1 di gambar ini akan menjadi iOSClientId di dalam initialize panggilan.
  Indonesia nr. 2 di gambar ini akan menjadi 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 tag Plist Tag penutup direktori di file Info.plist </dict> Tag penutup direktori di file Info.plist
4. Masukkan fragmen berikut sebelum penutup </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Ganti YOUR_DOT_REVERSED_IOS_CLIENT_ID ke nilai yang disalin pada langkah sebelumnya
  
  Pastikan nilai ini MULAI berawal dengan com.googleusercontent.apps
6. Simpan file dengan Command + S

Ubah 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

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

Oleh karena itu, fungsi buka URL aplikasi telah dimodifikasi untuk menangani 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';

Salin ke clipboard

Panggil metode inisialisasi (metode ini harus dipanggil hanya sekali)
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
Salin ke clipboard
```
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
Syarat ID Klien:
- iOSClientId: Diperlukan - Harus diakhiri dengan googleusercontent.com (dari langkah 1 di atas)
- webClientId: Diperlukan - Hanya dibutuhkan jika Anda juga mendukung platform web atau memerlukan fitur canggih
- iOSServerClientId: Diperlukan - Seharusnya memiliki nilai yang sama dengan webClientId ketika disediakan
Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientIdlihat panduan pengaturan web panduan pengaturan web 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 pengaturan umum panduan pengaturan umum untuk detail implementasi.

Implementasikan fungsi login. Buatlah tombol dan jalankan code berikut 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. Bangun 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

Inkompatibilitas Plugin Layar Privasi

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

Solusi Alternatif: Panggil await PrivacyScreen.disable(); context: Appflow Migration Step2

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