Vai al contenuto
Capgo

Introduzione all'integrazione Firebase

Panoramica

Section titled “Panoramica”

Questo tutorial ti guiderà attraverso la configurazione di Firebase Authentication con il plugin Capacitor Social Login. Questa integrazione ti consente di utilizzare provider di login social nativi (Google, Apple, Facebook, Twitter) su piattaforme mobili sfruttando Firebase Auth per l’autenticazione backend e Firestore per l’archiviazione dei dati.

Cosa imparerai

Section titled “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

Section titled “Cosa ti serve”

Prima di iniziare, assicurati di avere:

  1. Un progetto Firebase

    • Crea un progetto sulla Console Firebase
    • Abilita Authentication (Email/Password e Google Sign-In)
    • Ottieni le credenziali di configurazione Firebase

  2. Firebase JS SDK

    • Installa Firebase nel tuo progetto:
      Terminal window
      npm install firebase

  3. Un progetto Capacitor

    • Un’applicazione Capacitor esistente
    • Plugin Capacitor Social Login installato:
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

Applicazione di esempio

Section titled “Applicazione di esempio”

Un esempio completo e funzionante è disponibile nel repository:

Repository del codice: Puoi trovare il repository del codice qui

L’app di esempio dimostra:

  • Autenticazione con email/password utilizzando Firebase
  • Integrazione di Google Sign-In (Android, iOS e Web)
  • Un semplice archivio chiave-valore utilizzando le collezioni Firebase Firestore
  • Archiviazione dati specifica per utente nelle sottocollezioni Firestore

Una nota sull’uso dell’SDK Firebase su Capacitor

Section titled “Una nota sull’uso dell’SDK Firebase su Capacitor”

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

Sulla piattaforma web, utilizzeresti la funzione getAuth per ottenere l’istanza Firebase Auth.

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


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

Sfortunatamente, su Capacitor, questo non funziona e causa il blocco di Firebase auth. Come indicato in questo post del blog, è necessario utilizzare la funzione initializeAuth per inizializzare l’istanza Firebase Auth. Questo appare così:

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 passaggi

Section titled “Prossimi passaggi”

Continua con le guide di configurazione: