2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기

웹 앱에서 사용자 지정 공급자와 함께 App Check 사용 시작하기

이 페이지에서는 사용자 지정 App Check 공급자를 사용하여 웹 앱에서 App Check를 활성화하는 방법을 보여줍니다. 앱 확인을 활성화하면 앱만 프로젝트의 Firebase 리소스에 액세스할 수 있도록 할 수 있습니다.

기본 제공 공급자 중 하나와 함께 앱 확인을 사용하려면 reCAPTCHA v3를 사용한 앱 확인 및 reCAPTCHA Enterprise를 사용한 앱 확인 문서를 참조하세요.

시작하기 전에

1. 앱에 App Check 라이브러리 추가

아직 웹 앱에 Firebase를 추가 하지 않은 경우 추가합니다. App Check 라이브러리를 가져와야 합니다.

2. 앱 체크 제공자 객체 생성

사용자 지정 공급자에 대한 App Check 공급자 개체를 만듭니다. 이 개체에는 사용자 지정 App Check 공급자가 진위 증명으로 요구하는 모든 정보를 수집하고 App Check 토큰과 교환하여 토큰 획득 서비스로 보내는 getToken() 메서드가 있어야 합니다. App Check SDK는 토큰 캐싱을 처리하므로 getToken() 구현 시 항상 새 토큰을 가져옵니다.

Web version 9

const { CustomProvider } = require("firebase/app-check");

const appCheckCustomProvider = new CustomProvider({
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
});

Web version 8

const appCheckCustomProvider = {
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
};

3. 앱 체크 초기화

Firebase 서비스에 액세스하기 전에 다음 초기화 코드를 애플리케이션에 추가합니다.

Web version 9

const { initializeApp } = require("firebase/app");
const { initializeAppCheck } = require("firebase/app-check");

const app = initializeApp({
  // Your firebase configuration object
});

const appCheck = initializeAppCheck(app, {
  provider: appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true    
});

Web version 8

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
appCheck.activate(
  appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);

다음 단계

App Check 라이브러리가 앱에 설치되면 배포합니다.

업데이트된 클라이언트 앱은 Firebase에 대한 모든 요청과 함께 App Check 토큰을 보내기 시작하지만 Firebase 콘솔의 App Check 섹션에서 시행을 활성화할 때까지 Firebase 제품에서 토큰이 유효하지 않아도 됩니다.

메트릭 모니터링 및 시행 활성화

그러나 시행을 활성화하기 전에 그렇게 하는 것이 기존의 합법적인 사용자를 방해하지 않는지 확인해야 합니다. 반면에 앱 리소스가 의심스럽게 사용되는 경우 더 빨리 시행을 활성화하는 것이 좋습니다.

이 결정을 내리는 데 도움이 되도록 사용하는 서비스에 대한 App Check 측정항목을 볼 수 있습니다.

앱 검사 시행 활성화

앱 확인이 사용자에게 어떤 영향을 미치는지 이해하고 계속 진행할 준비가 되면 앱 확인 시행을 활성화할 수 있습니다.

디버그 환경에서 앱 검사 사용

App Check를 위해 앱을 등록한 후 개발 중 로컬 또는 지속적 통합(CI) 환경과 같이 App Check가 일반적으로 유효한 것으로 분류하지 않는 환경에서 앱을 실행하려는 경우 다음을 생성할 수 있습니다. 실제 증명 공급자 대신 App Check 디버그 공급자를 사용하는 앱의 디버그 빌드입니다.

웹 앱에서 디버그 공급자와 함께 앱 검사 사용을 참조하세요.