Codelab da Web para verificação de aplicativos

1. Introdução

Última atualização: 23/02/2023

Como você pode impedir o acesso não autorizado aos seus recursos do Firebase?

Você pode usar o Firebase App Check para impedir que clientes não autorizados acessem seus recursos de back-end, exigindo que as solicitações recebidas sejam anexadas com um atestado de que a solicitação vem do seu aplicativo original e bloqueando o tráfego que não possui um atestado adequado. O Firebase App Check depende de provedores de atestados específicos da plataforma para verificar a autenticidade do cliente: para aplicativos da web, o App Check oferece suporte a reCAPTCHA v3 e reCAPTCHA Enterprise como provedores de atestados.

O App Check pode ser usado para proteger solicitações para Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication com Identity Platform e em back-ends que você mesmo hospeda.

O que você construirá

Neste codelab, você protegerá um aplicativo de bate-papo adicionando primeiro e depois aplicando o App Check.

O que você aprenderá

• Como monitorar seu back-end em busca de acesso não autorizado
• Como adicionar aplicação ao Firestore e Cloud Storage
• Como executar seu aplicativo com um token de depuração para desenvolvimento local

O que você precisará

• O IDE/editor de texto de sua escolha
• O gerenciador de pacotes npm , que normalmente vem com o Node.js
• A CLI do Firebase instalada e configurada para funcionar com sua conta
• Um terminal/console
• Um navegador de sua preferência, como o Chrome
• O código de amostra do codelab (veja a próxima etapa do codelab para saber como conseguir o código).

2. Obtenha o código de exemplo

Clone o repositório GitHub do codelab na linha de comando:

git clone https://github.com/firebase/codelab-friendlychat-web

Alternativamente, se você não tiver o Git instalado, você pode baixar o repositório como um arquivo ZIP .

Importe o aplicativo inicial

Usando seu IDE, abra ou importe o diretório 📁 appcheck-start do repositório clonado. Este diretório 📁 appcheck-start contém o código inicial do codelab, que será um aplicativo web de bate-papo totalmente funcional. O diretório 📁 appcheck terá o código completo do codelab.

3. Crie e configure um projeto Firebase

Crie um projeto do Firebase

1. Faça login no Firebase .
2. No console do Firebase, clique em Adicionar projeto e nomeie seu projeto do Firebase como FriendlyChat. Lembre-se do ID do seu projeto do Firebase.
3. Desmarque Ativar Google Analytics para este projeto
4. Clique em Criar projeto.

O aplicativo que criaremos usa produtos Firebase disponíveis para aplicativos da web:

• Firebase Authentication para permitir que seus usuários façam login facilmente em seu aplicativo.
• Cloud Firestore para salvar dados estruturados na nuvem e receber notificações instantâneas quando os dados forem alterados.
• Cloud Storage para Firebase para salvar arquivos na nuvem.
• Firebase Hosting para hospedar e servir seus ativos.
• Firebase Cloud Messaging para enviar notificações push e exibir notificações pop-up do navegador.
• Monitoramento de desempenho do Firebase para coletar dados de desempenho do usuário para seu aplicativo.

Alguns desses produtos precisam de configuração especial ou precisam ser habilitados usando o console do Firebase.

Adicione um aplicativo da Web do Firebase ao projeto

1. Clique no ícone da web para criar um novo aplicativo da web do Firebase.
2. Registre o aplicativo com o apelido Friendly Chat e marque a caixa ao lado de Configurar também o Firebase Hosting para este aplicativo . Clique em Registrar aplicativo .
3. Na próxima etapa, você verá um comando para instalar o Firebase usando npm e um objeto de configuração. Você copia esse objeto posteriormente no codelab. Por enquanto, pressione Next .

4. Então você verá uma opção para instalar o Firebase CLI. Se você ainda não o instalou, faça-o agora usando o comando npm install -g firebase-tools . Em seguida, clique em Avançar .
5. Então você verá uma opção para fazer login no Firebase e implantar na hospedagem do Firebase. Vá em frente e faça login no Firebase usando o comando firebase login e clique em Continue to Console . Você implantará na hospedagem do Firebase em uma etapa futura.

Ative o login do Google para autenticação do Firebase

Para permitir que os usuários façam login no aplicativo da web com suas contas do Google, usaremos o método de login do Google.

Você precisará ativar o Login do Google:

