Firebase Google Login auf iOS

Einführung

Diese Anleitung hilft dir bei der Integration von Google Sign-In mit Firebase Authentication auf iOS. Ich gehe davon aus, dass du die allgemeine Firebase Google-Konfiguration.

Hinweis

bereits abgeschlossen hast. Ich nehme an, dass du deine iOS-App in der Firebase Console noch nicht erstellt hast. Falls doch, weichen die Schritte leicht ab.

Setup-Schritte

1. Gehe zu deiner Projektübersicht unter console.cloud.google.com

   

2. Klicke auf Add app Button

   

   Hinweis

   Eventuell musst du hier nach diesem Button suchen. Das gilt nur, wenn du bereits eine andere App in der Firebase Console erstellt hast.

   

3. Wähle iOS

   

4. Fülle den ersten Teil des Formulars aus

   1. Fülle das Apple bundle ID
      1. Öffne Xcode für deine App mit npx cap open ios
      2. Doppelklicke auf App
      3. Stelle sicher, dass du dich im Targets -> App
      4. Finde dein Bundle Identifier

         Hinweis

         Die hier angezeigte ID unterscheidet sich von der, die ich im weiteren Verlauf dieser Anleitung verwende. Ich werde app.capgo.plugin.SocialLogin für den Rest der Anleitung.

      5. Kopiere die Bundle Identifier und füge sie in der Firebase Console ein
   2. Klicke auf Register app Button

5. Überspringe den Download config file Schritt

   

6. Überspringe den Add firebase SDK Schritt

   

7. Überspringe den Add initialization code Schritt

   

8. Klicke auf Continue to console Button

   

9. Hol dir deine iOS Client ID und deine YOUR_DOT_REVERSED_IOS_CLIENT_ID

   1. Gehe zur Google Cloud Console unter console.cloud.google.com

   2. Finde dein Projekt

      1. Klicke auf die Projektauswahl
      2. Suche nach deinem Projekt über den exakten Namen deines Firebase-Projekts und klicke darauf. In meinem Fall ist es sociallogin-tutorial-app.

   3. Öffne die Suchleiste und öffne credentials

      1. Suchleiste öffnen
      2. Suche nach credentials und klicke auf APIs and Services den Eintrag (Nummer 2 im Screenshot)

   4. Klicke auf iOS client for [YOUR_APP_ID] (auto created by Google Service) eins. In meinem Fall ist es sociallogin-tutorial-app.

      

   5. Kopiere die Client ID as well as the iOS URL scheme. Das sind jeweils deine iOSClientId und YOUR_DOT_REVERSED_IOS_CLIENT_ID.

      Hinweis

      Du übergibst die iOSClientId im initialize Methode des Plugins, während du die YOUR_DOT_REVERSED_IOS_CLIENT_ID im Info.plist Datei deiner App, wie im nächsten Teil dieser Anleitung erklärt.

      

10. Web-Client-ID abrufen

    1. Gehe zurück zur Firebase Console und navigiere zu Build -> Authentication
    2. Klicke auf Sign-in method Button
    3. Klicke auf Google Provider
    4. Klicke auf Web SDK configuration Button
    5. Kopiere die Web client ID. Dies wird deine webClientId im initialize Plugin-Methode sein.

11. Ändere die Info.plist deiner App

    1. Öffne Xcode und suche die Info.plist Datei

       

    2. Rechtsklick auf die Datei und als Source code öffnen

       

    3. Ganz unten in deinem Plist Datei siehst du ein </dict> Tag

       

    4. Füge das folgende Fragment direkt vor dem schließenden </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. Ändere den YOUR_DOT_REVERSED_IOS_CLIENT_ID auf den in Schritt 9 kopierten Wert (das iOS URL-Scheme)

       

       Achtung

       Stelle sicher, dass dieser Wert BEGINNT mit com.googleusercontent.apps

12. Ändere den YOUR_IOS_CLIENT_ID in die iOS Client ID, die du in Schritt 9 kopiert hast

13. Speichere die Datei mit Command + S

14. Ändere die AppDelegate.swift

    1. Öffne die AppDelegate

       

    2. Einfügen import GoogleSignIn am Anfang der Datei

       

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

       

    4. Ändere die Funktion wie folgt

       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. Speichere die Datei mit Command + S

15. Google Login in deiner App nutzen

    Damit ist der Schritt abgeschlossen und du kannst den Google Login in deiner App nutzen. Bitte verwende die authUtils.ts Datei der Beispiel-App für die Authentifizierung mit Google.

Der User wird beim ersten Login automatisch in Firebase Auth erstellt.

Fehlerbehebung

If authentication hangs or fails:

• Prüfe, ob die idToken Audience mit deiner Firebase Web Client ID übereinstimmt
• Stelle sicher, dass Google Sign-In in der Firebase Console aktiviert ist
• Prüfe, ob die Info.plist die korrekten URL Schemes und die GIDClientID enthält
• Verify iOSServerClientId mit deiner Web Client ID übereinstimmt
• Lies die Beispiel-App code als Referenz

Weiter mit Firebase Google Login auf iOS

Wenn Sie ... verwenden Firebase Google Login auf iOS um Authentifizierungs- und Account-Flows zu planen, verbinde es mit Mit @capgo/capacitor-social-login für die native Funktion in „Mit @capgo/capacitor-social-login“, @capgo/capacitor-social-login für das Implementierungsdetail in @capgo/capacitor-social-login, @capgo/capacitor-passkey für das Implementierungsdetail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für das Implementierungsdetail in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für das Implementierungsdetail in der Zwei-Faktor-Authentifizierung.