Google Login unter iOS

Kopiere einen Setup-Prompt mit den Installationsschritten und dem vollständigen Markdown-Guide für dieses Plugin.

Einführung

In diesem Leitfaden erfahren Sie, wie Sie Google Login mit Capgo Social Login für iOS einrichten. Ich gehe davon aus, dass Sie bereits die Allgemeine Setup-Anleitung.

In diesem Teil lernst du, wie du Google Login in iOS einrichtest.

Erstelle eine iOS-Client-ID in der Google Console
1. Klicke auf die Suchleiste
2. Suche nach credentials und klicke auf APIs and Services eins (Nummer 2 auf dem 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 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
  
  Der nr. 1 in diesem Bild wird später zum iOSClientId im initialize Aufruf zu.
  Der nr. 2 in diesem Bild wird später zu YOUR_DOT_REVERSED_IOS_CLIENT_ID
Info.plist deiner App anpassen
1. Öffne Xcode und suche die Info.plist Datei
2. Rechtsklick auf diese Datei und als code öffnen
3. Am unteren Rand Ihrer Plist Datei sehen Sie ein </dict> Tag
4. Fügen Sie 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. Ändern Sie das YOUR_DOT_REVERSED_IOS_CLIENT_ID auf den im vorherigen Schritt kopierten Wert
  
  Stelle sicher, dass dieser Wert BEGINNT mit com.googleusercontent.apps
6. Speichere die Datei mit Command + S

Ändere die AppDelegate.swift

Öffne die AppDelegate
Einfügen import GoogleSignIn am Anfang der Datei
Suche nach func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) Funktion

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

Angepasste application-openURL-Funktion mit GoogleSignIn-Handling

Speichere die Datei mit Command + S

Google Login in deinem JavaScript/TypeScript code einrichten

Importieren SocialLogin und Capacitor

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

Rufe die initialize-Methode auf (dies sollte nur einmal geschehen)

Basis-Setup (Online-Modus – für die meisten Apps empfohlen):
```
// 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 - Sollte denselben Wert haben wie webClientId wenn angegeben
Für eine erweiterte Einrichtung mit webClientId und iOSServerClientId, siehe die Web-Einrichtungsanleitung zum Erstellen dieser Zugangsdaten.
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.

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)

Teste deine App
1. App bauen und ausführen cap sync
2. Wenn alles korrekt konfiguriert ist, sollte der Google-Login-Flow einwandfrei funktionieren.

Bekannte Probleme

Inkompatibilität mit dem Privacy Screen Plugin

Das Google Login Plugin ist inkompatibel mit @capacitor/privacy-screen. Wenn beide Plugins gleichzeitig verwendet werden, wird der 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: {}
});

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.