Introduzione all'Integrazione 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) sulle 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 di 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 Capacitor esistente
   • Il plugin di Social Login Capacitor installato:

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

Esempio di applicazione

Esempio completo e funzionante disponibile nel repository:

Code Repository: Troverai il code repository qui

L'applicazione di esempio dimostra:

• L'autenticazione tramite email e password con Firebase
• L'integrazione di Google Sign-In (Android, iOS e Web)
• Un semplice archivio chiave-valore utilizzando le raccolte Firestore di Firebase
• L'archiviazione dei dati specifici dell'utente nelle sottoraccolte di Firestore

Una parola su come utilizzare il Firebase SDK su Capacitor

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

On il piattaforma web, utilizzerebbe 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);

Infelizemente, su Capacitor, questo non funziona e causa l'attesa di autenticazione Firebase. Come riportato in questo post del blog, è necessario utilizzare la initializeAuth funzione per inizializzare l'istanza di autenticazione Firebase. Questo assomiglia a questo:

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

Next Steps

Continua con le guide di configurazione:

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

Continua dall'Introduzione all'integrazione Firebase

Se stai utilizzando Introduzione all'integrazione Firebase per pianificare l'autenticazione e i flussi di account, connettilo con Utilizzando @capgo/capacitor-login sociale per la capacità nativa in Utilizzando @capgo/capacitor-login sociale @capgo/capacitor-login sociale per il dettaglio di implementazione in @capgo/capacitor-login sociale @capgo/capacitor-chiave di accesso per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-autenticazione biometrica nativa per il dettaglio di implementazione in @capgo/capacitor-autenticazione biometrica nativa, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.