Google Login auf iOS

GitHub

Ein Setup-Vorschlag mit den Installations-Schritten und der vollständigen Markdown-Anleitung für diesen Plugin kopieren.

Einführung

In dieser Anleitung lernen Sie, wie Sie Google Login mit Capgo Social Login für iOS einrichten können. Ich nehme an, dass Sie bereits die allgemeine Einrichtungsanleitung.

In diesem Teil lernen Sie, wie Sie Google-Anmeldung in iOS einrichten.

Erstellen Sie einen iOS-Kundenidentifikator im Google-Konsolen
1. Auf die Suchleiste klicken
2. Nach credentials klicken Sie auf APIs and Services eine (Nummer 2 auf dem Screenshot)
3. Klicken Sie auf create credentials
4. Auswählen OAuth client ID
5. Auswählen Sie das Application type bis iOS
6. Finden Sie die Bundle-ID
  1. Öffnen Sie Xcode
  2. Doppelklicken Sie auf App
  3. Stellen Sie sicher, dass Sie sich im Targets -> App
  4. Finden Sie Bundle Identifier
  5. Zurück zur Google-Konsole und fügen Sie Ihren Bundle Identifier in Bundle ID
7. Optionally, fügen Sie Ihren App Store ID oder Team ID in die Client-ID, wenn Sie Ihre App im App Store veröffentlicht haben
8. Nachdem Sie alle Details ausgefüllt haben, klicken Sie create
9. Click OK
10. Öffnen Sie den neu erstellten iOS-Kunden
11. Kopieren Sie die folgenden Daten
  
  The nr. 1 in diesem Bild wird später der iOSClientId aufrufen. initialize call.
  The nr. 2 wird in diesem Bild später YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ihre App’s Info.plist anpassen
1. Xcode öffnen und das Info.plist Datei
2. Rechtsklick auf diese Datei und sie als Quelltext code öffnen
3. Am unteren Ende Ihrer Plist Datei sehen Sie ein </dict> Tag
4. Einfügen Sie den folgenden Fragment 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 Wert, der im vorherigen Schritt kopiert wurde
  
  Stellen Sie sicher, dass dieser Wert MIT mit com.googleusercontent.apps
6. Speichern Sie das Datei mit Command + S

Ändern Sie das AppDelegate.swift

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

Ändern Sie die Funktion, damit sie wie folgt aussieht

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

Geänderte Anwendungsöffnungsfunktion mit GoogleSignIn-Handling

Speichern Sie die Datei mit Command + S

Google-Anmeldung in Ihrem JavaScript/TypeScript code einrichten
1. Importieren SocialLogin und Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Die Initialisierungs-Methode aufrufen (dies sollte nur einmal aufgerufen werden)
  
  Grundlegende Einrichtung (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
    }
  })
})
```
  Erweiterte Einrichtung 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 den Client-Id:
  - iOSClientId: Erforderlich - Must end with googleusercontent.com (aus Schritt 1 oben)
  - webClientId: Optional Nur erforderlich, wenn Sie auch die Web-Plattform unterstützen oder erweiterte Funktionen benötigen
  - iOSServerClientId: Optional Sollte der gleiche Wert wie webClientId wenn bereitgestellt
  Für eine erweiterte Konfiguration mit webClientId und iOSServerClientIdsiehe die Web-Einrichtungsanleitung für die Erstellung dieser Anmeldeinformationen.
  Zu offline-Modus: Wenn Sie mode: 'offline', wird die Anmeldeantwort keine Benutzerdaten direkt enthalten. Stattdessen erhalten Sie einen Serverauthentifizierungscode code , der für Benutzerinformationen über Ihren Backend-Server ausgetauscht werden muss. SocialLogin.refresh({ provider: 'google' }) ist in diesem Modus nicht verfügbar; die Aktualisierung muss auf Ihrem Backend nach dem Austausch serverAuthCodeSiehe die allgemeine Einrichtungsanleitung für Implementierungsdetails.
3. Implementieren Sie die Anmeldefunktion. Erstellen Sie einen Button und führen Sie folgenden code auf Klick 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 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)
```
Testen Sie Ihre Anwendung
1. Bauen Sie Ihre App und starten Sie sie cap sync
2. Wenn Sie alles korrekt gemacht haben, sollten Sie das Google-Login-Flow korrekt funktionieren sehen

Bekannte Probleme

Inkompatibilität des Datenschutz-Screen-Plugins

Das Google-Login-Plugin ist mit dem @capacitor/datenschutz-screenDatenschutz-Screen inkompatibel. Wenn Sie beide Plugins gleichzeitig verwenden, wird der Google-Login-Webview vom Datenschutz-Screen unterbrochen.

Workaround: Aufrufen await PrivacyScreen.disable(); vor dem Aufrufen 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: {}
});

Zurücksetzen Google-Anmeldung auf iOS um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mit @capgo/capacitor-social-login Für die native Fähigkeit in Mit @capgo/capacitor-social-login, Für @capgo/capacitor-social-login Für die Implementierungsdetails in @capgo/capacitor-social-login, Für @capgo/capacitor-passkey Für die Implementierungsdetails in @capgo/capacitor-passkey, Für @capgo/capacitor-native-biometric Für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung Für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.