Intégrer les SDK Firebase à votre application Web

Firebase App Hosting est adapté aux applications Web dynamiques créées avec le SDK JavaScript Firebase et Firebase Admin SDK pour Node.js. Dans une application Web complète, les SDK Firebase tels que Authentication, Cloud Firestore et App Check jouent un rôle important. Ce guide décrit certaines stratégies clés pour vous aider à optimiser les SDK Firebase et à commencer à créer Firebase dans votre application Web sur Firebase App Hosting.

Initialiser automatiquement Firebase Admin SDK et les SDK Web

Les environnements Google tels que Firebase App Hosting fournissent une initialisation d'application simplifiée via un appel de constructeur sans argument au moment de la compilation et de l'exécution. Il s'agit d'une fonctionnalité du Firebase Admin SDK pour Node.js, un SDK côté serveur qui ouvre un large champ de fonctionnalités Firebase et peut être très utile dans votre application Web, ainsi que du SDK JavaScript Firebase.

Avec initializeApp(), vous pouvez laisser Firebase App Hosting remplir automatiquement la configuration de l'application Web, tout en conservant la possibilité de contrôler de manière précise des valeurs spécifiques si vous souhaitez remplacer les valeurs par défaut.

Initialiser sans arguments

Pour initialiser le SDK JavaScript Firebase ou Firebase Admin SDK avec des valeurs de configuration par défaut, utilisez initializeApp() sans fournir d'arguments:

Admin SDK

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

SDK JavaScript

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

Cette stratégie d'initialisation de Admin SDK fonctionne dans App Hosting, ainsi que dans d'autres environnements de serveur Google, y compris Cloud Run, App Engine et Cloud Functions. Pour le SDK JavaScript, cette stratégie fonctionne sur App Hosting.

Remplacer les valeurs renseignées automatiquement

Vous pouvez remplacer la configuration par défaut injectée automatiquement. Notez que ces options diffèrent entre le SDK Admin SDK et le SDK JavaScript.

Remplacement Admin SDK

Pour spécifier des options d'initialisation personnalisées pour des services tels que Realtime Database, Cloud Storage ou Cloud Functions, utilisez la variable d'environnement FIREBASE_CONFIG. Si le contenu de la variable FIREBASE_CONFIG commence par un caractère {, il sera analysé en tant qu'objet JSON. Sinon, le SDK suppose que la chaîne est le chemin d'accès d'un fichier JSON contenant les options.

# apphosting.yaml

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

Remplacement du SDK JavaScript

Pour remplacer les valeurs FIREBASE_WEBAPP_CONFIG par défaut que App Hosting injecte pour l'initialisation du SDK JavaScript, vous pouvez spécifier des valeurs dans 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"}'

Utiliser l'initialisation automatique dans d'autres environnements

L'initialisation automatique est configurée avec un script postinstall npm lorsque vous installez le SDK JavaScript Firebase. Le script post-installation recherche la variable d'environnement FIREBASE_WEBAPP_CONFIG, qui est définie automatiquement dans l'environnement Cloud Build App Hosting.

Si vous installez le SDK JS en dehors de Cloud Build, par exemple en local pour l'utiliser avec la suite Emulator Firebase, vous devrez définir cette variable d'environnement vous-même lorsque vous installerez le SDK JavaScript Firebase.

Pour configurer l'environnement manuellement lors de l'installation:

  1. Copiez votre objet de configuration d'application Web Firebase dans la console Firebase.

  2. Depuis un terminal, définissez la variable d'environnement FIREBASE_WEBAPP_CONFIG avant d'exécuter la commande npm install.

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

Chaque fois que vous modifiez votre projet Firebase ou votre application Web, exécutez à nouveau cette commande.

Utiliser FirebaseServerApp pour le SSR

Si vous avez travaillé avec le SDK JS Firebase ou d'autres SDK clients Firebase lors du développement de votre application Web, vous connaissez probablement l'interface FirebaseApp et la façon de l'utiliser pour configurer des instances d'application. Pour faciliter des opérations similaires côté serveur, Firebase fournit FirebaseServerApp.

FirebaseServerApp est une variante de FirebaseApp à utiliser dans les environnements de rendu côté serveur (SSR). Il inclut des outils permettant de poursuivre les sessions Firebase qui couvrent la division entre le rendu côté client (CSR) et le rendu côté serveur (SSR).

Utiliser FirebaseServerApp pour :

  • Exécuter du code côté serveur dans le contexte user, contrairement à Firebase Admin SDK, qui dispose de droits d'administrateur complets.
  • Activez l'utilisation de App Check dans les environnements SSR.
  • Poursuite d'une session Firebase Auth créée dans le client.

Pour en savoir plus sur l'utilisation de FirebaseServerApp à ces fins, consultez Utiliser Firebase dans des applications Web dynamiques avec SSR.

Activer App Check dans votre application Web

Vous pouvez utiliser App Check pour renforcer la sécurité de votre application Web dynamique sur App Hosting. En implémentant certaines des stratégies côté serveur spécifiques décrites dans Utiliser Firebase dans des applications Web dynamiques avec SSR, vous pouvez protéger vos backend App Hosting contre les utilisations abusives.