Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Comece a usar o App Check com reCAPTCHA v3 em aplicativos da web

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Esta página mostra como habilitar o App Check em um aplicativo da web, usando o provedor reCAPTCHA v3 integrado. Ao ativar o App Check, você ajuda a garantir que apenas seu aplicativo possa acessar os recursos do Firebase do seu projeto. Veja uma Visão geral deste recurso.

O reCAPTCHA v3 é um serviço sem custo. O App Check também oferece suporte ao reCAPTCHA Enterprise , um serviço pago com cota gratuita. Para saber as diferenças entre o reCAPTCHA v3 e o reCAPTCHA Enterprise, consulte a comparação de recursos .

Observe que o reCAPTCHA v3 é invisível para os usuários. O provedor reCAPTCHA v3 não exigirá que os usuários resolvam um desafio a qualquer momento. Consulte a documentação do reCAPTCHA v3 .

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

1. Configure seu projeto do Firebase

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

  2. Registre seu site para o reCAPTCHA v3 e obtenha a chave do site e a chave secreta do reCAPTCHA v3.

  3. Registre seus aplicativos para usar o App Check com o provedor reCAPTCHA na seção App Check do Firebase console. Você precisará fornecer a chave secreta obtida na etapa anterior.

    Normalmente, você precisa registrar todos os aplicativos do seu projeto porque, depois de ativar a aplicação de um produto Firebase, apenas os aplicativos registrados poderão acessar os recursos de back-end do produto.

  4. Opcional : nas configurações de registro do aplicativo, defina um tempo de vida (TTL) personalizado para os tokens do App Check emitidos pelo provedor. Você pode definir o TTL para qualquer valor entre 30 minutos e 7 dias. Ao alterar esse valor, esteja ciente das seguintes compensações:

    • Segurança: TTLs mais curtos fornecem segurança mais forte, pois reduzem a janela na qual um token vazado ou interceptado pode ser abusado por um invasor.
    • Desempenho: TTLs mais curtos significam que seu aplicativo realizará o atestado com mais frequência. Como o processo de atestado do aplicativo adiciona latência às solicitações de rede sempre que é executado, um TTL curto pode afetar o desempenho do seu aplicativo.
    • Cota e custo: TTLs mais curtos e reatestação frequente esgotam sua cota mais rapidamente e, para serviços pagos, podem custar mais. Consulte Cotas e limites .

    O TTL padrão de 1 dia é razoável para a maioria dos aplicativos. Observe que a biblioteca App Check atualiza os tokens em aproximadamente metade da duração do TTL.

2. Adicione a biblioteca App Check ao seu aplicativo

Adicione o Firebase ao seu aplicativo da Web, caso ainda não tenha feito isso. Certifique-se de importar a biblioteca App Check.

3. Inicialize o App Check

Adicione o seguinte código de inicialização ao seu aplicativo antes de acessar qualquer serviço do Firebase. Você precisará passar a chave do site reCAPTCHA , que você criou no console do reCAPTCHA, para activate() .

Web version 9

const { initializeApp } = require("firebase/app");
const { initializeAppCheck, ReCaptchaV3Provider } = require("firebase/app-check");

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

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});

Web version 8

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

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);

Próximos passos

Depois que a biblioteca App Check estiver instalada em seu aplicativo, implante-a.

O aplicativo cliente atualizado começará a enviar tokens do App Check junto com todas as solicitações feitas ao Firebase, mas os produtos Firebase não exigirão que os tokens sejam válidos até que você ative a aplicação na seção App Check do Firebase console.

Monitore as métricas e ative a aplicação

Antes de habilitar a imposição, no entanto, você deve certificar-se de que isso não atrapalhe seus usuários legítimos existentes. Por outro lado, se você perceber o uso suspeito dos recursos do seu aplicativo, convém ativar a aplicação mais cedo.

Para ajudar a tomar essa decisão, consulte as métricas do App Check para os serviços que você usa:

Ativar a aplicação do App Check

Quando você entender como o App Check afetará seus usuários e estiver pronto para continuar, poderá ativar a aplicação do App Check:

Use o App Check em ambientes de depuração

Se, depois de registrar seu aplicativo para o App Check, você quiser executá-lo em um ambiente que o App Check normalmente não classificaria como válido, como localmente durante o desenvolvimento ou em um ambiente de integração contínua (CI), você poderá criar uma compilação de depuração do seu aplicativo que usa o provedor de depuração do App Check em vez de um provedor de atestado real.

Consulte Usar o App Check com o provedor de depuração em aplicativos da web .