웹 앱에서 커스텀 제공자로 앱 체크 사용 시작하기

이 페이지에서는 커스텀 App Check 제공자를 사용하여 웹 앱에서 App Check를 사용 설정하는 방법을 설명합니다. App Check를 사용 설정하면 사용자의 앱만 프로젝트의 Firebase 리소스에 액세스할 수 있습니다.

기본 제공자 중 하나에서 App Check를 사용하려면 reCAPTCHA Enterprise를 사용한 App Check 문서를 참조하세요.

시작하기 전에

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

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

2. App Check 제공자 객체 만들기

커스텀 제공자의 App Check 제공자 객체를 만듭니다. 이 객체에는 커스텀 App Check 제공자에서 신뢰성 증명에 필요한 정보를 수집하고 App Check 토큰과 교환하여 토큰 획득 서비스에 전송하는 getToken() 메서드가 있어야 합니다. App Check SDK는 토큰 캐싱을 처리하므로 항상 getToken() 구현에서 새 토큰을 가져옵니다.

Web

import { CustomProvider } from "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);
    });
  }
});
appcheck_custom_provider.js

Web

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

3. App Check 초기화

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

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "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    
});
appcheck_initialize_custom_provider.js

Web

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

다음 단계

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

업데이트된 클라이언트 앱이 Firebase에 전송하는 모든 요청과 함께 App Check 토큰을 보내기 시작하지만 Firebase 제품에서는 Firebase Console의 App Check 섹션에서 적용을 사용 설정할 때까지 토큰이 유효하지 않아도 됩니다.

측정항목 모니터링 및 적용 사용 설정

적용을 사용 설정하기 전에 먼저 이렇게 해도 기존의 정당한 사용자에게 불편을 야기하지 않는지 확인해야 합니다. 반면에 앱 리소스 사용이 의심스러워 보이면 적용을 더 빠르게 사용 설정하는 것이 좋습니다.

사용 중인 서비스의 App Check 측정항목을 확인하면 적용 여부에 대한 판단을 내리는 데 도움이 됩니다.

App Check 적용 사용 설정

App Check가 사용자에게 미치는 영향을 이해하고 계속 진행할 준비가 되면 App Check 적용을 사용 설정할 수 있습니다.

디버그 환경에서 App Check 사용

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

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