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

웹 앱에서 reCAPTCHA v3로 앱 체크 사용 시작하기

이 페이지에서는 웹 앱에서 내장된 App Check reCAPTCHA v3 제공업체 App Check를 사용 설정하면 앱의 Firebase 리소스에 액세스할 수 있습니다. 자세한 내용은 이 기능의 개요

reCAPTCHA v3는 사용자에게 표시되지 않습니다. reCAPTCHA v3 제공자는 사용자에게 테스트 해결을 요구하지 않습니다. reCAPTCHA v3 문서를 참조하세요.

자체 커스텀 제공자와 함께 App Check를 사용하려면 다음을 참고하세요. 맞춤 App Check 제공자를 구현합니다.

1. Firebase 프로젝트 설정

아직 추가하지 않았다면 JavaScript 프로젝트에 Firebase를 추가합니다.
reCAPTCHA v3에 사이트를 등록하고 reCAPTCHA v3 사이트 키와 보안 비밀 키를 가져옵니다.
reCAPTCHA 제공자와 함께 App Check를 사용하도록 앱을 등록합니다. App Check 섹션 Firebase 콘솔 받은 보안 비밀 키를 제공해야 합니다. 이전 단계로 넘어갑니다

Firebase 제품에 적용을 사용 설정하면 등록된 앱만 제품의 백엔드 리소스에 액세스할 수 있으므로 일반적으로 프로젝트의 모든 앱을 등록해야 합니다.
선택사항: 앱 등록 설정에서 맞춤 TTL(수명) 설정 제공업체가 발급한 App Check 토큰의 (TTL)입니다. TTL은 30분에서 7일 사이의 값으로 설정할 수 있습니다. 이 값을 변경할 때는 다음 장단점을 고려하세요.
- 보안: TTL이 짧을수록 유출되거나 가로채인 토큰이 공격자에 의해 악용될 수 있는 기간이 줄어들므로 보안이 강화됩니다.
- 성능: TTL이 짧을수록 앱에서 증명을 더 자주 수행합니다. 앱 증명 프로세스는 실행될 때마다 네트워크 요청에 지연 시간이 추가되므로 짧은 TTL은 앱 성능에 영향을 줄 수 있습니다.
- 할당량 및 비용: 더 짧은 TTL과 빈번한 재증명으로 인해 할당량이 더 빨리 소진되며, 유료 서비스의 경우 더 많은 비용이 발생할 수 있습니다. 할당량 및 한도를 참조하세요.
대부분의 앱에 기본 TTL인 1일이 적합합니다. App Check 라이브러리가 새로고침됩니다. TTL 기간의 약 절반으로 단축할 수 있습니다.

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

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

3. App Check 초기화

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

Web

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

Web

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

다음 단계

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

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

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

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

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

App Check 요청 측정항목 모니터링 Realtime Database, Cloud Firestore, Cloud Storage, Authentication (베타)
Cloud Functions의 App Check 요청 측정항목을 모니터링합니다.

App Check 적용 사용 설정

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

App Check 시행: Realtime Database, Cloud Firestore, Cloud Storage, Authentication (베타)
Cloud Functions에 App Check 시행을 사용 설정합니다.

디버그 환경에서 App Check 사용

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

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