Integrar os SDKs do Firebase ao seu app da Web

O Firebase App Hosting é uma opção natural para apps da Web dinâmicos criados com o SDK Firebase JavaScript e o Firebase Admin SDK para Node.js. Em um app da Web completo, os SDKs Firebase, como Authentication, Cloud Firestore e App Check, têm funções importantes. Este guia descreve algumas estratégias importantes para ajudar a otimizar os SDKs Firebase e começar a criar Firebase no seu app da Web em Firebase App Hosting.

Inicializar automaticamente o Firebase Admin SDK e os SDKs da Web

Os ambientes do Google, como Firebase App Hosting, oferecem inicialização simplificada de apps por uma chamada de construtor sem argumentos no momento da criação e da execução. Esse é um recurso do Firebase Admin SDK para Node.js, um SDK do lado do servidor que desbloqueia uma grande área de funcionalidade do Firebase e pode ser muito útil no seu app da Web, e do SDK do Firebase JavaScript.

Com initializeApp(), você pode deixar que o Firebase App Hosting preencha automaticamente a configuração do app da Web, mantendo a opção de controle refinado sobre valores específicos se quiser substituir os valores padrão.

Inicialização sem argumentos

Para inicializar o SDK Firebase JavaScript ou Firebase Admin SDK com valores de configuração padrão, use initializeApp() sem fornecer argumentos:

Admin SDK

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

SDK para JavaScript

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

Essa estratégia de inicialização de Admin SDK funciona em App Hosting e em outros ambientes de servidor do Google, incluindo Cloud Run, App Engine e Cloud Functions. Para o SDK JavaScript, essa estratégia funciona em App Hosting.

Substituir valores preenchidos automaticamente

É possível substituir a configuração padrão injetada automaticamente. Essas opções são diferentes entre o SDK Admin SDK e o JavaScript.

Substituição de Admin SDK

Para especificar opções de inicialização personalizadas para serviços como Realtime Database, Cloud Storage ou Cloud Functions, use a variável de ambiente FIREBASE_CONFIG. Caso o conteúdo da variável FIREBASE_CONFIG comece com um caractere {, ele será analisado como um objeto JSON. Caso contrário, a string será tratada pelo SDK como o caminho de um arquivo JSON que contém as opções.

# apphosting.yaml

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

Substituição do SDK para JavaScript

Para substituir os valores padrão de FIREBASE_WEBAPP_CONFIG que o App Hosting insere para a inicialização do SDK JavaScript, especifique valores em 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"}'

Usar a inicialização automática em outros ambientes

A inicialização automática é configurada com um script npm postinstall quando você instala o SDK do Firebase para JavaScript. O script postinstall procura a variável de ambiente FIREBASE_WEBAPP_CONFIG, que é definida automaticamente no ambiente do Cloud Build App Hosting.

Se você estiver instalando o SDK do JavaScript fora do Cloud Build, será necessário definir essa variável de ambiente ao instalar o SDK do Firebase para JavaScript.

Para configurar o ambiente manualmente na instalação:

  1. Copie o objeto de configuração do app da Web do Firebase no console do Firebase.

  2. Em um terminal, defina a variável de ambiente FIREBASE_WEBAPP_CONFIG antes de executar o comando npm install.

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

Sempre que você mudar o projeto do Firebase ou o app da Web, execute esse comando novamente.

Usar FirebaseServerApp para SSR

Se você já trabalhou com o SDK do Firebase para JS ou outros SDKs de cliente do Firebase no desenvolvimento do seu app da Web, provavelmente já conhece a interface do FirebaseApp e como usá-la para configurar instâncias de apps. Para facilitar operações semelhantes no lado do servidor, o Firebase oferece FirebaseServerApp.

FirebaseServerApp é uma variante do FirebaseApp para uso em ambientes de renderização do lado do servidor (SSR). Ele inclui ferramentas para continuar sessões do Firebase que abrangem a divisão entre a renderização do lado do cliente (CSR) e do lado do servidor.

Use o FirebaseServerApp para:

  • Executar código do lado do servidor no contexto do usuário, em contraste com o Firebase Admin SDK, que tem direitos de administração completos.
  • Ative o uso de App Check em ambientes de SSR.
  • Continue uma sessão do Firebase Auth criada no cliente.

Para mais detalhes sobre o uso de FirebaseServerApp para essas finalidades, consulte Usar o Firebase em apps da Web dinâmicos com SSR.

Ativar o App Check no seu web app

Você pode usar App Check para reforçar a segurança do seu app da Web dinâmico em App Hosting. Ao implementar algumas das estratégias específicas do lado do servidor descritas em Usar o Firebase em apps da Web dinâmicos com SSR, é possível proteger seus back-ends App Hosting contra abusos.