1. No console do Firebase, localize a seção Build no painel esquerdo.
2. Clique em Autenticação , clique em Primeiros passos , se aplicável, e clique na guia Método de login (ou clique aqui para ir diretamente para lá).
3. Ative o provedor de login do Google
4. Defina o nome público do seu aplicativo como Friendly Chat e escolha um e-mail de suporte do projeto no menu suspenso.
5. Clique em Salvar

Ativar o Cloud Firestore

O aplicativo da web usa o Cloud Firestore para salvar mensagens de chat e receber novas mensagens de chat.

Você precisará ativar o Cloud Firestore:

1. Na seção Build do console do Firebase, clique em Firestore Database .
2. Clique em Criar banco de dados no painel Cloud Firestore.

3. Selecione a opção Iniciar em modo de teste e clique em Avançar após ler o aviso sobre as regras de segurança.

O modo de teste garante que você possa gravar livremente no banco de dados durante o desenvolvimento. Você já tem regras de segurança escritas para você no código inicial. Você os usará neste codelab.

4. Defina o local onde seus dados do Cloud Firestore são armazenados. Você pode deixar isso como padrão ou escolher uma região mais próxima de você. Clique em Habilitar para provisionar o Firestore.

Habilitar armazenamento em nuvem

O aplicativo da web usa Cloud Storage for Firebase para armazenar, fazer upload e compartilhar imagens.

Você precisará ativar o Cloud Storage:

1. Na seção Build do console do Firebase, clique em Storage .
2. Se não houver um botão Começar , significa que o Cloud Storage já está ativado e você não precisa seguir as etapas abaixo.
3. Clique em Começar .
4. Selecione a opção Iniciar em modo de teste e clique em Avançar após ler o aviso sobre as regras de segurança.

Com as regras de segurança padrão, qualquer usuário autenticado pode gravar qualquer coisa no Cloud Storage. Implantaremos regras de segurança já escritas posteriormente neste codelab.

5. O local do Cloud Storage é pré-selecionado com a mesma região escolhida para seu banco de dados do Cloud Firestore. Clique em Concluído para concluir a configuração.

4. Configurar o Firebase

No diretório appcheck-start , chame:

firebase use --add

Quando solicitado, selecione o ID do projeto e forneça um alias ao projeto do Firebase. Para este projeto, você pode simplesmente fornecer um alias default . A seguir, você precisará configurar seu projeto local para funcionar com o Firebase.

1. Vá para as configurações do seu projeto no console do Firebase
2. No cartão "Seus aplicativos", selecione o apelido do aplicativo para o qual você precisa de um objeto de configuração.
3. Selecione Configuração no painel de snippets do SDK do Firebase.
4. Copie o snippet do objeto de configuração e adicione-o a appcheck-start/hosting/src/firebase-config.js . O restante do codelab pressupõe que a variável se chama config .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

No mesmo diretório appcheck-start , chame:

firebase experiments:enable webframeworks

Isso permite o suporte da estrutura da web com a qual este projeto foi construído.

Devemos estar prontos para executar seu projeto e testar se o projeto padrão funciona!

5. Experimente o aplicativo sem App Check

Agora que você configurou seu aplicativo e o SDK, tente usar o aplicativo como ele foi projetado originalmente. Primeiro, comece instalando todas as dependências. No seu terminal, navegue até o diretório appcheck-start/hosting . Enquanto estiver nesse diretório, execute npm install . Isso busca todas as dependências para o seu projeto funcionar. Para iniciar o aplicativo em seu estado atual, você pode executar firebase serve . O aplicativo solicita que você faça login com uma conta do Google; faça isso e tente postar algumas mensagens de bate-papo e algumas fotos no bate-papo.

Agora que você testou localmente, é hora de vê-lo em produção! Execute firebase deploy para implantar o aplicativo web na web. Esta parte é uma etapa crucial na demonstração de como o App Check funciona no mundo real, pois requer a configuração de um domínio para o provedor de atestado reCAPTCHA Enterprise.

Esperamos que você esteja experimentando o recurso padrão que o aplicativo oferece. Publicar mensagens de chat e tudo mais que só deveria ser feito em um aplicativo como este. A desvantagem do estado atual é que qualquer pessoa com a configuração do seu aplicativo na etapa anterior pode acessar seus recursos de back-end. Eles ainda precisam obedecer às regras de segurança estabelecidas pelos seus sistemas Firestore e Cloud Storage, mas, caso contrário, ainda poderão consultar, armazenar e acessar os dados armazenados neles.

