Passer au contenu
Capgo

Connexion Google Firebase sur Web

Introduction

Section titled “Introduction”

Le plugin Capacitor Social Login ne prend pas en charge les plateformes web. Pour les applications web, vous devez utiliser directement la connexion Google intégrée de Firebase, qui fournit un flux d’authentification basé sur des popups plus fiable.

Pourquoi ne pas utiliser le plugin sur Web ?

Section titled “Pourquoi ne pas utiliser le plugin sur Web ?”

Le plugin Capacitor Social Login est conçu pour les plateformes mobiles natives (Android et iOS) où il peut exploiter les flux d’authentification spécifiques à la plateforme. Pour le web, la méthode native signInWithPopup de Firebase est :

  • ✅ Plus fiable et mieux supportée
  • ✅ Gère automatiquement le stockage de session du navigateur
  • ✅ Offre une meilleure gestion des erreurs
  • ✅ Ne nécessite aucune configuration supplémentaire

Étapes de Configuration

Section titled “Étapes de Configuration”

  1. Configurer le projet Firebase

    Assurez-vous que votre projet Firebase a la connexion Google activée :

    • Allez sur Firebase Console
    • Naviguez vers Authentication > Sign-in method
    • Activez le fournisseur de connexion Google

  2. Ajoutez vos domaines autorisés

    1. Accédez à l’aperçu de votre projet sur console.cloud.google.com Firebase Project Overview
    2. Ouvrez le menu Authentication Firebase Authentication Menu
    3. Cliquez sur le bouton Settings Firebase Authentication Sign-in Method Button
    4. Configurez les Authorized domains Firebase Authentication Settings Authorized Domains

Exemple d’Implémentation

Section titled “Exemple d’Implémentation”

Consultez le fichier authUtils.ts dans l’application exemple pour une implémentation complète qui :

  • Utilise signInWithPopup de Firebase pour les plateformes web
  • Utilise le plugin Capacitor Social Login pour les plateformes Android/iOS
  • Gère automatiquement la détection de plateforme

L’exemple montre comment utiliser conditionnellement la méthode intégrée de Firebase pour le web tout en utilisant le plugin pour les plateformes natives.

Ressources Supplémentaires

Section titled “Ressources Supplémentaires”