firebase AppCheck 설정 in web ( with NextJS ) | localhost에서 사용 (debug mode)

App Check - 승인되지 않은 클라이언트가 백엔드 리소스에 액세스하는 것을 방지하여 API 리소스를 남용하지 않도록 보호

 

1. 빌드 - AppCheck - 앱 - 내 앱 클릭

 

2. reCAPTCHA 보안 비밀 키 입력을 위해,  recaptcha 생성 사이트로 이동하여 reCAPTCHA 생성을 위한 필수 값 입력 후 제출

 

 

3. 제출 후 등록된 reCAPTCHA 비밀 키 복사 클릭

4. 빌드 - AppCheck - 앱 - 내 앱 - reCAPTCHA의 보안 비밀 키에 붙여넣기 후 저장

 

5. 등록 완료 되면 오른쪽 메뉴 열기를 클릭 후 디버그 토큰 관리 클릭

 

6. 디버그 토큰 추가 클릭

(웹 브라우저 콘솔에서 받아오는 방법 or 토큰 생성 버튼 클릭해서 생성하는 방법)

(첫번째 방법으로 설명)

 

7. localhost에서 AppCheck 초기화 (예시코드: Next.js)

 - reCAPTCHA 사이트 키를 복사해서 소스코드에 붙여넣는다.

 - self.FIREBASE_APPCHECK_DEBUG_TOKEN = true를 추가하면 실행시 chrome console에 debug token 값을 출력해준다.

import { initializeApp } from 'firebase/app';
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';

const firebaseConfig = {
	......
};

let app = initializeApp(firebaseConfig);

if (typeof window !== 'undefined') {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; // chrome console에 debug token을 출력해준다.
  const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider('YOUR_reCAPTCHA_SITE_KEY'),

    isTokenAutoRefreshEnabled: true,
  });
}

 

8. npm run dev(Next.js) 실행 후 web console(chrome)에서 출력되는 token 값을 복사해서 디버그 토큰 관리의 값에 붙여 넣은 후 저장하고 완료 버튼을 누른다.

 

9. localhost에서 앱을 사용 후 AppCheck의 API 탭을 확인했을 때 모니터링 되고 있다면 설정 완료!

 

10. 소스코드에서 self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; 를 꼭 제거한다. 그리고 배포한다.

(배포시 노출되면 AppCheck 사용 안하는것과 같음)

(한번 연결되면 같은 컴퓨터의 같은 브라우저 내에서 내부적으로 저장이 됨)

 

- 끝 -

 

 

 

Firebase 문서

https://firebase.google.com/docs/app-check/web/recaptcha-provider?authuser=0&hl=ko#set-ttl 

웹 앱에서 reCAPTCHA v3로 App Check 사용 시작하기  |  Firebase 앱 체크

https://firebase.google.com/docs/app-check/web/debug-provider?hl=ko&authuser=0 

웹 앱에서 디버그 공급자와 함께 앱 확인 사용  |  Firebase 앱 체크