Firebase Google Login pada iOS

Pendahuluan

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

Note

I will assume that you have not yet created your iOS app in the Firebase Console. If you have, your steps will be slightly different.

Setup Steps

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

   

2. Klik pada tombol Add app tombol

   

   Penting

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

   

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. Geser dua kali pada App
      3. Pastikan Anda berada di Targets -> App
      4. Temukan Akun Anda Bundle Identifier

         Catatan

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

      5. Salin Bundle Identifier dan tempelkan di console Firebase
   2. Klik pada tombol Register app tombol

5. tombol Download config file Langkah

   

6. tombol Add firebase SDK Langkah

   

7. Lewati langkah Add initialization code Langkah

   

8. Klik pada tombol Continue to console Tombol

   

9. Dapatkan ID klien iOS Anda dan Anda YOUR_DOT_REVERSED_IOS_CLIENT_ID

   1. Pergi ke Console Google Cloud di console.cloud.google.com

   2. Cari proyek Anda

      1. Pilih proyek selector
      2. Cari proyek Anda dengan nama yang tepat dari proyek Firebase Anda dan klik pada itu. Di 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 salah satu (nomor 2 pada tangkapan layar)

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

      

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

      Note

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

      

10. Dapatkan ID klien web Anda

    1. Pergi kembali ke console Firebase dan pergi ke Build -> Authentication
    2. Klik pada tombol Sign-in method button
    3. Klik pada tombol Google provider
    4. Klik pada tombol Web SDK configuration button
    5. Salinlah Web client ID Ini akan menjadi ID klien Anda webClientId di dalam initialize Metode plugin ini.

11. Buka Xcode dan cari file

    1. Info.plist file di navigator proyek Xcode Info.plist file

       

    2. Klik kanan pada file ini dan buka sebagai sumber code

       

    3. di bagian bawah layar Anda Plist file, Anda akan melihat sebuah </dict> tag

       

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

       

       <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. Ubah YOUR_DOT_REVERSED_IOS_CLIENT_ID Info.plist dengan ID klien yang sebenarnya diubah di skema URL

       

       Peringatan

       Pastikan nilai ini DIMULAI dengan com.googleusercontent.apps

12. Ubah YOUR_IOS_CLIENT_ID ke iOS Client ID yang Anda salin di langkah 9

13. Simpan file dengan Command + S

14. Ubah AppDelegate.swift

    1. Buka AppDelegate

       

    2. di import GoogleSignIn at the top of the file

       

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

       

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

       

    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 aplikasi contoh untuk mengautentikasi dengan Google.

The user akan dibuat secara otomatis di Firebase Auth pada pertama kali masuk.

Troubleshooting

Jika autentikasi mengalami gangguan atau gagal:

• Pastikan idToken audience sesuai dengan ID klien web Firebase Anda
• Periksa bahwa Google Sign-In diaktifkan di Firebase Console
• Pastikan Info.plist memiliki URL schemes dan GIDClientID yang benar
• Pastikan iOSServerClientId sesuai dengan ID klien web Anda
• Ulas kembali Contoh aplikasi code sebagai 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-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, Menggunakan @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, Menggunakan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometrik untuk detail implementasi di @capgo/capacitor-native-biometric, dan Dua faktor autentikasi untuk detail implementasi di Dua faktor autentikasi.