Google Login unter iOS

Einführung

In diesem Guide erfährst du, wie du Google Login mit Capgo Social Login für iOS einrichtest. Ich setze voraus, dass du bereits den Allgemeine Setup-Anleitung.

Google Login unter iOS nutzen

In diesem Abschnitt lernst du, wie du Google Login unter iOS einrichtest.

1. Erstelle eine iOS Client ID in der Google Console

   1. Klicke in die Suchleiste

      

   2. Suche nach credentials und klicke auf APIs and Services eins (Nummer 2 im Screenshot)

      

   3. Klicke auf die create credentials

      

   4. Wähle OAuth client ID

      

   5. Wähle die Application type zu iOS

      

   6. Bundle ID finden

      1. Xcode öffnen

      2. Doppelklicke auf App

         

      3. Stelle sicher, dass du dich im Targets -> App

         

      4. Finde dein Bundle Identifier

         

      5. Zurück zur Google Console gehen und deine Bundle Identifier in Bundle ID

         

   7. Optional füge deine App Store ID oder Team ID in die Client-ID ein, falls du deine App im App Store veröffentlicht hast

   8. Nachdem du alle Details ausgefüllt hast, klicke auf create

      

   9. Klicken OK

      

   10. Öffne den neu erstellten iOS-Client

       

   11. Kopiere die folgenden Daten

       

       Hinweis

       Der nr. 1 in diesem Bild wird später zum iOSClientId im initialize Aufruf zu.

       Der nr. 2 in diesem Bild wird später zum YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. Info.plist deiner App anpassen

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

      

   2. Rechtsklick auf diese Datei und als 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>

   5. Ändere den YOUR_DOT_REVERSED_IOS_CLIENT_ID auf den im vorherigen Schritt kopierten Wert

      

      Achtung

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

   6. Speichere die Datei mit Command + S

3. Ändere die AppDelegate.swift

   1. Öffne die AppDelegate

      

   2. Einfügen import GoogleSignIn am Anfang der Datei

      

   3. Suche nach 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

4. Google Login in deinem JavaScript/TypeScript code einrichten

   1. Importieren SocialLogin und Capacitor

      import { SocialLogin } from '@capgo/capacitor-social-login';
      import { Capacitor } from '@capacitor/core';

   2. Rufe die initialize-Methode auf (nur einmal aufrufen)

      Basis-Setup (Online-Modus – empfohlen für die meisten Apps):

      // onMounted is Vue specific
      onMounted(() => {
        SocialLogin.initialize({
          google: {
            iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
            mode: 'online' // Default mode
          }
        })
      })

      Erweitertes Setup mit zusätzlichen Client-IDs:

      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'
          }
        })
      })

      Hinweis

      Anforderungen an die Client-ID:

      • iOSClientId: Erforderlich - Muss enden mit googleusercontent.com (aus Schritt 1 oben)
      • webClientId: Optional - Nur erforderlich, wenn du auch die Web-Plattform unterstützt oder erweiterte Funktionen benötigst
      • iOSServerClientId: Optional - Should be the same value as webClientId wenn angegeben

      Für das Advanced Setup mit webClientId und iOSServerClientId, siehe den Web-Setup-Guide zum Erstellen dieser Credentials.

      Achtung

      Zum Offline-Modus: Bei Verwendung von mode: 'offline'enthält die Login-Response keine direkten Benutzerdaten. Stattdessen erhältst du einen Server-Auth code, der über deinen Backend-Server gegen Benutzerinformationen ausgetauscht werden muss. SocialLogin.refresh({ provider: 'google' }) ist in diesem Modus nicht verfügbar; der Refresh muss nach dem Austausch auf deinem Backend erfolgen serverAuthCode. Siehe die Allgemeine Setup-Anleitung für Details zur Implementierung.

   3. Implementiere die Login-Funktion. Erstelle einen Button und führe beim Klick folgenden code aus

      Für den Online-Modus:

      const res = await SocialLogin.login({
        provider: 'google',
        options: {}
      })
      // handle the response - contains user data
      console.log(JSON.stringify(res))

      Für den Offline-Modus:

      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. Teste deine App

   1. App bauen und ausführen cap sync

   2. Wenn alles korrekt eingerichtet ist, sollte der Google Login-Flow einwandfrei funktionieren

      

Hinweis

Die Sprache im Google Prompt richtet sich nach den Spracheinstellungen deines Geräts.

Bekannte Probleme

Inkompatibilität mit dem Privacy Screen Plugin

Das Google Login Plugin ist nicht kompatibel mit @capacitor/privacy-screen. Wenn beide Plugins gleichzeitig genutzt werden, wird die Google-Login-Webview durch den Privacy Screen unterbrochen.

Workaround: Rufe await PrivacyScreen.disable(); vor dem Aufruf der Login-Funktion:

import { PrivacyScreen } from '@capacitor/privacy-screen';
import { SocialLogin } from '@capgo/capacitor-social-login';

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});

Google Login unter iOS fortsetzen

Wenn du es nutzt Google Login unter iOS Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung von @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails zur Zwei-Faktor-Authentifizierung.