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

이 페이지에서는 웹 앱에서 App Check을(를) 사용 설정하는 방법을 보여줍니다. App Check 제공업체. App Check를 사용 설정하면 다음 사항이 적용됩니다. 내 앱만 프로젝트의 Firebase 리소스에 액세스할 수 있습니다.

기본 제공자 중 하나와 함께 App Check를 사용하려면 다음을 참고하세요. 문서: reCAPTCHA Enterprise에서 App Check

시작하기 전에

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

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

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

커스텀 제공자의 App Check 제공자 객체를 만듭니다. 이 객체 getToken() 메서드가 있어야 합니다. 이 메서드는 커스텀 App Check 제공업체는 진위 증명을 요구하고 App Check 토큰을 받는 대가로 토큰 획득 서비스 이 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 라이브러리가 앱에 설치되면 배포합니다.

업데이트된 클라이언트 앱이 모든 토큰과 함께 App Check개의 토큰을 전송합니다. 요청을 수행할 때 사용할 수 있지만 Firebase 제품은 토큰이 필요하지 않음 App Check 섹션에서 적용을 사용 설정할 때까지 유효합니다. Firebase Console

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

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

App Check 측정항목을 살펴보면 이러한 결정을 내리는 데 도움이 됩니다. 사용하는 서비스의 예는 다음과 같습니다.

App Check 적용 사용 설정

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

디버그 환경에서 App Check 사용

App Check에 앱을 등록한 후 App Check가 일반적으로 유효한 것으로 분류하지 않는 환경의 앱 지속적 통합 (CI) 방식 등을 사용할 수 있습니다. gcloud 명령어를 사용하여 앱의 디버그 빌드를 실제 증명 제공자가 아닌 App Check 디버그 제공자입니다.

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