Intégrer les SDK Firebase à votre application Web

Firebase App Hosting est une solution naturelle pour les applications Web dynamiques créées avec le Firebase JavaScript SDK 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 quelques stratégies clés pour vous aider à optimiser les SDK Firebase et à commencer à intégrer 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 simplifient l'initialisation des applications grâce à 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 débloque une grande partie des fonctionnalités Firebase et peut être très utile dans votre application Web) et du Firebase JavaScript SDK.

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

Initialiser sans arguments

Pour initialiser le Firebase Admin SDK ou le Firebase JavaScript 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();

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

SDK JavaScript

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

Pour le SDK JavaScript, cette stratégie d'initialisation fonctionne dans App Hosting.

Remplacer les valeurs remplies automatiquement

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

Admin SDK remplacer

Pour spécifier éventuellement 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 correspond au 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"}'

Remplacer le SDK JavaScript

Pour remplacer les valeurs par défaut FIREBASE_WEBAPP_CONFIG qu'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 Firebase JavaScript. Le postinstall script recherche la variable d'environnement FIREBASE_WEBAPP_CONFIG, qui est définie automatiquement dans l'environnement App Hosting Cloud Build.

Si vous installez le SDK JS en dehors de Cloud Build, vous devrez définir vous-même cette variable d'environnement lorsque vous installerez le SDK Firebase JavaScript.

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

  1. Copiez l'objet de configuration de votre application Web Firebase depuis 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. Vous devrez peut-être également effacer les caches intermédiaires (comme .next/cache).

Utiliser FirebaseServerApp pour le rendu côté serveur

Si vous avez utilisé le SDK Firebase JS ou d'autres SDK client Firebase lors du développement de votre application Web, vous connaissez probablement l'interface FirebaseApp et savez comment 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. Il inclut des outils permettant de poursuivre les sessions Firebase qui couvrent la division entre le rendu côté client et le rendu côté serveur.

Utilisez FirebaseServerApp pour :

  • exécuter du code côté serveur dans le contexte utilisateur, contrairement au Firebase Admin SDK qui dispose de droits d'administration complets ;
  • activer l'utilisation de App Check dans les environnements de rendu côté serveur ;
  • poursuivre 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 le rendu côté serveur.

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 mettant en œuvre certaines des stratégies spécifiques côté serveur décrites dans Utiliser Firebase dans des applications Web dynamiques avec le rendu côté serveur, vous pouvez protéger vos App Hosting backends contre les utilisations abusives.