Passer au contenu
Capgo

Introduction à l'Intégration Firebase

Aperçu

Section titled “Aperçu”

Ce tutoriel vous guidera dans la configuration de Firebase Authentication avec le plugin Capacitor Social Login. Cette intégration vous permet d’utiliser des fournisseurs de connexion sociale natifs (Google, Apple, Facebook, Twitter) sur les plateformes mobiles tout en tirant parti de Firebase Auth pour l’authentification backend et Firestore pour le stockage de données.

Ce que vous apprendrez

Section titled “Ce que vous apprendrez”
  • Comment configurer Firebase Authentication
  • Comment intégrer le plugin Capacitor Social Login avec Firebase Auth
  • Configuration spécifique à la plateforme pour Android, iOS et Web

Ce dont vous aurez besoin

Section titled “Ce dont vous aurez besoin”

Avant de commencer, assurez-vous d’avoir :

  1. Un projet Firebase

    • Créez un projet sur Firebase Console
    • Activez Authentication (Email/Password et connexion Google)
    • Obtenez vos identifiants de configuration Firebase

  2. Firebase JS SDK

    • Installez Firebase dans votre projet :
      Terminal window
      npm install firebase

  3. Un projet Capacitor

    • Une application Capacitor existante
    • Plugin Capacitor Social Login installé :
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

Application Exemple

Section titled “Application Exemple”

Un exemple complet et fonctionnel est disponible dans le dépôt :

Dépôt de code : Vous pouvez trouver le dépôt de code ici

L’application exemple démontre :

  • Authentification par email/mot de passe avec Firebase
  • Intégration de la connexion Google (Android, iOS et Web)
  • Un simple magasin clé-valeur utilisant les collections Firebase Firestore
  • Stockage de données spécifiques à l’utilisateur dans les sous-collections Firestore

Un mot sur l’utilisation du SDK Firebase sur Capacitor

Section titled “Un mot sur l’utilisation du SDK Firebase sur Capacitor”

Lors de l’utilisation du SDK Firebase JS sur Capacitor, vous devez savoir que lorsque vous utilisez les méthodes d’authentification, vous devez initialiser l’instance Firebase Auth un peu différemment.

Sur la plateforme web, vous utiliseriez la fonction getAuth pour obtenir l’instance Firebase Auth.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';


const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

Malheureusement, sur Capacitor, cela ne fonctionne pas et provoque le blocage de Firebase auth. Comme indiqué dans cet article de blog, vous devez utiliser la fonction initializeAuth pour initialiser l’instance Firebase Auth. Cela ressemble à ceci :

import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';


const app = initializeApp(firebaseConfig);


function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}


export const auth = whichAuth();

Prochaines Étapes

Section titled “Prochaines Étapes”

Continuez avec les guides de configuration :