Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

웹 앱에서 App Check로 Firebase 이외의 리소스 보호

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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

  • 이 페이지에 설명된 대로 백엔드에 대한 각 요청과 함께 App Check 토큰을 보내도록 앱 클라이언트를 수정하십시오.
  • 사용자 지정 백엔드에서 앱 확인 토큰 확인 에 설명된 대로 모든 요청에 ​​유효한 앱 확인 토큰이 필요하도록 백엔드를 수정합니다.

시작하기 전에

reCAPTCHA v3 공급자 , reCAPTCHA Enterprise 공급자 또는 사용자 지정 공급자 를 사용하여 앱에 App Check를 추가합니다.

백엔드 요청과 함께 App Check 토큰 보내기

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

유효한 토큰이 있으면 요청과 함께 백엔드로 보내십시오. 이를 수행하는 방법에 대한 세부 사항은 사용자에게 달려 있지만 쿼리 매개변수를 포함하여 URL의 일부로 App Check 토큰을 보내지 마십시오 . 이렇게 하면 우발적인 누출 및 가로채기에 취약합니다. 다음 예에서는 권장되는 접근 방식인 사용자 지정 HTTP 헤더로 토큰을 보냅니다.

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