웹 앱에서 앱 체크로 Firebase 외의 리소스 보호

자체 호스팅 백엔드와 같은 앱의 Firebase 외의 리소스를 App Check로 보호할 수 있습니다. 이렇게 하려면 다음 두 가지 작업을 모두 수행해야 합니다.

  • 이 페이지에 설명된 대로 각 요청에 따라 App Check 토큰을 백엔드로 보내도록 앱 클라이언트를 수정합니다.
  • 커스텀 백엔드에서 App Check 토큰 확인에 설명된 대로 모든 요청에 유효한 App Check 토큰을 요구하도록 백엔드를 수정합니다.

시작하기 전에

reCAPTCHA Enterprise 제공자 또는 커스텀 제공자를 사용하여 앱에 App Check를 추가합니다.

백엔드 요청으로 App Check 토큰 전송

앱 클라이언트에서 각 요청 전에 appCheck().getToken()으로 유효하고 만료되지 않은 App Check 토큰을 가져옵니다. 필요한 경우 App Check 라이브러리가 토큰을 새로고침합니다.

유효한 토큰이 있으면 요청과 함께 백엔드에 전송합니다. 이 작업을 실행하는 방법은 개발자에게 달려 있지만, 쿼리 파라미터에 포함되는 URL의 일부로 App Check 토큰을 전송해서는 안 됩니다. 실수로 인한 유출 및 가로채기에 취약하기 때문입니다. 다음 예시에서는 권장되는 방식인 커스텀 HTTP 헤더에서 토큰을 전송합니다.

Web

import { initializeAppCheck, getToken } from '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.
};
appcheck_nonfirebase.js

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

재생 보호(베타)

재생 보호를 사용 설정한 엔드포인트에 요청할 때는 getToken() 대신 getLimitedUseToken()을 사용하여 토큰을 가져옵니다.

import { getLimitedUseToken } from "firebase/app-check";

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);