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

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 do seu aplicativo, como back-ends auto-hospedados, com o App Check. Para fazer isso, você precisará fazer os dois procedimentos a seguir:

  • Modifique seu cliente de aplicativo para enviar um token de verificação de aplicativo junto com cada solicitação para 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 do App Check 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.

Assim que tiver um token válido, envie-o junto com a solicitação para o seu back-end. As especificidades de como fazer 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.
};