Firebase Google Login pada iOS

Pendahuluan

Petunjuk ini akan membantu Anda mengintegrasikan Sign-In Google dengan Firebase Authentication pada iOS. Saya asumsikan Anda telah menyelesaikan pengaturan Firebase Google secara umum. Catatan.

Saya akan asumsikan bahwa Anda belum menciptakan aplikasi iOS Anda di Firebase Console. Jika Anda telah melakukannya, langkah-langkah Anda akan sedikit berbeda.

Langkah Pengaturan

Bab berjudul “Langkah Pengaturan”

1. Pergi ke tampilan ringkasan proyek Anda di console.cloud.google.com

   

2. Klik pada tombol Add app button

   

   Perhatian

   Mungkin Anda harus mencari tombol ini di sini. Hal ini hanya berlaku jika Anda telah membuat aplikasi yang berbeda di Firebase Console.

   

3. Pilih iOS

   

4. Isi bagian pertama dari formulir

   1. Isi Apple bundle ID
      1. Buka Xcode di aplikasi Anda menggunakan npx cap open ios
      2. Klik ganda pada App
      3. Pastikan Anda berada di Targets -> App
      4. Cari Bundle Identifier

         Perhatian

         ID yang ditampilkan di sini akan berbeda dari yang saya gunakan untuk bagian lain dari panduan ini. Saya akan menggunakan app.capgo.plugin.SocialLogin untuk sisa panduan ini.

      5. Salin dan tempelkan ke console Firebase Bundle Identifier Klik pada tombol
   2. Klik pada tombol Register app Firebase Tambah Aplikasi iOS Tombol Register

5. langkah Download config file Firebase Tambah Aplikasi iOS Tombol Lewati Unduh

   

6. langkah Add firebase SDK untuk sisa panduan ini.

   

7. Lewati Add initialization code langkah

   

8. Klik pada tombol Continue to console button

   

9. Dapatkan ID klien iOS Anda dan Anda YOUR_DOT_REVERSED_IOS_CLIENT_ID

   1. Buka Google Cloud Console di console.cloud.google.com

   2. Cari proyek Anda

      1. Klik pada selector proyek
      2. Cari projek Anda dengan nama yang tepat dari projek Firebase Anda dan klik pada itu. Dalam kasus saya, itu adalah sociallogin-tutorial-app.

   3. Buka bar pencarian dan buka credentials

      1. Buka bar pencarian
      2. Cari credentials dan klik pada APIs and Services satu (nomor 2 pada tangkapan layar)

   4. Klik pada iOS client for [YOUR_APP_ID] (auto created by Google Service) satu. Dalam kasus saya, itu adalah sociallogin-tutorial-app.

      

   5. Salin Client ID sebagai well sebagai iOS URL scheme. Ini akan menjadi masing-masing ID Anda iOSClientId dan YOUR_DOT_REVERSED_IOS_CLIENT_ID.

      Peringatan

      Anda akan melewati iOSClientId dalam initialize metode plugin, sementara Anda akan menggunakan YOUR_DOT_REVERSED_IOS_CLIENT_ID dalam Info.plist file aplikasi Anda, seperti yang dijelaskan dalam bagian berikutnya dari panduan ini.

      

10. Dapatkan ID klien web Anda

    1. Kembali ke konsol Firebase dan pilih Build -> Authentication
    2. Klik pada tombol Sign-in method Firebase Autentikasi Metode Masuk Tombol
    3. metode Google Firebase Autentikasi Metode Masuk Google Metode
    4. tombol Web SDK configuration Firebase Autentikasi Metode Masuk Google Tombol
    5. Salin Web client ID. Ini akan menjadi webClientId dalam initialize metode plugin.

11. Ubah Info.plist aplikasi Anda

    1. Buka Xcode dan cari file Info.plist Info.plist file di navigator proyek Xcode

       

    2. Menu klik kanan menampilkan opsi Buka Sebagai Sumber code

       

    3. Di bagian bawah file Anda, Anda akan melihat sebuah tag Plist tag penutup di file Info.plist </dict> Masukkan fragmen berikut sebelum tag penutup di file Info.plist

       

    4. Salin ke clipboard </dict> Ubah nilai

       

       <key>CFBundleURLTypes</key>
       <array>
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
           <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
         </array>
       </dict>
       </array>
       <key>GIDClientID</key>
       <string>YOUR_IOS_CLIENT_ID.apps.googleusercontent.com</string>

    5. Peringatan YOUR_DOT_REVERSED_IOS_CLIENT_ID ]}

       

       Peringatan

       Pastikan nilai ini MULAI dengan com.googleusercontent.apps

12. Ubah YOUR_IOS_CLIENT_ID ke ID Klien iOS yang Anda salin pada langkah 9

13. Simpan file dengan Command + S

14. Modifikasi AppDelegate.swift

    1. Buka file AppDelegate

       

    2. Tulis import GoogleSignIn di atas file

       

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

       

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

       

    5. Simpan file dengan Command + S

15. Menggunakan login Google di aplikasi Anda

    Pada langkah ini, Anda sudah siap untuk menggunakan login Google di aplikasi Anda. Silakan gunakan authUtils.ts file contoh aplikasi untuk mengautentikasi dengan Google.

Pengguna akan dibuat secara otomatis di Firebase Auth pada pertama kali masuk

Pengaturan

Periksa bahwa

• audience sesuai dengan ID klien web Firebase Anda idToken Periksa bahwa Google Sign-In diaktifkan di Firebase Console
• Pastikan Info.plist memiliki URL scheme yang benar dan GIDClientID
• Periksa
• sesuai dengan ID klien web Anda iOSServerClientId Lihat contoh aplikasi __CAPGO_KEEP_0__
• Pengaturan example app code untuk referensi

Lanjutkan dari Firebase Google Login pada iOS

Jika Anda menggunakan Firebase Google Login pada iOS untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-social, @capgo/capacitor-login-social untuk detail implementasi dalam @capgo/capacitor-login-social, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik native untuk detail implementasi di @capgo/capacitor-biometrik native, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.