Integrare gli SDK Firebase con l'app web

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

Inizializzare automaticamente Firebase Admin SDK e gli SDK web

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

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

Inizializzare senza argomenti

Per inizializzare l'SDK Firebase Admin SDK o l'SDK Firebase JavaScript con i valori di configurazione predefiniti, utilizza initializeApp() senza fornire argomenti.

Admin SDK

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

Per Admin SDK, questa strategia di inizializzazione funziona in App Hosting e in altri ambienti server Google, tra cui Cloud Run, App Engine, e Cloud Run Functions.

SDK JavaScript

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

Per l'SDK JavaScript, questa strategia di inizializzazione funziona in App Hosting.

Sostituire i valori compilati automaticamente

Puoi sostituire la configurazione predefinita inserita automaticamente. Tieni presente che queste opzioni differiscono tra l'Admin SDK e l'SDK JavaScript.

Admin SDK sostituzione

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 il contenuto della variabile FIREBASE_CONFIG inizia con un carattere {, verrà analizzato come oggetto JSON. In caso contrario, l'SDK presuppone 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 sostituire i 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"}'

Utilizzare l'inizializzazione automatica in altri ambienti

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

Se installi l'SDK JS al di fuori di Cloud Build, dovrai impostare questa variabile di ambiente 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 Firebase o l'app web, esegui di nuovo questo comando. Potrebbe essere necessario cancellare anche le cache intermedie (ad es. .next/cache).

Utilizzare FirebaseServerApp per il rendering lato server

Se hai lavorato con l'SDK Firebase JS o altri SDK client Firebase nello sviluppo della tua app web, probabilmente conosci l'interfaccia FirebaseApp 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 si estendono alla divisione tra rendering lato client (CSR) e rendering lato server.

Utilizza FirebaseServerApp per:

  • Eseguire codice lato server nel contesto utente, a differenza di Firebase Admin SDK che dispone di diritti amministrativi completi.
  • Consentire l'utilizzo di App Check negli ambienti di rendering lato server.
  • Continuare una sessione di autenticazione Firebase creata nel client.

Per informazioni dettagliate sull'utilizzo di FirebaseServerApp per questi scopi, consulta Utilizzare Firebase in app web dinamiche con il rendering lato server.

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 lato server specifiche descritte in Utilizzare Firebase in app web dinamiche con il rendering lato server, puoi proteggere i App Hosting backend da utilizzi illeciti.