Introduzione all'integrazione Firebase

Panoramica

Questa guida ti guiderà attraverso la configurazione dell'autenticazione Firebase con il plugin di login sociale Capacitor. Questa integrazione consente di utilizzare i provider di login 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

• How to configure Firebase Authentication
• How to integrate Capacitor Plugin di accesso sociale con Firebase Auth
• Configurazione specifica per piattaforma per Android, iOS e Web

Cosa avrai 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. Configurazione JS Firebase SDK

   • Installa Firebase nel tuo progetto:

     npm install firebase

3. Un progetto Capacitor

   • Un'applicazione Capacitor esistente
   • Il plugin di accesso Capacitor Social installato:

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

Esempio di applicazione

Un esempio di lavoro completo è disponibile nel repository:

Code Repository: Puoi trovare il repository code qui

L'applicazione di esempio dimostra:

• Autenticazione email/parola con Firebase
• Integrazione di Google Sign-In (Android, iOS e Web)
• Un semplice archivio di valori chiave utilizzando le raccolte di Firestore di Firebase
• Archiviazione di 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 essere consapevoli che quando si utilizzano i metodi di autenticazione, è necessario inizializzare l'istanza di autenticazione di Firebase in modo leggermente diverso.

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

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

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

Purtroppo, su Capacitor, questo non funziona e causa l'auth di Firebase di bloccarsi. Come riportato nel questo post del blog, è necessario utilizzare il initializeAuth funzione per inizializzare l'istanza di autenticazione di Firebase. Questo ha l'aspetto di:

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

Passaggi successivi

Continua con le guide di configurazione:

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

Continua dall'introduzione all'integrazione di Firebase

Se stai utilizzando 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, @capgo/capacitor-login-social per i dettagli di implementazione in @capgo/capacitor-login-social, @capgo/capacitor-passkey, per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-biometric-nativo, per i dettagli di implementazione in @capgo/capacitor-biometric-nativo, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.