Login Google di iOS

GitHub

Salin sebuah prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

Bab berjudul “Pendahuluan”

Pengaturan Google Login dengan Capgo Social Login untuk iOS Petunjuk Pengaturan Umum.

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 jenis aplikasi Application type untuk iOS
6. Cari ID paket
  1. Buka Xcode
  2. Dengan dua kali klik 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
  
  Di nr. 1 dalam gambar ini akan menjadi iOSClientId dalam initialize panggilan.
  Di 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 sebuah Plist tag </dict> Tag penutup di file Info.plist
4. tag penutup </dict> tag
```
<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
Tambah import GoogleSignIn di atas file
Cari fungsi 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
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)
  
  Pengaturan 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
    }
  })
})
```
  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'
    }
  })
})
```
  Perhatian
  Persyaratan ID Klien:
  - iOSClientId: Wajib - Harus diakhiri dengan googleusercontent.com (dari langkah 1 di atas)
  - webClientId: Pilihan - Hanya dibutuhkan jika Anda juga mendukung platform web atau memerlukan fitur lanjutan
  - iOSServerClientId: Pilihan - Sebaiknya 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 server backend setelah menukar serverAuthCodeLihat panduan setup umum untuk detail implementasi. Implementasikan fungsi login. Buatlah tombol dan jalankan __CAPGO_KEEP_0__ berikut pada klik
3. Implement the login function. Create a button and run the following code on click
  
  untuk membuat 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)
```
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/privacy-screenKetika menggunakan kedua plugin bersamaan, layar login web 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-login-sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi dalam @capgo/capacitor-login-sosial, @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.