Google Login auf iOS

GitHub

Einen Einrichtungsvorschlag mit den Installationsanweisungen und der vollständigen Markdown-Dokumentation für diesen Plugin kopieren.

Einführung

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

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

Einen iOS-Kunden-ID in der Google-Konsole erstellen
1. Auf die Suchleiste klicken
2. Nach credentials und auf die APIs and Services eine (Zahl 2 auf dem Screenshot)
3. Klicken Sie auf den create credentials
4. Wählen Sie OAuth client ID
5. Wählen Sie die Application type Anwendungstypauswahl mit iOS-Option hervorgehoben iOS
6. Öffnen Sie Xcode
  1. Doppelklicken Sie auf
  2. App-Ziel in Xcode-Projekt-Explorer App
  3. Stellen Sie sicher, dass Sie sich auf Targets -> App
  4. Finden Sie Ihren Bundle Identifier
  5. Zurück zur Google-Konsole und fügen Sie Ihren Bundle Identifier hinzu Bundle ID
7. Bundle-ID-Feld in der Google-Konsole iOS-Kundenanlage App Store ID Optional, fügen Sie Ihren Team ID oder
8. context: HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `alternatives_cta_questions`). Seite/Bereich: Vergleichsseite für lebendige Capgo-Alternativen. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite alternatives.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertitel bleiben genau erhalten. Nachrichtenschlüssel `alternatives_cta_questions` (Alternativen-CTA-Fragen). | HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `appflow_cta_questions`). Seite/Bereich: Appflow-Vergleichs-/Migrationsmarketing. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite ionic-appflow.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertitel bleiben genau erhalten. Nachrichtenschlüssel `appflow_cta_questions` (Appflow-CTA-Fragen). | HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `capwesome_cta_questions`). Seite/Bereich: Capawesome-Vergleichsseite. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite capwesome.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertitel bleiben genau erhalten. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome-CTA-Fragen). | Seite/Bereich: Beratungsdienste-Seite. Rolle: Abschnittsunterschrift oder Slogan. Gesehen in: Seite consulting.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertitel bleiben genau erhalten. Nachrichtenschlüssel `consulting_faq_subtitle` (Beratungsdienste-Fragebogen-Unterschrift). | Seite/Bereich: Appflow-Vergleichs-/Migrationsmarketing. Rolle: Kurzer UI-Label oder Navigationselement. Gesehen in: Seite ionic-appflow.astro, Seite ionic-enterprise-plugins.astro, Seite Lösungen/ionic-enterprise-plugins.astro. Nachrichtenschlüssel `appflow_plugins_or` (Appflow-Plugins-oder) create
9. Klicken OK
10. Öffnen Sie den neu erstellten iOS-Client
11. Folgende Daten kopieren
  
  Die nr. 1 wird in diesem Bild später zum iOSClientId in dem initialize Aufruf.
  Die nr. 2 in dieser Abbildung wird später zu YOUR_DOT_REVERSED_IOS_CLIENT_ID
Passen Sie die Info.plist Ihres Apps an
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. Fügen Sie den folgenden Fragment vor dem Abschluss </dict> Schluss
```
<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 mit com.googleusercontent.apps
6. Speichern Sie das Datei mit Command + S

Ändern Sie die 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)
}

Modifizierte Anwendung öffne URL-Funktion mit GoogleSignIn-Handling

Speichere das Datei mit Command + S

Einstellung von Google-Anmeldung in Ihrem JavaScript/TypeScript code
1. Importiere SocialLogin und Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Aufrufen Sie die 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
  Anforderungen an den Client ID:
  - 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 Konfiguration mit webClientId und iOSServerClientId, siehe das 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 eine Server-Authentifizierung code , die gegen Benutzerinformationen über Ihren Backend-Server eingetauscht werden muss. SocialLogin.refresh({ provider: 'google' }) ist nicht verfügbar in dieser Modus; die Aktualisierung muss auf Ihrem Backend nach dem Austausch serverAuthCodeerfolgen. Siehe die allgemeine Einrichtungsanleitung für Implementierungsdetails.
3. Implementieren Sie die Anmeldefunktion. Erstellen Sie einen Button und führen Sie 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 korrekt gemacht haben, sollten Sie das Google-Anmeldevorgang richtig funktionieren sehen

Known Probleme

Unvereinbarkeit des Privacy-Screen-Plugins

Das Google-Login-Plugin ist mit dem @capacitor/privacy-screen. Wenn Sie beide Plugins gemeinsam verwenden, wird die Google-Login-Webview durch die Datenschutzschutzschirm unterbrochen.

Workaround: Aufrufen await PrivacyScreen.disable(); context

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 on iOS” verwenden Google Login auf iOS um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey @capgo/capacitor-native-biometric Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zweifaktor-Authentifizierung Zur Implementierungsdetail in Zweifaktor-Authentifizierung.