Introduction à l'intégration Firebase

Présentation

Ce tutoriel vous guidera dans la configuration de l'authentification Firebase avec le plugin de connexion sociale Capacitor. 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 d'authentification sociale Capacitor avec Auth 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 (Email/ Mot de passe et Google Sign-In)
   • Obtenez vos clés 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 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 :

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

L'application d'exemple démontre :

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

Un mot sur l'utilisation de Firebase SDK sur Capacitor

Lors de l'utilisation de la bibliothèque JS Firebase SDK sur Capacitor, vous devez être conscient que lors de l'utilisation des méthodes d'authentification, vous devez initialiser l'instance d'authentification Firebase un peu différemment.

Sur la plateforme web, vous utiliseriez la getAuth fonction 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, le Capacitor ne fonctionne pas et provoque un blocage de l'authentification Firebase. Comme indiqué dans ce billet de blog, vous devez utiliser la initializeAuth fonction 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();

É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 Introduction à l'intégration Firebase pour planifier l'authentification et les flux de compte, connectez-le avec Utilisation de @capgo/capacitor-login-social pour la capacité native dans Utilisation de @capgo/capacitor-login-social, @capgo/capacitor-login-social pour les détails d'implémentation dans @capgo/capacitor-login-social @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-biométrique-native pour les détails d'implémentation dans @capgo/capacitor-biométrique-native, et Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs