Google-Anmeldung auf iOS

GitHub

Kopieren Sie einen Einrichtungsbefehl mit den Installationsanweisungen und der vollständigen Markdown-Guide für diese Erweiterung.

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 Einrichtungshilfe.

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

Erstellen Sie einen iOS-Kundenidentifikator im Google-Konsolen
1. Klicken Sie auf die Suchleiste
2. Suchen Sie nach credentials und klicken Sie auf die APIs and Services eine (Zahl 2 auf dem Screenshot)
3. Klicken Sie auf die create credentials
4. Auswählen OAuth client ID
5. Wählen Sie die 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 im Targets -> App
  4. Finden Sie Ihr Bundle Identifier
  5. Gehen Sie zurück zur Google-Konsole und fügen Sie Ihren Bundle Identifier in Bundle ID
7. Optional, fügen Sie Ihren App Store ID oder Team ID in das Client-ID-Feld, wenn Sie Ihre App bereits 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-Kunden
11. Kopieren Sie die folgenden Daten
  
  In diesem Bild wird später der nr. 1 in diesem Bild wird später der iOSClientId Aufruf. initialize In diesem Bild wird später der
  in diesem Bild wird später der nr. 2 Aufruf. YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ändern Sie die Info.plist 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 Quellcode code
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 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 die 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 die Datei mit Command + S

Setup Google login in your JavaScript/TypeScript code
1. Importieren SocialLogin und Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Rufen Sie die Methode initialize auf (dies sollte nur einmal aufgerufen werden)
  
  Grundlegende Konfiguration (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
  Anforderungen an den Client-Id:
  - iOSClientId: Werkspezifik - 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 fortgeschrittene Einrichtung mit webClientId und iOSServerClientId, sehen Sie sich die Web-Einrichtungsanleitung an Achten Sie auf die Erstellung dieser Zugriffsberechtigungen.
  Über Offline-Modus: Wenn Sie mode: 'offline', wird der Login-Antwort nicht direkt Benutzerdaten enthalten. Stattdessen erhalten Sie einen Server-Authorisierungstoken code , das für Benutzerinformationen über Ihren Backend-Server ausgetauscht werden muss. SocialLogin.refresh({ provider: 'google' }) ist in dieser Modus nicht verfügbar; der Refresh muss auf Ihrem Backend nach dem Austausch erfolgen. Siehe das serverAuthCodeallgemeine Setup-Leitfaden für Implementierungsdetails. Implementieren Sie die Login-Funktion. Erstellen Sie einen Button und führen Sie folgenden __CAPGO_KEEP_0__ auf Klick aus
3. Implement the login function. Create a button and run the following code on click
  
  For online mode:
```
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 dem @capacitor/privacy-screenWenn Sie beide Plugins gemeinsam verwenden, wird die Google-Login-Webview durch den Privacy-Screen unterbrochen.

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

Wenn Sie 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, @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.