Google Login pada 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 di APIs and Services satu (nomor 2 pada tangkapan layar)

      

   3. Klik pada tombol create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih jenis Application type To iOS

      

   6. Page/area: Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To).

      1. Aplikasi

      2. Pilih jenis aplikasi dengan opsi iOS yang ditebalkan App

         

      3. Pastikan Anda berada di Targets -> App

         

      4. Cari field Bundle Identifier

         

      5. Pulang ke Google Console dan tempelkan Bundle Identifier ke Bundle ID

         

   7. Opsional, tambahkan App Store ID atau Team ID ke dalam 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 saja dibuat

       

   11. Salin data berikut

       

       Pertahankan

       Perlu diingat nr. 1 Perlu diingat iOSClientId Di initialize akan menjadi

       Mengenai nr. 2 dalam gambar ini akan menjadi YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. Modifikasi file 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 penutup dictionary di file Info.plist </dict> Tag penutup dictionary 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. Ubahlah 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. Setup 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

      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 - Harus sama dengan webClientId ketika disediakan

      Untuk pengaturan lanjutan dengan webClientId dan iOSServerClientIdlihat panduan pengaturan web panduan pengaturan web untuk membuat kredit ini.

      Peringatan

      Mengenai 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 serverAuthCode. Lihat panduan pengaturan umum panduan pengaturan umum untuk detail implementasi.

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

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

      

Catatan

Bahasa dalam prompt Google tergantung pada pengaturan bahasa perangkat Anda

Masalah yang Dikenal

Inkompatibilitas Plugin Layar Privasi

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

Solusi Alternatif: Panggil await PrivacyScreen.disable(); context:HTML text fragment from a longer Capgo UI string (parent key `appflow_migration_step2`). Page/area: Appflow comparison / migration marketing copy. Role: Website copy sentence. Seen in: page ionic-appflow.astro. Preserve Capgo product/brand and developer terms exactly. Message key `appflow_migration_step2` (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: {}
});

Salin ke clipboard (Salin ke clipboard tidak tersedia untuk teks ini karena terdapat kode HTML yang tidak dapat disalin.)

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 Autorisasi Dua Faktor untuk detail implementasi di Autorisasi Dua Faktor.