Nas próximas etapas, você irá:

• Registre-se para verificação de aplicativos
• Validar aplicação
• Comece a aplicar regras

6. Ative o App Check e a aplicação

Vamos começar pegando uma chave reCAPTCHA Enterprise para o seu projeto e adicionando-a ao App Check. Você começa visitando a seção reCAPTCHA Enterprise do Console do Google Cloud. Selecione seu projeto e você será solicitado a ativar a API reCAPTCHA Enterprise. Habilite a API e aguarde alguns minutos até que ela termine. Em seguida, clique em Criar chave ao lado de Chaves corporativas . Em seguida, nesta seção, especifique um nome de exibição e selecione uma chave de tipo de site . Você precisa especificar os domínios nos quais seu aplicativo está hospedado. Como você está planejando hospedar isso no Firebase Hosting, você usa o nome de hospedagem padrão, que geralmente é ${YOUR_PROJECT_ID}.web.app . Você pode encontrar seu domínio de hospedagem na seção Hospedagem do Firebase Console. Após preencher essas informações, pressione Concluído e Criar chave .

Depois de concluído, você verá um ID na parte superior da página Detalhes da chave .

Vá em frente e copie esse ID para sua área de transferência. Esta é a chave que você usa para o App Check. Em seguida, visite a parte App Check do console do Firebase e clique em Primeiros passos . Em seguida, clique em Registrar e, em seguida, clique em reCAPTCHA Enterprise e coloque o ID copiado na caixa de texto da chave do site reCAPTCHA Enterprise . Deixe o restante das configurações como padrão. Sua página do App Check deve ser semelhante a esta:

Solicitações não verificadas e não aplicadas

Agora que você tem uma chave registrada no console do Firebase, volte a executar seu site no navegador executando firebase serve . Aqui você tem o aplicativo da web em execução localmente e pode começar a fazer solicitações no back-end do Firebase novamente. À medida que as solicitações vão para o back-end do Firebase, elas são monitoradas pelo App Check, mas não são aplicadas. Se você quiser ver o status das solicitações recebidas, visite a seção Cloud Firestore na guia APIs da página App Check no console do Firebase. Como você ainda não configurou o cliente para usar o App Check, deverá ver algo semelhante a isto:

O back-end tem 100% de solicitações não verificadas. Esta tela é útil porque mostra que quase todas as solicitações de clientes vêm de clientes que não possuem o App Check integrado.

Este painel pode indicar algumas coisas. A primeira coisa que pode indicar é se todos os seus aplicativos cliente estão executando a versão mais recente do seu cliente. Se estiverem, você poderá aplicar o App Check com segurança, sem se preocupar em desativar o acesso de um cliente genuíno do seu aplicativo. A outra coisa que isso pode dizer é quantas tentativas de acessar seu back-end ocorreram sem vir de dentro do seu aplicativo. Podem ser usuários que estão consultando seu back-end diretamente, sem o seu conhecimento. Como você pode ver que as solicitações não são verificadas, é hora de ver o que aconteceria com os usuários que podem ter uma solicitação não verificada em seu back-end antes de prosseguir com a verificação de suas solicitações.

Solicitações não verificadas e impostas

Vá em frente e pressione o botão Aplicar na tela anterior e pressione Aplicar novamente, se solicitado.

Isso começará a aplicar o App Check; agora ele bloqueará solicitações para seus serviços de back-end que não forem verificadas por meio do provedor de atestado escolhido (neste caso, reCAPTCHA Enterprise). Retorne ao seu aplicativo da web em execução que deveria estar em execução em http://localhost:5000 . Quando você atualiza a página e tenta obter dados do banco de dados, nada acontece. Se você abrir o console do Chrome para ler os erros, verá algo semelhante ao seguinte:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Trata-se de solicitações de bloqueio do App Check que não passaram um token de atestado válido em suas solicitações para seus recursos do Firebase. Por enquanto, você pode desativar a aplicação do App Check e, na próxima seção, examinará como adicionar o reCAPTCHA Enterprise App Check ao exemplo do Friendly Chat.

7. Adicione a chave reCAPTCHA Enterprise ao site

Adicionaremos a chave corporativa ao seu aplicativo. Primeiro, abra hosting/src/firebase-config.js e adicione sua chave reCAPTCHA Enterprise ao seguinte snippet de código:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

