Google-Login auf iOS

GitHub

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

Einleitung

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.

In diesem Teil 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. Suchen Sie nach credentials und klicken Sie auf die APIs and Services eine (Nummer 2 auf dem Screenshot)
3. Klicken Sie auf die create credentials
4. Wählen Sie OAuth client ID
5. Wählen Sie die Application type zur iOS
6. Finden Sie die Bundle-ID
  1. Xcode öffnen
  2. Doppelklicken Sie auf App
  3. Stellen Sie sicher, dass Sie sich im Targets -> App
  4. Finden Sie Ihr Bundle Identifier
  5. Zurück zur Google-Konsole und fügen Sie Ihre Bundle Identifier ein Bundle ID
7. Optionell, fügen Sie Ihrem App Store ID oder Team ID in die Client-ID ein, 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 das neu erstellte iOS-Kundenkonto
11. Kopieren Sie die folgenden Daten
  
  In diesem Bild wird später der nr. 1 __CAPGO_KEEP_0__ iOSClientId in der initialize Anruf.
  In diesem Bild wird später der nr. 2 Ändern Sie die App-Einstellungen von Info.plist YOUR_DOT_REVERSED_IOS_CLIENT_ID
Öffnen Sie Xcode und finden Sie das
1. Datei Info.plist Info.plist-Datei im Xcode-Projekt-Explorer
2. Rechtsklick auf dieses Datei und öffnen Sie es als Quelle code
3. Am 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 die YOUR_DOT_REVERSED_IOS_CLIENT_ID auf den Wert, der in dem vorherigen Schritt kopiert wurde
  
  Stellen Sie sicher, dass dieser Wert BEGINNT 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 openURL-Funktion mit GoogleSignIn-Handling

Speichern Sie das File mit Command + S

Setup Google-Login in Ihrem JavaScript/TypeScript code

Importieren SocialLogin und Capacitor

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

Rufen Sie die Methode initialize 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 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 die Client-ID:
- iOSClientId: Pflichtfeld - Muss mit googleusercontent.com (aus Schritt 1 oben)
- webClientId: Optional - Wenn Sie auch die Web-Plattform unterstützen oder erweiterte Funktionen benötigen
- iOSServerClientId: Optional - Sollte der gleiche Wert wie webClientId when provided
Für eine erweiterte Konfiguration mit webClientId und iOSServerClientId, siehe die Web-Einrichtungsanleitung für die Erstellung dieser Anmeldeinformationen.
Zu offline-Modus: Wenn Sie verwenden mode: 'offline', wird der Login-Antwort nicht direkt Benutzerdaten enthalten. Stattdessen erhalten Sie einen Server-Auth-code , der gegen Benutzerinformationen über Ihren Backend-Server eingetauscht werden muss. SocialLogin.refresh({ provider: 'google' }) ist in dieser Modus nicht verfügbar; Die Aktualisierung muss auf Ihrem Backend nach dem Austausch serverAuthCodeSiehe die allgemeine Einrichtungshinweise für Implementierungsdetails.

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. Ihre App erstellen und ausführen cap sync
2. Wenn Sie alles korrekt gemacht haben, sollten Sie den Google-Login-Flow ordnungsgemäß funktionieren sehen

Bekannte Probleme

Inkompatibilität des Privacy-Screen-Plugins

Der Google-Login-Plugin ist inkompatibel mit @capacitor/privacy-screen. Wenn Sie beide Plugins gemeinsam verwenden, wird das Google-Login-Webview vom Datenschutzschirm unterbrochen.

Workaround: Rufen Sie 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: {}
});

Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Wenn Sie "Google Login on iOS" verwenden für die native Fähigkeit in Mit @capgo/capacitor-social-login Mit @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 in Zwei-Faktor-Authentifizierung.