Introduction à l'intégration Firebase

Résumé

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

Ce que vous apprendrez

• Comment configurer l'authentification Firebase
• Comment intégrer le plugin Capacitor de connexion sociale 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 à Console Firebase
   • 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 :

     npm install firebase

3. Un projet Capacitor

   • Une application Capacitor existante
   • Le plugin de connexion sociale Capacitor est installé :

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

Application d'exemple

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

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

L'application d'exemple démontre :

• L'authentification par courriel/ mot de passe avec Firebase
• L'intégration de l'inscription Google (Android, iOS et Web)
• Un stockage de clés de valeurs simple en utilisant les collections Firestore de Firebase
• Le stockage de données spécifiques à l'utilisateur dans les sous-collecteurs Firestore

Un mot sur l'utilisation du 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);

Désolé, sur Capacitor, cela ne fonctionne pas et fait planter l'authentification Firebase. Comme indiqué dans ce billet de blog, vous devez utiliser la initializeAuth fonction pour initialiser l'instance Firebase Auth. Cela ressemble à cela :

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 Firebase - Configurez le projet Firebase
• Configuration Android - Configuration spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Configuration Web - Configuration spécifique au Web

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

Si vous utilisez Intégration Firebase Introduction pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-login-social pour la capacité native dans En utilisant @capgo/capacitor-login-social, @capgo/capacitor-login-social pour le détail d'implémentation dans @capgo/capacitor-login-social, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-biométrique-natif pour le détail d'implémentation dans @capgo/capacitor-biométrique-natif, et Deux facteurs d'authentification pour le détail d'implémentation dans Deux facteurs d'authentification.