이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹 앱에서 reCAPTCHA v3로 App Check 사용 시작하기

이 페이지에서는 내장된 reCAPTCHA v3 공급자를 사용하여 웹 앱에서 앱 체크를 활성화하는 방법을 보여줍니다. 앱 체크를 활성화하면 내 앱만 프로젝트의 Firebase 리소스에 액세스할 수 있습니다. 이 기능의 개요 를 참조하십시오.

reCAPTCHA v3는 무료 서비스입니다. 앱 체크는 할당량이 무료인 유료 서비스인 reCAPTCHA Enterprise 도 지원합니다. reCAPTCHA v3와 reCAPTCHA Enterprise의 차이점을 알아보려면 기능 비교를 참조하세요.

reCAPTCHA v3는 사용자에게 보이지 않습니다. reCAPTCHA v3 공급자는 사용자가 언제든지 문제를 해결할 것을 요구하지 않습니다. reCAPTCHA v3 설명서 를 참조하십시오.

고유한 사용자 지정 공급자와 함께 앱 체크를 사용하려면 사용자 지정 앱 체크 공급자 구현 을 참조하세요.

1. Firebase 프로젝트 설정

아직 수행하지 않은 경우 JavaScript 프로젝트에 Firebase를 추가하십시오 .
사이트를 reCAPTCHA v3에 등록 하고 reCAPTCHA v3 사이트 키와 비밀 키를 받으세요.
Firebase 콘솔의 앱 체크 섹션에서 reCAPTCHA 공급자를 통해 앱 체크를 사용할 앱을 등록하세요. 이전 단계에서 얻은 비밀 키 를 제공해야 합니다.
Firebase 제품에 대한 시행을 활성화하면 등록된 앱만 제품의 백엔드 리소스에 액세스할 수 있기 때문에 일반적으로 프로젝트의 모든 앱을 등록해야 합니다.
선택사항 : 앱 등록 설정에서 제공업체에서 발급한 앱 체크 토큰에 대한 사용자 지정 TTL(Time-to-Live)을 설정합니다. TTL은 30분에서 7일 사이의 값으로 설정할 수 있습니다. 이 값을 변경할 때 다음 장단점에 유의하십시오.
- 보안: TTL이 짧을수록 공격자가 유출되거나 가로채는 토큰을 남용할 수 있는 기간이 줄어들기 때문에 더 강력한 보안을 제공합니다.
- 성능: TTL이 짧을수록 앱이 증명을 더 자주 수행합니다. 앱 증명 프로세스는 수행될 때마다 네트워크 요청에 대기 시간을 추가하므로 짧은 TTL은 앱의 성능에 영향을 미칠 수 있습니다.
- 할당량 및 비용: 짧은 TTL과 빈번한 재증명은 할당량을 더 빨리 고갈시키고 유료 서비스의 경우 비용이 더 많이 들 수 있습니다. 할당량 및 한도 를 참조하세요.
기본 TTL인 1일은 대부분의 앱에 적합합니다. 앱 체크 라이브러리는 TTL 기간의 약 절반에서 토큰을 새로 고칩니다.

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

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

3. 앱체크 초기화

Firebase 서비스에 액세스하기 전에 애플리케이션에 다음 초기화 코드를 추가하세요. reCAPTCHA 콘솔에서 생성한 reCAPTCHA 사이트 키 를 activate() 에 전달해야 합니다.

Web version 9

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

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

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // 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();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // 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(지속적인 통합) 환경)에서 앱을 실행하려는 경우 다음을 생성할 수 있습니다. 실제 증명 제공자 대신 앱 체크 디버그 제공자를 사용하는 앱의 디버그 빌드.

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