Integrar os SDKs do Firebase ao seu app da Web

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

Inicializar automaticamente Firebase Admin SDK e os SDKs da Web

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

Com initializeApp(), você pode permitir que 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.

Inicializar sem argumentos

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

Admin SDK

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

Para o Admin SDK, essa estratégia de inicialização funciona no App Hosting e em outros ambientes de servidor do Google, incluindo o Cloud Run, App Engine, e as funções do Cloud Run.

SDK para JavaScript

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

Para o SDK para JavaScript, essa estratégia de inicialização funciona em App Hosting.

Substituir valores preenchidos automaticamente

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

Substituição 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 FIREBASE_WEBAPP_CONFIG padrão que App Hosting injeta para a inicialização do SDK para 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 postinstall npm ao instalar o SDK do Firebase para JavaScript. O script postinstall procura a variável de ambiente FIREBASE_WEBAPP_CONFIG, que é definida automaticamente no ambiente de build do Cloud Build App Hosting.

Se você estiver instalando o SDK para 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 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. Os caches intermediários (como .next/cache) também podem precisar ser limpos.

Usar FirebaseServerApp para SSR

Se você já trabalhou com o SDK do Firebase para JavaScript ou outros SDKs de cliente do Firebase no desenvolvimento do seu app da Web, provavelmente já conhece a interface 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 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.
  • Ativar o uso do App Check em ambientes de SSR.
  • Continuar uma sessão do Firebase Auth criada no cliente.

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

Ativar App Check no seu app da Web

Você pode usar App Check para reforçar a segurança do seu app da Web dinâmico no 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, você pode proteger seus App Hosting back-ends contra abusos.