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, sfruttando 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 Serve

Prima di iniziare, assicurati di avere:

1. Un progetto Firebase

   • Crea un progetto a 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 accesso sociale Capacitor installato:

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

Esempio di applicazione

È disponibile un esempio completo e funzionante nel repository:

Code Repository: Puoi trovare il code repository qui

L'applicazione di esempio dimostra:

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

Sul piattaforma web, si utilizzerebbe il getAuth funzione per ottenere l'istanza di Firebase Auth.

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'attesa di Firebase auth. Come riportato in questo post del blog, è necessario utilizzare la initializeAuth funzione per inizializzare l'istanza di Firebase Auth. 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();

Passaggi successivi

Continua con le guide di configurazione:

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

Prosegui dall'introduzione all'integrazione Firebase

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