Introduzione all'integrazione Firebase

Panoramica

Questo tutorial ti guiderà nella configurazione di Firebase Authentication con il plugin Capacitor Social Login. Questa integrazione ti permette di usare i provider di social login nativi (Google, Apple, Facebook, Twitter) su piattaforme mobile, sfruttando Firebase Auth per l'autenticazione backend e Firestore per lo storage dei dati.

Cosa imparerai

• Come configurare Firebase Authentication
• Come integrare il plugin Capacitor Social Login con Firebase Auth
• Configurazione specifica per Android, iOS e Web

Cosa ti serve

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. SDK JS di Firebase SDK

   • Installa Firebase nel tuo progetto:

     npm install firebase

3. Un progetto Capacitor

   • Un'applicazione Capacitor esistente
   • Plugin Capacitor Social Login installato:

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

Applicazione di esempio

Un esempio completo e funzionante è disponibile nel repository:

Repository Code: Puoi trovare il repository code qui

L'app di esempio mostra:

• Autenticazione email/password con Firebase
• Integrazione Google Sign-In (Android, iOS e Web)
• Un semplice key-value store basato sulle collezioni di Firebase Firestore
• Salvataggio dei dati per utente nelle subcollezioni di Firestore

Una nota sull'uso del SDK di Firebase su Capacitor

Quando usi il SDK JS di Firebase su Capacitor, tieni presente che con i metodi di autenticazione devi inizializzare l'istanza di Firebase Auth in modo leggermente diverso.

Sulla piattaforma web, useresti la 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 il blocco di Firebase auth. Come spiegato in questo post sul blog, devi usare la initializeAuth funzione per inizializzare l'istanza di Firebase Auth. Ecco come appare:

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

Prossimi passi

Continua con le guide di configurazione:

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

Continua da Introduzione all'integrazione Firebase

Se stai usando Introduzione all'integrazione Firebase per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.