Passer au contenu
Capgo - Live Updates for Capacitor Apps Capgo

Firebase Introduction à l'intégration

Aperçu

Section titled “Aperçu”

Ce didacticiel vous guidera dans la configuration de l’authentification Firebase avec le plugin de connexion sociale Capacitor. 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 de Firestore pour le stockage des données.

Ce que vous apprendrez

Section titled “Ce que vous apprendrez”
  • Comment configurer l’authentification Firebase
  • Comment intégrer le plugin Capacitor Social Login avec Firebase Auth
  • Configuration spécifique à la plate-forme 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
    • Activer l’authentification (e-mail/mot de passe et connexion Google)
    • Obtenez vos informations 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
    • Capacitor Plugin de connexion sociale installé :
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

Exemple d’application

Section titled “Exemple d’application”

Un exemple de travail complet est disponible dans le référentiel :

Dépôt de code : Vous pouvez trouver le référentiel de code ici

L’exemple d’application montre :

  • Authentification email/mot de passe avec Firebase
  • Intégration de 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 Firebase SDK sur Capacitor

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

Lorsque vous utilisez le Firebase JS SDK sur Capacitor, vous devez être conscient que lorsque vous utilisez les méthodes d’authentification, vous devez initialiser l’instance d’authentification Firebase un peu différemment.

Sur la plateforme Web, vous utiliserez la fonction getAuth pour obtenir l’instance d’authentification Firebase.

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 l’authentification Firebase. Comme indiqué dans ce billet de blog, vous devez utiliser la fonction initializeAuth pour initialiser l’instance d’authentification Firebase. 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 :