Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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 gratuito. O App Check também oferece suporte ao reCAPTCHA Enterprise , um serviço pago com uma 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 o tenha feito.

  2. Registre seu site para reCAPTCHA v3 e obtenha sua chave de site reCAPTCHA v3 e chave secreta.

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

    Normalmente, você precisa registrar todos os aplicativos do seu projeto, porque depois de habilitar a imposição para 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 uma vida útil (TTL) personalizada para 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, porque 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á atestados 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ções frequentes 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 do 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 o tenha feito. Certifique-se de importar a biblioteca App Check.

3. Inicialize a verificação do aplicativo

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 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ê habilite a aplicação na seção App Check do console do Firebase.

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

Antes de habilitar a imposição, no entanto, certifique-se de que isso não interromperá 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, você pode consultar as métricas do App Check para os serviços que usa:

Ativar a aplicação do App Check

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

Use o App Check em ambientes de depuração

Se, depois de registrar seu aplicativo no 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 a partir de um ambiente de integração contínua (CI), você pode 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 Use App Check com o provedor de depuração em aplicativos da web .