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

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

기본 제공자 중 하나와 함께 앱 체크를 사용하려면 reCAPTCHA v3로 앱 체크 및 reCAPTCHA Enterprise로 앱 체크 문서를 참고하세요.

시작하기 전에

아직 추가하지 않았다면 자바스크립트 프로젝트에 Firebase를 추가합니다.
커스텀 앱 체크 제공자의 서버 측 로직을 구현합니다.

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

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

2. 앱 체크 제공자 객체 만들기

커스텀 제공자의 앱 체크 제공자 객체를 만듭니다. 이 객체에는 커스텀 앱 체크 제공자에서 신뢰성 증명에 필요한 정보를 수집하고 앱 체크 토큰과 교환하여 토큰 획득 서비스에 전송하는 getToken() 메서드가 있어야 합니다. 앱 체크 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);
    });
  }
});index.js

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

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

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

다음 단계

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

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

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

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

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

실시간 데이터베이스, Cloud Firestore, Cloud Storage, 인증(베타)에 대한 앱 체크 요청 측정항목을 모니터링합니다.
Cloud Functions의 앱 체크 요청 측정항목을 모니터링합니다.

앱 체크 적용 사용 설정

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

실시간 데이터베이스, Cloud Firestore, Cloud Storage, 인증(베타)에 앱 체크 적용을 사용 설정합니다.
Cloud Functions에 앱 체크 적용을 사용 설정합니다.

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

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

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