Intégrer les SDK Firebase à votre application Web

Firebase App Hosting est un choix naturel pour les applications Web dynamiques créées avec le SDK Firebase JavaScript 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 les SDK Firebase Admin SDK et Web

Les environnements Google tels que Firebase App Hosting fournissent une initialisation d'application simplifiée 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 de Firebase et peut être très utile dans votre application Web, ainsi que du SDK Firebase JavaScript.

Avec initializeApp(), vous pouvez laisser Firebase App Hosting remplir automatiquement la configuration de l'application Web pour vous, 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 SDK Firebase JavaScript 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 également 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 qui est 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 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"}'

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 npm postinstall lorsque vous installez le SDK Firebase JavaScript. Le script postinstall 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, 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 ou votre application Web Firebase, réexécutez cette commande.

Utiliser FirebaseServerApp pour le rendu côté serveur

Si vous avez déjà utilisé le SDK JS Firebase ou d'autres SDK clients Firebase pour développer votre application Web, vous connaissez probablement l'interface FirebaseApp et savez comment l'utiliser pour configurer les instances d'application. Pour faciliter les 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 s'étendent sur la division entre le rendu côté client (CSR) et le rendu côté serveur (SSR).

Utiliser FirebaseServerApp pour :

  • Exécutez le code côté serveur dans le contexte user, contrairement à Firebase Admin SDK qui dispose de droits d'administration complets.
  • Activez l'utilisation de App Check dans les environnements SSR.
  • 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 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 backends App Hosting contre les utilisations abusives.