__CAPGO_KEEP_0__

Panoramica

Questa guida vi 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) sui 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 Avrai Bisogno

Prima di iniziare, assicurati di avere:

1. Un Progetto Firebase

   • Crea un progetto su Console 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 esistente Capacitor
   • Capacitor Login con social media installato:

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

Esempio di applicazione

Un esempio di applicazione completo e funzionante è disponibile nel repository:

Code Repository: Puoi trovare il repository code qui

L'applicazione di esempio dimostra:

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

Nel 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 di Firebase - Configura il progetto di Firebase
• Configurazione per Android - Configurazione specifica per Android
• Configurazione per iOS - Configurazione specifica per iOS
• Configurazione per Web - Configurazione specifica per Web

Prosegui dall'introduzione all'integrazione di Firebase

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