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

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

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

시작하기 전에

reCAPTCHA v3 제공자, reCAPTCHA Enterprise 제공자 또는 커스텀 제공자를 사용하여 앱에 앱 체크를 추가합니다.

백엔드 요청으로 앱 체크 토큰 전송

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

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

Web version 9

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

재생 보호(베타)

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

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);