Comece a usar o App Check com o reCAPTCHA Enterprise em apps da Web

Nesta página, mostramos como ativar o App Check em um app da Web usando o provedor reCAPTCHA Enterprise. Ao ativar o App Check, você ajuda a garantir que apenas seu app possa acessar os recursos do Firebase do seu projeto. Consulte a Visão geral desse recurso.

O App Check usa chaves de site baseadas em pontuação do reCAPTCHA Enterprise, o que o torna invisível para os usuários. O provedor reCAPTCHA Enterprise não exigirá que os usuários resolvam desafios em nenhum momento.

Se você quiser usar App Check com seu próprio provedor personalizado, consulte Implementar um provedor App Check personalizado.

1. Configurar seu projeto do Firebase

  1. Adicione o Firebase ao seu projeto em JavaScript, caso ainda não tenha feito isso.

  2. Abra a seção reCAPTCHA Enterprise do Console do Cloud e realize estas ações:

    1. Se você precisar ativar a API reCAPTCHA Enterprise, faça isso.
    2. Crie uma chave do tipo Site. Será necessário especificar os domínios em que você hospeda o app da Web. Deixe a opção "Usar desafio da caixa de seleção" desmarcada.

  3. Registre seus apps para usar App Check com o provedor do reCAPTCHA Enterprise na seção App Check do console Firebase. Será necessário fornecer a chave do site que você recebeu na etapa anterior.

    Geralmente, é necessário registrar todos os apps do projeto porque, depois de ativar a aplicação de um produto do Firebase, somente apps registrados poderão acessar os recursos de back-end do produto.

  4. Opcional: nas configurações de registro do aplicativo, defina um time to live (TTL) personalizado para os tokens do App Check emitidos pelo provedor. É possível definir o TTL como qualquer valor entre 30 minutos e 7 dias. Ao mudar esse valor, esteja ciente das seguintes compensações:

    • Segurança: os TTLs mais curtos oferecem maior segurança, porque reduzem a janela em que um token vazado ou interceptado pode ser usado por um invasor.
    • Desempenho: TTLs mais curtos significam que seu app realizará atestados com mais frequência. Como o processo de atestado do app adiciona latência às solicitações de rede sempre que é executado, um TTL curto pode afetar o desempenho do app.
    • Cota e custo: TTLs mais curtos e novos atestados frequentes esgotam sua cota mais rapidamente e, para serviços pagos, podem custar mais. Consulte Cotas e limites.

    O TTL padrão de uma hora é razoável para a maioria dos apps. A biblioteca App Check atualiza os tokens em aproximadamente metade da duração do TTL.

2. Adicionar a biblioteca App Check ao app

Adicione o Firebase ao seu app da Web, caso ainda não tenha feito isso. Importe a biblioteca App Check.

3. Inicializar o App Check

Adicione o código de inicialização a seguir ao aplicativo antes de acessar os serviços do Firebase. Será necessário enviar a chave do site do reCAPTCHA Enterprise, que você criou no Console do Cloud, para activate().

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";

const app = initializeApp({
  // Your Firebase configuration object.
});

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */),
  isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});

Web

firebase.initializeApp({
  // Your Firebase configuration object.
});

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to activate().
const appCheck = firebase.appCheck();
appCheck.activate(
  new firebase.appCheck.ReCaptchaEnterpriseProvider(
    /* reCAPTCHA Enterprise site key */
  ),
  true // Set to true to allow auto-refresh.
);

Próximas etapas

Implante a biblioteca App Check depois que ela for instalada no seu app.

O app cliente atualizado vai começar a enviar tokens do App Check em todas as solicitações feitas ao Firebase, mas os produtos dessa plataforma não exigirão que os tokens sejam válidos até que você ative a aplicação obrigatória na seção App Check do Console do Firebase.

Monitorar métricas e ativar a aplicação obrigatória

Antes de ativar a aplicação obrigatória, verifique se isso não vai afetar seus usuários legítimos. Por outro lado, se você perceber um uso suspeito dos recursos do seu app, convém ativar a aplicação obrigatória antes do previsto.

Para tomar essa decisão, analise as métricas do App Check nos serviços usados:

Ativar a aplicação App Check

Assim que você entender como o App Check vai afetar seus usuários e estiver tudo pronto para prosseguir, ative a aplicação obrigatória do App Check:

Usar App Check em ambientes de depuração

Se, depois de registrar seu aplicativo no App Check, você quiser executá-lo em um ambiente em que o App Check normalmente não seria classificado como válido, como localmente, durante o desenvolvimento ou em uma integração contínua (CI), crie um build de depuração do seu app que use o provedor de depuração do App Check em vez de um provedor de atestado real.

Consulte Usar App Check com o provedor de depuração em apps da Web.

Observação sobre o custo

O App Check cria uma avaliação em seu nome para validar o token de resposta do usuário sempre que um navegador que executa seu app da Web atualiza o token App Check. Seu projeto será cobrado por cada avaliação criada acima da cota sem custo. Consulte os preços do reCAPTCHA para mais detalhes.

Por padrão, seu app da Web atualizará esse token duas vezes a cada uma hora. Para controlar a frequência com que o app atualiza os tokens do App Check (e, com isso, a frequência com que novas avaliações são criadas), configure o TTL deles.