Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

  • 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.
  • Modificar seu backend para exigir uma App válido Verifique token com cada solicitação, como descrito em Verifique App Verifique os tokens de um backend personalizado .

Antes de você começar

Adicionar App Verifique para seu aplicativo, usando o padrão provedor v3 reCAPTCHA , ou um provedor personalizado .

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

No seu cliente aplicativo, antes de cada pedido, obter um unexpired, App Verificação válido, token 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 seu back-end. Os detalhes de como você conseguir isso são até você, mas não enviar App Verifique fichas como parte de URLs, incluindo parâmetros de consulta, pois isso os torna vulneráveis a vazamentos acidentais e intercepção. O exemplo a seguir envia o token em um cabeçalho HTTP personalizado, que é a abordagem recomendada.

Versão 9 da web

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.
};

Versão 8 da web

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.
};