Google-Anmeldung auf iOS

Eine Einrichtungsvorlage mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin kopieren.

Einführung

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

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

Erstellen Sie einen iOS-Kunden-ID in der Google-Konsole
1. Klicken Sie auf die Suchleiste
2. Suchen Sie nach credentials und klicken Sie auf das APIs and Services das (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. Xcode öffnen
  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 zum Google-Konsolen und fügen Sie Ihren Bundle Identifier in das Bundle ID
7. Optional, 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. Klicken Sie OK
10. Öffnen Sie den neu erstellten iOS-Client
11. Kopieren Sie die folgenden Daten
  
  Die nr. 1 in dieser Abbildung wird später der iOSClientId in dem initialize anrufen.
  Die nr. 2 in dieser Abbildung wird später der YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ändern Sie die Informationen in Ihrem App-Info.plist
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. Unten in Ihrem Plist Datei, Sie sehen ein </dict> Schlagwort
4. Einfügen Sie den folgenden Fragment vor der Schließenden </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 das YOUR_DOT_REVERSED_IOS_CLIENT_ID auf den Wert, der in dem vorherigen Schritt in die Zwischenablage kopiert wurde
  
  Stellen Sie sicher, dass dieser Wert STARTS 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, dass 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)
}

Modifizierte Anwendung openURL-Funktion mit GoogleSignIn-Handling

Speichern Sie das Datei mit Command + S

Einrichten Sie Google-Anmeldung in Ihrem JavaScript/TypeScript code
1. Importieren SocialLogin und Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Rufen Sie die initialize-Methode auf (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 Konfiguration 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 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 fortgeschrittene Einrichtung mit webClientId und iOSServerClientId, siehe die Web-Einrichtungshandlung für die Erstellung dieser Anmeldeinformationen.
  Über offline-Modus: Wenn Sie mode: 'offline', wird die Anmeldeantwort keine Benutzerdaten direkt enthalten. Stattdessen erhalten Sie einen Server-Autorisierungsschlüssel code , der für Benutzerinformationen über Ihren Backend-Server ausgetauscht werden muss. SocialLogin.refresh({ provider: 'google' }) ist in dieser Modus nicht verfügbar; die Aktualisierung muss auf Ihrem Backend nach dem Austausch erfolgen. serverAuthCode. Sehen Sie sich die allgemeine Einrichtungshilfe für Implementierungsdetails.
3. Implementieren Sie die Anmeldefunktion. Erstellen Sie einen Button und führen Sie den folgenden code bei einem 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-Anmeldevorgang funktionieren sehen

Bekannte Probleme

Inkompatibilität des Privacy-Screen-Plugins

Das Google-Login-Plugin ist mit @capacitor/privacy-screenWenn Sie beide Plugins gemeinsam verwenden, wird die Google-Login-Webview durch die Datenschutzschirmfunktion unterbrochen.

Workaround: Aufruf await PrivacyScreen.disable(); Bevor Sie die Anmeldefunktion aufrufen:

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

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