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

이 페이지에서는 맞춤 앱 체크 공급자를 사용하여 웹 앱에서 앱 체크를 활성화하는 방법을 보여줍니다. 앱 체크를 활성화하면 내 앱만 프로젝트의 Firebase 리소스에 액세스할 수 있습니다.

기본 제공 공급자 중 하나에서 앱 체크를 사용하려면 reCAPTCHA v3를 사용한 앱 체크 및 reCAPTCHA Enterprise를 사용한 앱 체크 문서를 참조하세요.

시작하기 전에

• 아직 수행하지 않은 경우 JavaScript 프로젝트에 Firebase를 추가하십시오 .

• 맞춤 앱 체크 제공업체의 서버측 로직을 구현합니다 .

1. 앱에 앱 체크 라이브러리 추가

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

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

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

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

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. 앱체크 초기화

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

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

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

다음 단계

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

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

메트릭 모니터링 및 적용 활성화

그러나 시행을 활성화하기 전에 그렇게 해도 기존의 적법한 사용자가 중단되지 않는지 확인해야 합니다. 반면에 앱 리소스의 의심스러운 사용이 발견되면 시행을 더 빨리 활성화할 수 있습니다.

이러한 결정을 내리는 데 도움이 되도록 사용하는 서비스에 대한 앱 체크 지표를 살펴볼 수 있습니다.

• 실시간 데이터베이스, Cloud Firestore, Cloud Storage에 대한 앱 체크 요청 측정항목을 모니터링 합니다.
• Cloud Functions에 대한 앱 체크 요청 메트릭을 모니터링 합니다.

앱 체크 시행 사용

앱 체크가 사용자에게 미치는 영향을 이해하고 진행할 준비가 되면 앱 체크 적용을 활성화할 수 있습니다.

• 실시간 데이터베이스, Cloud Firestore 및 Cloud Storage에 대한 앱 체크 시행을 활성화 합니다.
• Cloud Functions에 대한 앱 체크 시행을 활성화 합니다.

디버그 환경에서 앱 체크 사용

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

웹 앱에서 디버그 제공자와 함께 앱 체크 사용을 참조하십시오.

이 페이지에서는 맞춤 앱 체크 공급자를 사용하여 웹 앱에서 앱 체크를 활성화하는 방법을 보여줍니다. 앱 체크를 활성화하면 내 앱만 프로젝트의 Firebase 리소스에 액세스할 수 있습니다.

기본 제공 공급자 중 하나에서 앱 체크를 사용하려면 reCAPTCHA v3를 사용한 앱 체크 및 reCAPTCHA Enterprise를 사용한 앱 체크 문서를 참조하세요.

시작하기 전에

• 아직 수행하지 않은 경우 JavaScript 프로젝트에 Firebase를 추가하십시오 .

• 맞춤 앱 체크 제공업체의 서버측 로직을 구현합니다 .

1. 앱에 앱 체크 라이브러리 추가

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

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

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

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

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. 앱체크 초기화

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

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

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

다음 단계

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

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

메트릭 모니터링 및 적용 활성화

그러나 시행을 활성화하기 전에 그렇게 해도 기존의 적법한 사용자가 중단되지 않는지 확인해야 합니다. 반면에 앱 리소스의 의심스러운 사용이 발견되면 시행을 더 빨리 활성화할 수 있습니다.

이러한 결정을 내리는 데 도움이 되도록 사용하는 서비스에 대한 앱 체크 지표를 살펴볼 수 있습니다.

• 실시간 데이터베이스, Cloud Firestore, Cloud Storage에 대한 앱 체크 요청 측정항목을 모니터링 합니다.
• Cloud Functions에 대한 앱 체크 요청 메트릭을 모니터링 합니다.

앱 체크 시행 사용

앱 체크가 사용자에게 미치는 영향을 이해하고 진행할 준비가 되면 앱 체크 적용을 활성화할 수 있습니다.

• 실시간 데이터베이스, Cloud Firestore 및 Cloud Storage에 대한 앱 체크 시행을 활성화 합니다.
• Cloud Functions에 대한 앱 체크 시행을 활성화 합니다.

디버그 환경에서 앱 체크 사용

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

웹 앱에서 디버그 제공자와 함께 앱 체크 사용을 참조하십시오.