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 JavaScript do Firebase e o Firebase Admin SDK para Node.js. Em um app da Web com todos os recursos, 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 no Firebase App Hosting.

Inicializar automaticamente os SDKs da Firebase Admin SDK e da Web

Ambientes do Google, como Firebase App Hosting, fornecem inicialização de app simplificada por uma chamada de construtor sem argumentos no momento de build e 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 funcionalidade do Firebase e pode ser muito útil no seu app da Web, e do SDK JavaScript do Firebase.

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

Inicialização sem argumentos

Para inicializar o SDK JavaScript Firebase 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 para inicialização de Admin SDK funciona em App Hosting, bem como em outros ambientes de servidor do Google, incluindo o Cloud Run, o App Engine e o Cloud Functions. Para o SDK do JavaScript, essa estratégia 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 do 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, o SDK considera que a string é 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 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"}'

Como usar a inicialização automática em outros ambientes

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

Se você estiver instalando o SDK do JavaScript fora do Cloud Build, por exemplo, localmente para uso com o conjunto de emuladores do Firebase, será necessário definir essa variável de ambiente por conta própria 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 app da Web

É possível usar App Check para fortalecer 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, você pode proteger seus back-ends App Hosting contra abusos.