Login Google di iOS

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

Menggunakan login Google pada iOS

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

1. 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 Application type Sampai iOS

      

   6. Temukan ID Paket

      1. Buka Xcode

      2. Klik ganda dua pada App

         

      3. Pastikan Anda berada di Targets -> App

         

      4. Cari ID Bundle Anda di Bundle Identifier

         

      5. di Bundle Identifier Jika perlu, tambahkan alamat Bundle ID

         

   7. ke ID Client jika Anda telah menerbitkan aplikasi ke App Store App Store ID Setelah mengisi semua detail, klik Team ID Pilih tombol Buat di bagian bawah formulir pembuatan klien iOS

   8. __CAPGO_KEEP_0__ create

      

   9. Klik OK

      

   10. Buka klien iOS yang baru saja dibuat

       

   11. Salin data berikut

       

       Catatan

       Dalam nr. 1 dalam gambar ini akan menjadi iOSClientId dalam panggilan. initialize panggilan.

       Mengenai nr. 2 dalam gambar ini akan menjadi YOUR_DOT_REVERSED_IOS_CLIENT_ID

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

      

   4. Masukkan fragmen berikut sebelum penutup </dict> tag penutup

      

      <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

      

      Pertimbangan

      Pastikan nilai ini MULAI berawal dengan com.googleusercontent.apps

   6. Simpan file dengan Command + S

3. Ubah AppDelegate.swift

   1. Buka file AppDelegate

      

   2. Masukkan import GoogleSignIn di atas file AppDelegate.swift dengan import GoogleSignIn ditambahkan

      

   3. fungsi func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) Fungsi aplikasi asli openURL di AppDelegate

      

   4. Salin ke clipboard

      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 file dengan Command + S

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

      Persyaratan ID Klien:

      • iOSClientId: Wajib - Harus diakhiri dengan googleusercontent.com (dari langkah 1 di atas)
      • webClientId: Tidak Wajib - Hanya dibutuhkan jika Anda juga mendukung platform web atau memerlukan fitur canggih
      • iOSServerClientId: Tidak Wajib - Seharusnya memiliki nilai yang sama dengan webClientId ketika disediakan

      Untuk pengaturan canggih dengan webClientId dan iOSServerClientIdlihat panduan pengaturan web panduan pengaturan web untuk membuat kredensial ini.

      Peringatan

      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.

   3. Implementasikan fungsi login. Buatlah tombol dan jalankan code di atasnya 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)

5. Uji aplikasi Anda

   1. Buatlah aplikasi Anda dan jalankan cap sync

   2. Jika Anda telah melakukan semuanya dengan benar, Anda seharusnya melihat alur login Google berjalan dengan baik

      

Penting

Bahasa dalam promosi Google bergantung pada pengaturan bahasa perangkat Anda

Masalah yang Dikenal

Kompabilitas Tidak Sesuai dengan Plugin Layar Privasi

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

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

Teruskan dari Login Google di iOS

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.