Quando isso estiver concluído, abra hosting/src/index.js e na linha 51, você adicionará uma importação de firebase-config.js para buscar sua chave reCAPTCHA e também importar a biblioteca App Check para poder trabalhar com o reCAPTCHA Provedor empresarial.

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

Então, na próxima linha, você criará uma função para configurar o App Check. A função primeiro verificará se você está em um ambiente de desenvolvimento e, em caso afirmativo, imprimirá um token de depuração que poderá ser usado para desenvolvimento local.

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

Agora é hora de inicializar o App Check para funcionar com o provedor selecionado – neste caso, é o reCAPTCHA Enterprise. Você também desejaria atualizar automaticamente seu token do App Check em segundo plano, o que evitaria qualquer tipo de atraso na interação do usuário com seu serviço no caso de o token do App Check ficar obsoleto.

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

Finalmente, depois de certificar-se de que o aplicativo foi inicializado, você precisará chamar a função setupAppCheck que acabou de criar. Na parte inferior do arquivo hosting/src/index.js , adicione a chamada ao seu método adicionado recentemente.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

Teste localmente primeiro

Teste seu aplicativo localmente primeiro. Se você ainda não estiver servindo o aplicativo localmente, execute firebase serve . Você deve notar que o aplicativo ainda não consegue carregar localmente. Isso ocorre porque você registrou seu domínio do Firebase apenas com o provedor de atestado reCAPTCHA e não com o domínio localhost. Você nunca deve registrar localhost como um domínio aprovado, pois isso permite que os usuários acessem seus back-ends restritos a partir de um aplicativo executado localmente em suas máquinas. Em vez disso, como você definiu self.FIREBASE_APPCHECK_DEBUG_TOKEN = true você gostaria de verificar em seu console JavaScript se há uma linha semelhante a esta:

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Você vai querer pegar o token de depuração fornecido (no caso de exemplo é: 55183c20-de61-4438-85e6-8065789265be ) e conectá-lo à configuração do App Check no menu flutuante do seu aplicativo.

Dê ao token um nome exclusivo que você lembrará e clique em Salvar . Esta opção permite que você use um token gerado pelo cliente com seu aplicativo, o que é uma alternativa mais segura do que gerar um token de depuração e incorporá-lo em seu aplicativo. Incorporar um token no aplicativo pode distribuí-lo acidentalmente aos usuários finais, e esses usuários finais podem explorá-lo ignorando suas verificações. Se desejar distribuir um token de depuração, por exemplo, em um ambiente de CI, leia esta documentação para saber mais sobre como distribuí-lo.

Depois de registrar o token de depuração no console do Firebase, você poderá reativar a aplicação do App Check e testar se o conteúdo do aplicativo é carregado localmente chamando firebase serve no terminal. Você deverá ver os dados inseridos anteriormente sendo veiculados na versão local do aplicativo web. Você ainda deverá ver a mensagem com o token de depuração impresso no console.

Experimente em produção

Quando estiver satisfeito com o funcionamento local do App Check, implante o aplicativo Web em produção. No seu terminal, chame firebase deploy novamente e recarregue a página. Isso empacotará seu aplicativo da web para ser executado no Firebase Hosting. Depois que seu aplicativo estiver hospedado no Firebase Hosting, tente visitá-lo em ${YOUR_PROJECT_ID}.web.app . Você pode abrir o console JavaScript e não deverá mais ver o token de depuração impresso lá e deverá ver os bate-papos sendo carregados em seu projeto. Além disso, depois de interagir com o aplicativo por alguns instantes, você pode visitar a seção App Check do console do Firebase e validar se as solicitações para seu aplicativo mudaram para todas sendo verificadas.

8. Parabéns!

Parabéns, você adicionou o Firebase App Check a um aplicativo da Web!

Você configura o console do Firebase para lidar com um token reCAPTCHA Enterprise para ambientes de produção e até mesmo configura tokens de depuração para desenvolvimento local. Isso garante que seus aplicativos ainda consigam acessar os recursos do Firebase de clientes aprovados e evita a ocorrência de atividades fraudulentas no seu aplicativo.

Qual é o próximo?

Confira a seguinte documentação para adicionar o Firebase App Check a:

• Ativar a aplicação no Cloud Functions
• Verifique tokens do App Check em back-ends personalizados

Documentos de referência

• Comece a usar o App Check com o reCAPTCHA Enterprise em aplicativos da web
• Use o provedor de depuração em aplicativos web