Google Login auf iOS

Einführung

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

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

Erstellen Sie eine iOS-Client-ID in der Google Console
1. Klicken Sie auf die Suchleiste
2. Suchen Sie nach credentials und klicken Sie auf die APIs and Services Option (Nummer 2 auf dem Screenshot)
3. Klicken Sie auf create credentials
4. Wählen Sie OAuth client ID
5. Wählen Sie den Application type auf iOS
6. Finden Sie die Bundle ID
  1. Öffnen Sie Xcode
  2. Doppelklicken Sie auf App
  3. Stellen Sie sicher, dass Sie sich bei Targets -> App befinden
  4. Finden Sie Ihre Bundle Identifier
  5. Gehen Sie zurück zur Google Console und fügen Sie Ihre Bundle Identifier in Bundle ID ein
7. Optional fügen Sie Ihre App Store ID oder Team ID zur Client-ID hinzu, wenn Sie Ihre App im App Store veröffentlicht haben
8. Nachdem Sie alle Details ausgefüllt haben, klicken Sie auf create
9. Klicken Sie auf OK
10. Öffnen Sie den neu erstellten iOS-Client
11. Kopieren Sie die folgenden Daten
  
  Die nr. 1 in diesem Bild wird später zur iOSClientId im initialize Aufruf.
  Die nr. 2 in diesem Bild wird später zu YOUR_DOT_REVERSED_IOS_CLIENT_ID
Ändern Sie die Info.plist Ihrer App
1. Öffnen Sie Xcode und finden Sie die Info.plist Datei
2. Rechtsklicken Sie auf diese Datei und öffnen Sie sie als Quellcode
3. Am Ende Ihrer Plist Datei sehen Sie ein </dict> Tag
4. Fügen Sie das folgende Fragment direkt vor dem schließenden </dict> Tag ein
```
<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 in den im vorherigen Schritt kopierten Wert
  
  Stellen Sie sicher, dass dieser Wert MIT com.googleusercontent.apps BEGINNT
6. Speichern Sie die Datei mit Command + S

Ändern Sie die AppDelegate.swift

Öffnen Sie das AppDelegate
Fügen Sie import GoogleSignIn am Anfang der Datei ein
Finden Sie die func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) Funktion

Ändern Sie die Funktion so, dass sie folgendermaßen 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)
}

Geänderte application openURL Funktion mit GoogleSignIn Verarbeitung

Speichern Sie die Datei mit Command + S

Richten Sie Google Login in Ihrem JavaScript/TypeScript Code ein

Importieren Sie SocialLogin und Capacitor

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

Rufen Sie die initialize Methode auf (dies sollte nur einmal aufgerufen werden)

Grundlegende Einrichtung (Online-Modus - empfohlen für die meisten Apps):
```
// onMounted ist Vue-spezifisch
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Standard-Modus
    }
  })
})
```
Erweiterte Einrichtung mit zusätzlichen Client-IDs:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: für Web-Plattform-Unterstützung
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Erforderlich: aus Schritt 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: gleicher Wert wie webClientId, benötigt für einige erweiterte Funktionen
      mode: 'online'                               // 'online' oder 'offline'
    }
  })
})
```
Note
Client-ID Anforderungen:
- iOSClientId: Erforderlich - Muss mit googleusercontent.com enden (aus Schritt 1 oben)
- webClientId: Optional - Nur benötigt, wenn Sie auch Web-Plattform unterstützen oder erweiterte Funktionen benötigen
- iOSServerClientId: Optional - Sollte derselbe Wert wie webClientId sein, wenn bereitgestellt
Für erweiterte Einrichtung mit webClientId und iOSServerClientId, siehe Web-Einrichtungsanleitung zur Erstellung dieser Credentials.
Über den Offline-Modus: Bei Verwendung von mode: 'offline' enthält die Login-Antwort nicht direkt Benutzerdaten. Stattdessen erhalten Sie einen Server-Auth-Code, der über Ihren Backend-Server gegen Benutzerinformationen ausgetauscht werden muss. Siehe allgemeine Einrichtungsanleitung für Implementierungsdetails.

Implementieren Sie die Login-Funktion. Erstellen Sie eine Schaltfläche und führen Sie den folgenden Code beim Klicken aus

Für Online-Modus:

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// Antwort verarbeiten - enthält Benutzerdaten
console.log(JSON.stringify(res))

Für Offline-Modus:

const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Empfohlen für Offline-Modus
  }
})
// res enthält serverAuthCode, keine Benutzerdaten
// Senden Sie serverAuthCode an Ihr Backend, um Benutzerinformationen zu erhalten
console.log('Server Auth Code:', res.result.serverAuthCode)

Testen Sie Ihre Anwendung
1. Bauen Sie Ihre App und führen Sie cap sync aus
2. Wenn Sie alles richtig gemacht haben, sollten Sie sehen, dass der Google-Login-Ablauf ordnungsgemäß funktioniert

Bekannte Probleme

Privacy Screen Plugin Inkompatibilität

Das Google Login Plugin ist inkompatibel mit @capacitor/privacy-screen. Wenn beide Plugins zusammen verwendet werden, wird die Google-Login-Webansicht durch den Datenschutzbildschirm unterbrochen.

Workaround: Rufen Sie await PrivacyScreen.disable(); auf, 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: {}
});