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

자체 호스팅 백엔드와 같이 앱의 Firebase 외의 리소스(예: 자체 호스팅 백엔드)를 App Check를 사용합니다. 이렇게 하려면 다음 두 가지 작업을 모두 수행해야 합니다.

각 요청과 함께 App Check 토큰을 전송하도록 앱 클라이언트를 수정합니다. 이 페이지에 설명된 대로 백엔드에 연결됩니다
모든 요청에 유효한 App Check 토큰을 요구하도록 백엔드를 수정합니다. 커스텀 백엔드에서 App Check 토큰 확인에 설명된 대로 토큰을 검증할 수 있습니다.

시작하기 전에

다음 중 하나를 사용하여 App Check를 앱에 추가합니다. reCAPTCHA Enterprise 제공업체 또는 커스텀 제공업체가 있습니다.

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

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

유효한 토큰이 있으면 요청과 함께 백엔드에 전송합니다. 이 이 작업을 수행하는 방법에 대한 구체적인 내용은 귀하에게 달려 있지만 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);