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

Proteja recursos que não são do Firebase com o App Check em aplicativos da web

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

Você pode proteger os recursos que não são do Firebase, como back-ends auto-hospedados, com o App Check. Para fazer isso, você precisará fazer o seguinte:

  • Modifique o cliente do seu aplicativo para enviar um token do App Check junto com cada solicitação ao seu back-end, conforme descrito nesta página.
  • Modifique seu back-end para exigir um token válido do App Check a cada solicitação, conforme descrito em Verificar tokens do App Check de um back-end personalizado .

Antes de você começar

Adicione o App Check ao seu aplicativo usando o provedor reCAPTCHA v3 , o provedor reCAPTCHA Enterprise ou um provedor personalizado .

Enviar tokens de verificação de aplicativo com solicitações de back-end

Em seu cliente de aplicativo, antes de cada solicitação, obtenha um token de verificação de aplicativo válido e não expirado com appCheck().getToken() . A biblioteca App Check atualizará o token, se necessário.

Depois de ter um token válido, envie-o junto com a solicitação para seu back-end. As especificidades de como você faz isso dependem de você, mas não envie tokens do App Check como parte de URLs , inclusive em parâmetros de consulta, pois isso os torna vulneráveis ​​a vazamentos e interceptações acidentais. O exemplo a seguir envia o token em um cabeçalho HTTP personalizado, que é a abordagem recomendada.

Web version 9

const { initializeAppCheck, getToken } = require('firebase/app-check');

const appCheck = initializeAppCheck(
    app,
    { provider: provider } // ReCaptchaV3Provider or CustomProvider
);

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};

Web version 8

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};