Firebase Google-Anmeldung auf der Webseite

Einführung

Das Capacitor Social Login-Plugin unterstützt keine WebplattformenFür Webanwendungen sollten Sie Firebase’s eingebauten Google-Sign-In direkt verwenden, der eine zuverlässigere popup-basierte Authentifizierungsablauf bietet.

Warum das Plugin auf Web nicht verwenden?

Das Capacitor Social Login-Plugin ist für native mobile Plattformen (Android und iOS) konzipiert, wo es sich auf plattform-spezifische Authentifizierungsabläufe verlassen kann. Für Webanwendungen sollte Firebase’s native verwendet werden signInWithPopup Methode ist:

• ✅ Zuverlässiger und besser unterstützt
• ✅ Browser-Sitzungs-Speicher automatisch handhabt
• ✅ Bessere Fehlerbehandlung bietet
• ✅ Keine zusätzliche Konfiguration erforderlich

Setup-Schritte

1. Firebase-Projekt konfigurieren

   Stellen Sie sicher, dass Ihr Firebase-Projekt Google-Sign-In aktiviert hat:

   • Zu Firebase-Konsole
   • Navigieren Sie zu Authentifizierung > Anmeldemethode
   • Google-Anmelden-Anbieter aktivieren

2. Fügen Sie Ihre autorisierten Domains hinzu

   1. Gehe zu deinem Projektüberblick auf console.cloud.google.com
   2. Öffne das Authentication Menü
   3. Klicke auf den Settings Button
   4. Konfiguriere die Authorized domains

Beispiel-Implementierung

Siehe das authUtils.ts Datei im Beispiel-App für eine vollständige Implementierung, die:

• Firebase’s signInWithPopup für Web-Plattformen verwendet
• Verwendet den Capacitor Social-Login-Plugin für Android/iOS-Plattformen
• Automatisch die Plattformdetektion handhabt

Das Beispiel zeigt, wie Firebase’s eingebaute Methode für Web-Plattformen bedingt verwendet werden kann, während der Plugin für native Plattformen verwendet wird

Zusätzliche Ressourcen

• Dokumentation zur Firebase-Authentifizierung - Vollständige Dokumentation zur Firebase-Authentifizierung
• Firebase Google-Anmelden für Web - Offizielle Firebase-Anleitung für Google-Anmelden auf Web
• Anleitung zum Google-Anmelden-Setup - Anleitung zur Konfiguration von autorisierten Domains und OAuth-Konsent-Screen