Mengintegrasikan Firebase SDK dengan aplikasi web Anda

Firebase App Hosting sangat cocok untuk aplikasi web dinamis yang dibuat dengan Firebase JavaScript SDK dan Firebase Admin SDK untuk Node.js. Dalam aplikasi web yang lengkap, SDK Firebase seperti Authentication, Cloud Firestore, dan App Check memiliki peran penting. Panduan ini menjelaskan beberapa strategi utama untuk membantu mengoptimalkan Firebase SDK dan mulai mem-build Firebase ke dalam aplikasi web Anda di Firebase App Hosting.

Melakukan inisialisasi Firebase Admin SDK dan SDK web secara otomatis

Lingkungan Google seperti Firebase App Hosting menyediakan inisialisasi aplikasi yang disederhanakan melalui panggilan konstruktor tanpa argumen pada waktu build dan runtime. Ini adalah fitur dari Firebase Admin SDK untuk Node.js – SDK sisi server yang membuka area besar fungsi Firebase dan dapat sangat berguna di aplikasi web Anda – dan Firebase JavaScript SDK.

Dengan initializeApp(), Anda dapat mengizinkan Firebase App Hosting mengisi konfigurasi aplikasi web secara otomatis untuk Anda sekaligus mempertahankan opsi kontrol terperinci atas nilai tertentu jika Anda ingin mengganti nilai default.

Melakukan inisialisasi tanpa argumen

Untuk menginisialisasi SDK Firebase JavaScript atau Firebase Admin SDK dengan nilai konfigurasi default, gunakan initializeApp() tanpa memberikan argumen apa pun:

Admin SDK

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

JavaScript SDK

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

Strategi ini untuk inisialisasi Admin SDK berfungsi di App Hosting serta lingkungan server Google lainnya, termasuk Cloud Run, App Engine, dan Cloud Functions. Untuk JavaScript SDK, strategi ini berfungsi di App Hosting.

Mengganti nilai yang diisi otomatis

Anda dapat mengganti konfigurasi default yang dimasukkan secara otomatis. Perhatikan bahwa opsi ini berbeda antara Admin SDK dan JavaScript SDK.

Penggantian Admin SDK

Agar dapat menentukan opsi inisialisasi kustom untuk layanan seperti Realtime Database, Cloud Storage, atau Cloud Functions, gunakan variabel lingkungan FIREBASE_CONFIG. Jika isi variabel FIREBASE_CONFIG dimulai dengan karakter {, isi tersebut akan diurai sebagai objek JSON. Jika tidak, SDK akan menganggap bahwa string tersebut adalah jalur file JSON yang berisi opsi.

# apphosting.yaml

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

Penggantian JavaScript SDK

Untuk mengganti nilai FIREBASE_WEBAPP_CONFIG default yang dimasukkan App Hosting untuk inisialisasi JavaScript SDK, Anda dapat menentukan nilai di 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"}'

Menggunakan inisialisasi otomatis di lingkungan lain

Inisialisasi otomatis disiapkan dengan skrip post-penginstalan npm saat Anda menginstal Firebase JavaScript SDK. Skrip pasca-penginstalan mencari variabel lingkungan FIREBASE_WEBAPP_CONFIG, yang ditetapkan secara otomatis di lingkungan Cloud Build App Hosting.

Jika menginstal JS SDK di luar Cloud Build, misalnya secara lokal untuk digunakan dengan Firebase Emulator Suite, Anda harus menetapkan variabel lingkungan ini sendiri saat menginstal Firebase JavaScript SDK.

Untuk menyiapkan lingkungan secara manual saat penginstalan:

  1. Salin objek konfigurasi aplikasi web Firebase dari Firebase console.

  2. Dari terminal, tetapkan variabel lingkungan FIREBASE_WEBAPP_CONFIG sebelum menjalankan perintah npm install.

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

Setiap kali Anda mengubah project Firebase atau aplikasi web, jalankan kembali perintah ini.

Menggunakan FirebaseServerApp untuk SSR

Jika pernah menggunakan Firebase JS SDK atau SDK klien Firebase lainnya dalam pengembangan aplikasi web, Anda mungkin sudah terbiasa dengan antarmuka FirebaseApp dan cara menggunakannya untuk mengonfigurasi instance aplikasi. Untuk memfasilitasi operasi serupa di sisi server, Firebase menyediakan FirebaseServerApp.

FirebaseServerApp adalah varian dari FirebaseApp yang dapat digunakan di lingkungan rendering sisi server (SSR). Hal ini meliputi alat untuk melanjutkan sesi Firebase yang mencakup pemisahan rendering sisi klien (CSR) / rendering sisi server.

Gunakan FirebaseServerApp untuk:

  • Menjalankan kode sisi server dalam konteks pengguna, berbeda dengan Firebase Admin SDK yang memiliki hak administrasi penuh.
  • Mengaktifkan penggunaan App Check di lingkungan SSR.
  • Melanjutkan sesi Firebase Auth yang dibuat di klien.

Untuk mengetahui detail lengkap tentang penggunaan FirebaseServerApp untuk tujuan ini, lihat Menggunakan Firebase di aplikasi web dinamis dengan SSR.

Mengaktifkan App Check di aplikasi web

Anda dapat menggunakan App Check untuk memperkuat keamanan aplikasi web dinamis di App Hosting. Dengan menerapkan beberapa strategi sisi server tertentu yang dijelaskan dalam Menggunakan Firebase di aplikasi web dinamis dengan SSR, Anda dapat melindungi backend App Hosting dari penyalahgunaan.