Integrare gli SDK Firebase con l'app web

Firebase App Hosting è ideale per le app web dinamiche create con l'SDK Firebase JavaScript e Firebase Admin SDK per Node.js. In un'app web completa, gli SDK Firebase come Authentication, Cloud Firestore e App Check svolgono ruoli importanti. Questa guida descrive alcune strategie chiave per ottimizzare gli SDK Firebase e iniziare a integrare Firebase nella tua app web su Firebase App Hosting.

Inizializza automaticamente gli SDK Firebase Admin SDK e web

Gli ambienti Google come Firebase App Hosting forniscono un'inizializzazione dell'app semplificata tramite una chiamata al costruttore senza argomenti in fase di compilazione e di esecuzione. Questa è una funzionalità sia di Firebase Admin SDK per Node.js, un SDK lato server che sblocca una vasta area di funzionalità di Firebase e può essere molto utile nella tua app web, sia dell'SDK Firebase JavaScript.

Con initializeApp(), puoi lasciare che Firebase App Hosting completi automaticamente la configurazione dell'app web, mantenendo comunque la possibilità di avere un controllo granulare su valori specifici se vuoi sostituire i valori predefiniti.

Inizializzazione senza argomenti

Per inizializzare l'SDK Firebase JavaScript o Firebase Admin SDK con i valori di configurazione predefiniti, utilizza initializeApp()senza specificare alcun argomento:

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

SDK JavaScript

import { initializeApp } from 'firebase/app';
const app = initializeApp();

Questa strategia per l'inizializzazione di Admin SDK funziona in App Hosting e anche in altri ambienti di server Google, tra cui Cloud Run, App Engine e Cloud Functions. Per l'SDK JavaScript, questa strategia funziona su App Hosting.

Sostituire i valori compilati automaticamente

Puoi ignorare la configurazione predefinita iniettata automaticamente. Tieni conto che queste opzioni sono diverse tra l'SDK Admin SDK e l'SDK JavaScript.

Admin SDK override

Per specificare facoltativamente opzioni di inizializzazione personalizzate per servizi come Realtime Database, Cloud Storage o Cloud Functions, utilizza la variabile di ambiente FIREBASE_CONFIG. Se i contenuti della variabile FIREBASE_CONFIG iniziano con un carattere {, verranno analizzati come oggetto JSON. In caso contrario, l'SDK assume che la stringa sia il percorso di un file JSON contenente le opzioni.

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'

Sostituzione dell'SDK JavaScript

Per eseguire l'override dei valori FIREBASE_WEBAPP_CONFIG predefiniti che App Hosting inserisce per l'inizializzazione dell'SDK JavaScript, puoi specificare i valori in apphosting.yaml:

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

Utilizzo dell'inizializzazione automatica in altri ambienti

L'inizializzazione automatica viene configurata con uno script postinstall npm quando installi l'SDK Firebase JavaScript. Lo script di postinstallazione cerca la variabile di ambiente FIREBASE_WEBAPP_CONFIG, che viene impostata automaticamente nell'ambiente Cloud Build App Hosting.

Se installi l'SDK JS al di fuori di Cloud Build, ad esempio localmente per l'utilizzo con la suite di emulatori Firebase, dovrai impostare questa variabile di ambiente autonomamente quando installi l'SDK Firebase JavaScript.

Per configurare manualmente l'ambiente durante l'installazione:

  1. Copia l'oggetto di configurazione dell'app web Firebase dalla Console Firebase.

  2. Da un terminale, imposta la variabile di ambiente FIREBASE_WEBAPP_CONFIG prima di eseguire il comando npm install.

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

Ogni volta che modifichi il progetto o l'app web Firebase, esegui di nuovo questo comando.

Utilizzare FirebaseServerApp per SSR

Se hai utilizzato l'SDK Firebase JS o altri SDK client Firebase per lo sviluppo della tua app web, probabilmente conosci l'FirebaseApp interfaccia e come utilizzarla per configurare le istanze dell'app. Per facilitare operazioni simili lato server, Firebase fornisce FirebaseServerApp.

FirebaseServerApp è una variante di FirebaseApp da utilizzare negli ambienti di rendering lato server (SSR). Include strumenti per continuare le sessioni Firebase che coprono la divisione tra il rendering lato client (CSR) e il rendering lato server (SSR).

Usa FirebaseServerApp per:

  • Esegui il codice lato server nel contesto utente, diversamente da Firebase Admin SDK che dispone dei diritti di amministrazione completi.
  • Attiva l'uso di App Check negli ambienti SSR.
  • Continuare una sessione di Firebase Auth creata nel client.

Per informazioni dettagliate sull'utilizzo di FirebaseServerApp per queste finalità, consulta Utilizzare Firebase nelle app web dinamiche con SSR.

Attivare App Check nell'app web

Puoi utilizzare App Check per rafforzare la sicurezza della tua app web dinamica su App Hosting. Implementando alcune delle strategie specifiche lato server descritte in Utilizzare Firebase nelle app web dinamiche con SSR, puoi proteggere i tuoi backend App Hosting da comportamenti illeciti.