Login Google di iOS

Pendahuluan

Dalam panduan ini, Anda akan belajar cara mengatur Google Login dengan Capgo Social Login untuk iOS. Saya asumsikan bahwa Anda telah membaca panduan pengaturan umum sebelumnya. Panduan Pengaturan Umum sebelumnya.

Menggunakan login Google di iOS

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

1. 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 tangkapan layar)

      

   3. Klik di create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih Application type ke iOS

      

   6. Cari ID paket

      1. Buka Xcode

      2. Dengan menekan tombol ganda pada App

         

      3. Pastikan Anda berada di Targets -> App

         

      4. Cari ID paket Anda 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 ini

       

       Peringatan

       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

2. 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. Di bagian bawah file Anda, Anda akan melihat tag Plist Tag penutup di file Info.plist </dict> Masukkan fragmen berikut sebelum tag penutup

      

   4. Info.plist dengan skema URL __CAPGO_KEEP_0__ dimasukkan sebelum tag penutup dict </dict> Info.plist dengan skema URL __CAPGO_KEEP_0__ dimasukkan sebelum tag penutup dict

      

      <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 dicopy di langkah sebelumnya

      

      Peringatan

      Pastikan nilai ini DIMULAI dengan com.googleusercontent.apps

   6. Simpan file dengan Command + S

3. Ubah AppDelegate.swift

   1. Buka AppDelegate

      

   2. Tambah import GoogleSignIn di atas berkas

      

   3. Temukan func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) fungsi

      

   4. Modifikasi fungsi agar 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)
      }

      

   5. Simpan berkas dengan Command + S

4. Setup login Google di JavaScript/TypeScript code

   1. Impor 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 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'
          }
        })
      })

      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 lanjutan
      • iOSServerClientId: Opsional - Seharusnya memiliki nilai yang sama dengan webClientId ketika disediakan

      Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientId, lihat panduan pengaturan web untuk membuat kredensial ini. for creating these credentials.

      Peringatan

      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 ditukar serverAuthCodeLihat petunjuk pengaturan umum untuk detail implementasi.

   3. Implementasikan fungsi login. Buat tombol dan jalankan code berikut pada klik

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

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

      

Catatan

Bahasa dalam prompt Google tergantung pada pengaturan bahasa perangkat Anda.

Masalah yang Dikenal

Kompabilitas Plugin Layar Privasi Tidak Dapat Dibuka

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

Solusi: 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: {}
});

Lanjutkan dari Login Google di iOS

Jika Anda menggunakan Login Google di iOS Untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial Untuk kemampuan asli di Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial Untuk detail implementasi di @capgo/capacitor-login-sosial, @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.