Introduzione all'integrazione di Firebase

Panoramica

Questa guida ti guiderà attraverso la configurazione dell'autenticazione Firebase con il plugin di accesso sociale Capacitor. Questa integrazione consente di utilizzare i provider di accesso sociale nativi (Google, Apple, Facebook, Twitter) sui piattaforme mobili, mentre si utilizza l'autenticazione Firebase per l'autenticazione backend e Firestore per lo storage dei dati.

Cosa Imparerai

• Come configurare l'autenticazione Firebase
• Come integrare il plugin di accesso sociale Capacitor con l'autenticazione Firebase
• Configurazione specifica per piattaforma per Android, iOS e Web

Cosa Hai Bisogno

Prima di iniziare, assicurati di avere:

1. Un Progetto Firebase

   • Crea un progetto su Console Firebase
   • Abilita l'Autenticazione (Email/Password e Google Sign-In)
   • Ottieni le credenziali di configurazione Firebase

2. Firebase JS SDK

   • Installa Firebase nel tuo progetto:

     npm install firebase

3. Un Progetto Capacitor

   • Un'applicazione esistente Capacitor
   • Capacitor plugin di accesso sociale installato:

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

Esempio di applicazione

Un esempio di applicazione completo e funzionante è disponibile nel repository:

Code Repository: Puoi trovare il repository code qui

L'applicazione di esempio dimostra:

• L'autenticazione tramite email e password con Firebase
• L'integrazione di Google Sign-In (Android, iOS e Web)
• A un semplice archivio di chiavi-valori utilizzando le raccolte di Firestore di Firebase
• La memorizzazione dei dati specifici dell'utente nelle sottoraccolte di Firestore

Una parola su come utilizzare il Firebase SDK sul Capacitor

Quando si utilizza il Firebase JS SDK sul Capacitor, è necessario essere consapevoli che quando si utilizzano i metodi di autenticazione, è necessario inizializzare l'istanza di autenticazione Firebase in modo leggermente diverso.

Sul piattaforma web, si utilizza la getAuth funzione per ottenere l'istanza di autenticazione Firebase.

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

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

Purtroppo, sul Capacitor, questo non funziona e causa l'attesa di Firebase auth. Come riportato in questo post del blog, è necessario utilizzare la initializeAuth funzione per inizializzare l'istanza di autenticazione Firebase. Ciò si presenta come segue:

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();

Esegui i passaggi successivi

Continua con le guide di configurazione:

• Configurazione di Firebase - Configura il progetto di Firebase
• Configurazione per Android - Configurazione specifica per Android
• Configurazione per iOS - Configurazione specifica per iOS
• Configurazione per Web - Configurazione specifica per Web

Continua dall'Introduzione all'integrazione di Firebase

Se stai utilizzando L'introduzione all'integrazione di Firebase per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-login-social per la capacità nativa in Utilizzando @capgo/capacitor-login-social Utilizzando @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social Utilizzando @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey Utilizzando @capgo/capacitor-biometrica-nativa per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.