Introduction à l'intégration Firebase

Vue d'ensemble

Cet tutoriel vous guidera à travers 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 exploitant l'authentification Firebase pour l'authentification côté serveur et Firestore pour le stockage de données.

Ce que vous apprendrez

• Comment configurer l'authentification Firebase
• Comment intégrer le plugin de connexion sociale Capacitor avec l'authentification Firebase
• Paramètres spécifiques à la plateforme pour Android, iOS et Web

Ce dont vous aurez besoin

Avant de commencer, assurez-vous d'avoir :

1. Un projet Firebase

   • Créez un projet sur Console Firebase
   • Activez l'authentification (e-mail/ mot de passe et Google Sign-In)
   • Obtenez vos informations de configuration Firebase

2. Firebase JS SDK

   • Installez Firebase dans votre projet :

     npm install firebase

3. Un projet Capacitor

   • Une application Capacitor existante
   • Capacitor Plugin de connexion sociale installé :

     npm install @capgo/capacitor-social-login
     npx cap sync

Application d'Exemple

Un exemple de travail complet est disponible dans le dépôt.

Code Repository: Vous pouvez trouver le dépôt code ici

Vous pouvez trouver le dépôt __CAPGO_KEEP_0__ ici

• L'application d'exemple démontre :
• L'authentification par courriel/ mot de passe avec Firebase
• Un stockage de clés-valeurs simple utilisant les collections Firestore Firebase.
• Stockage de données utilisateur dans des souscollections Firestore

Un mot sur l'utilisation de Firebase SDK sur Capacitor

Lors de l'utilisation de Firebase JS SDK sur Capacitor, vous devez être conscient que lors de l'utilisation des méthodes d'authentification, vous devez initialiser l'instance Firebase Auth de manière légèrement différente.

Sur la plateforme web, vous utiliseriez la getAuth fonction 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 fait planter Firebase auth. Comme indiqué dans ce billet de blogvous devez utiliser la initializeAuth fonction 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();

Étapes suivantes

Continuez avec les guides de configuration :

• Configuration de Firebase - Configuration du projet Firebase
• Configuration Android - Configuration spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Configuration Web - Configuration spécifique à Web

Continuez de l'Introduction à l'intégration Firebase

Si vous utilisez l'introduction à l'intégration Firebase pour planifier l'authentification et les flux de compte, connectez-l’avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login En utilisant @capgo/capacitor-social-login pour le détail d'implémentation dans En utilisant @capgo/capacitor-social-login En utilisant @capgo/capacitor-passkey pour le détail d'implémentation dans En utilisant @capgo/capacitor-passkey En utilisant @capgo/capacitor-native-biometric pour le détail d'implémentation dans En utilisant @capgo/capacitor-native-biometric Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.