Google-Anmeldung auf iOS

Kopieren Sie einen Einrichtungsvorschlag mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin.

Einführung

In dieser Anleitung lernen Sie, wie Sie Google-Anmeldung mit Capgo Social Login für iOS einrichten können. Ich gehe davon aus, dass Sie bereits die allgemeine Einrichtungsanleitung gelesen haben. Allgemeine Einrichtungsanleitung.

In diesem Abschnitt lernen Sie, wie Sie Google-Anmeldung in iOS einrichten können.

Erstellen Sie einen iOS-Kunden-ID in der Google-Konsole
1. Klicken Sie auf die Suchleiste
2. Nach credentials und klicken Sie auf APIs and Services Nummer 2 auf dem Screenshot
3. Klicken Sie auf den create credentials
4. Wählen Sie OAuth client ID
5. Wählen Sie das Application type für iOS
6. Finden Sie die Bundle-ID
  1. Öffnen Sie Xcode
  2. Doppelklicken Sie auf App
  3. Stellen Sie sicher, dass Sie sich auf Targets -> App
  4. Finden Sie Ihr Bundle Identifier
  5. Gehen Sie zurück zur Google-Konsole und fügen Sie Ihren Bundle Identifier in das Bundle ID
7. Optional können Sie Ihren App Store ID oder Team ID in den Client-Id, wenn Sie Ihre App bereits im App Store veröffentlicht haben
8. Nachdem Sie alle Details ausgefüllt haben, klicken Sie auf create
9. Klicken OK
10. Öffnen Sie den neu erstellten iOS-Client
11. Kopieren Sie die folgenden Daten
  
  Der nr. 1 in diesem Bild wird später der iOSClientId in den initialize Aufruf.
  Die nr. 2 in dieser Abbildung wird später werden YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ändern Sie die Info.plist-Datei Ihres Apps
1. Öffnen Sie Xcode und finden Sie das Info.plist Datei
2. Recht klicken Sie auf diese Datei und öffnen Sie sie als Quelle code
3. Am unteren Ende Ihrer Plist Datei sehen Sie ein </dict> Tag
4. Einfügen Sie den folgenden Fragment vor dem Abschluss </dict> Schlagwort
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Ändern Sie den YOUR_DOT_REVERSED_IOS_CLIENT_ID auf den Wert, der in der vorherigen Schritt kopiert wurde
  
  Stellen Sie sicher, dass dieser Wert MIT STARTET 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 das func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) Funktion

Ändern Sie die Funktion so

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

Modifizierte Anwendung öffnenURL-Funktion mit GoogleSignIn-Handling

Speichern Sie das Datei mit Command + S

Setup Google-Anmeldung in Ihrem JavaScript/TypeScript code

Importieren SocialLogin und Capacitor

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

Aufrufen der Initialisierungs-Methode (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
Client-ID-Anforderungen:
- iOSClientId: Erforderlich - Muss mit googleusercontent.com (aus Schritt 1 oben)
- webClientId: Optional - Wird nur benötigt, wenn auch die Web-Plattform unterstützt wird oder wenn erweiterte Funktionen benötigt werden
- iOSServerClientId: Optional - Sollte der gleiche Wert wie webClientId wenn bereitgestellt
Für eine erweiterte Konfiguration mit webClientId und iOSServerClientIdAchten Sie auf Web-Einrichtungsanleitung um diese Anmeldeinformationen zu erstellen.
Zu offline-Modus: Wenn Sie mode: 'offline'die Anmeldeantwort enthalten wird. Stattdessen erhalten Sie eine Server-Authentifizierung code , die Sie gegen Benutzerinformationen über Ihren Backend-Server austauschen müssen. SocialLogin.refresh({ provider: 'google' }) ist in dieser Modus nicht verfügbar; Die Aktualisierung muss auf Ihrem Backend nach dem Austausch erfolgen. serverAuthCodeSiehe die Allgemeine Einrichtungsanleitung zur Implementierung der Details.

Implementieren Sie die Login-Funktion. Erstellen Sie einen Button und führen Sie folgenden code auf Klick aus

Für 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 führen Sie sie aus cap sync
2. Wenn Sie alles richtig gemacht haben, sollten Sie das Google-Login-Flow korrekt funktionieren sehen

Bekannte Probleme

Inkompatibilität des Privacy-Screen-Plugins

Das Google-Login-Plugin ist mit @capacitor/privacy-screenunvereinbar. Wenn Sie beide Plugins gleichzeitig verwenden, wird die Google-Login-Webview durch den Privacy-Screen unterbrochen.

Workaround: Call await PrivacyScreen.disable(); bevor Sie die Login-Funktion aufrufen:

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

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

Wenn Sie " Google Login auf iOS" für die Planung der Authentifizierung und der Kontenflüsse verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, Mit @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, Mit @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, Mit @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.