1. 소개
최종 업데이트: 2023년 2월 23일
Firebase 리소스에 대한 무단 액세스를 방지하려면 어떻게 해야 하나요?
Firebase 앱 체크를 사용하여 수신 요청에 요청이 실제 앱에서 온 것임을 증명하는 증명을 첨부하도록 요구하고 적절한 증명이 없는 트래픽을 차단하여 승인되지 않은 클라이언트가 백엔드 리소스에 액세스하지 못하도록 할 수 있습니다. Firebase 앱 체크는 플랫폼별 증명 제공자를 사용하여 클라이언트의 진위 여부를 확인합니다. 웹 앱의 경우 앱 체크는 reCAPTCHA v3 및 reCAPTCHA Enterprise를 증명 제공자로 지원합니다.
앱 체크를 사용하여 Cloud Firestore, 실시간 데이터베이스, Cloud Functions, Identity Platform을 사용한 Firebase 인증, 자체 호스팅 백엔드에 대한 요청을 보호할 수 있습니다.
빌드할 항목
이 Codelab에서는 먼저 App Check를 추가한 다음 적용하여 채팅 애플리케이션을 보호합니다.
학습 내용
- 승인되지 않은 액세스를 위해 백엔드를 모니터링하는 방법
- Firestore 및 Cloud Storage에 적용을 추가하는 방법
- 로컬 개발을 위해 디버그 토큰으로 애플리케이션을 실행하는 방법
필요한 사항
- 원하는 IDE/텍스트 편집기
- 일반적으로 Node.js와 함께 제공되는 패키지 관리자 npm
- Firebase CLI가 설치되어 있고 계정에서 작동하도록 구성되어 있어야 합니다.
- 터미널/콘솔
- 원하는 브라우저(예: Chrome)
- Codelab의 샘플 코드 (코드를 가져오는 방법은 Codelab의 다음 단계를 참고하세요.)
2. 샘플 코드 가져오기
명령줄에서 Codelab의 GitHub 저장소를 클론합니다.
git clone https://github.com/firebase/codelab-friendlychat-web
또는 Git이 설치되어 있지 않은 경우 저장소를 ZIP 파일로 다운로드할 수 있습니다.
시작 앱 가져오기
IDE를 사용하여 클론된 저장소에서 📁 appcheck-start
디렉터리를 열거나 가져옵니다. 이 📁 appcheck-start
디렉터리에는 모든 기능을 갖춘 채팅 웹 앱인 Codelab의 시작 코드가 포함되어 있습니다. 📁 appcheck
디렉터리에는 Codelab의 완성된 코드가 포함되어 있습니다.
3. Firebase 프로젝트 만들기 및 설정
Firebase 프로젝트 만들기
- Google 계정을 사용하여 Firebase Console에 로그인합니다.
- 버튼을 클릭하여 새 프로젝트를 만든 다음 프로젝트 이름 (예:
FriendlyChat
)을 입력합니다.
- 계속을 클릭합니다.
- 메시지가 표시되면 Firebase 약관을 검토하고 이에 동의한 다음 계속을 클릭합니다.
- (선택사항) Firebase Console에서 AI 지원('Firebase의 Gemini'라고 함)을 사용 설정합니다.
- 이 Codelab에서는 Google 애널리틱스가 필요하지 않으므로 Google 애널리틱스 옵션을 사용 중지합니다.
- 프로젝트 만들기를 클릭하고 프로젝트가 프로비저닝될 때까지 기다린 다음 계속을 클릭합니다.
Firebase 요금제 업그레이드
Firebase용 Cloud Storage를 사용하려면 Firebase 프로젝트가 사용한 만큼만 지불하는 요금제 (Blaze)를 사용해야 합니다. 즉, Cloud Billing 계정에 연결되어 있어야 합니다.
- Cloud Billing 계정에는 신용카드와 같은 결제 수단이 필요합니다.
- Firebase와 Google Cloud를 처음 사용하는 경우 $300 크레딧과 무료 체험판 Cloud Billing 계정을 받을 자격이 되는지 확인하세요.
- 이 Codelab을 이벤트의 일환으로 진행하는 경우 주최자에게 사용 가능한 Cloud 크레딧이 있는지 문의하세요.
프로젝트를 Blaze 요금제로 업그레이드하려면 다음 단계를 따르세요.
- Firebase Console에서 요금제 업그레이드를 선택합니다.
- Blaze 요금제를 선택합니다. 화면에 표시된 안내에 따라 Cloud Billing 계정을 프로젝트에 연결합니다.
이 업그레이드의 일환으로 Cloud Billing 계정을 만들어야 하는 경우 업그레이드를 완료하기 위해 Firebase Console의 업그레이드 흐름으로 돌아가야 할 수 있습니다.
프로젝트에 Firebase 웹 앱 추가
- 웹 아이콘
을 클릭하여 새 Firebase 웹 앱을 만듭니다.
- 앱을 닉네임 Friendly Chat으로 등록한 다음 이 앱의 Firebase 호스팅도 설정합니다 옆의 체크박스를 선택합니다. 앱 등록을 클릭합니다.
- 다음 단계에서는 npm을 사용하여 Firebase를 설치하는 명령어와 구성 객체가 표시됩니다. 이 객체는 Codelab 후반부에서 복사하므로 지금은 다음을 누릅니다.
- 그러면 Firebase CLI를 설치하는 옵션이 표시됩니다. 아직 설치하지 않았다면
npm install -g firebase-tools
명령어를 사용하여 지금 설치하세요. 다음을 클릭합니다. - 그러면 Firebase에 로그인하고 Firebase 호스팅에 배포하는 옵션이 표시됩니다.
firebase login
명령어를 사용하여 Firebase에 로그인한 다음 콘솔로 이동을 클릭합니다. 이후 단계에서 Firebase 호스팅에 배포합니다.
Firebase 제품 설정
빌드할 애플리케이션은 웹 앱에 사용할 수 있는 Firebase 제품을 사용합니다.
- Firebase 인증 - 사용자가 앱에 간편하게 로그인할 수 있음
- Cloud Firestore - 클라우드에 구조화된 데이터를 저장하고 데이터가 변경되면 인스턴트 알림을 받을 수 있습니다.
- Firebase용 Cloud Storage를 사용하여 클라우드에 파일을 저장합니다.
- Firebase 호스팅을 사용하여 애셋을 호스팅하고 제공합니다.
- Firebase 클라우드 메시징을 사용하여 푸시 알림을 보내고 브라우저 팝업 알림을 표시합니다.
- Firebase Performance Monitoring을 사용하여 앱의 사용자 성능 데이터를 수집합니다.
이러한 제품 중에는 특수 구성이 필요하거나 Firebase Console을 사용하여 사용 설정해야 하는 제품이 있습니다.
Firebase 인증에 Google 로그인 사용 설정
사용자가 Google 계정으로 웹 앱에 로그인할 수 있도록 Google 로그인 방법을 사용합니다.
Google 로그인을 사용 설정해야 합니다.
- Firebase Console에서 왼쪽 패널의 빌드 섹션을 찾습니다.
- 인증을 클릭하고, 해당하는 경우 시작하기를 클릭한 후 로그인 방법 탭을 클릭합니다 (또는 여기를 클릭하여 바로 이동).
- Google 로그인 제공업체 사용 설정
- 앱의 공개용 이름을 Friendly Chat으로 설정하고 드롭다운 메뉴에서 프로젝트 지원 이메일을 선택합니다.
- 저장을 클릭합니다.
Cloud Firestore 설정
웹 앱은 Cloud Firestore를 사용하여 채팅 메시지를 저장하고 새 채팅 메시지를 수신합니다.
Firebase 프로젝트에서 Cloud Firestore를 설정하는 방법은 다음과 같습니다.
- Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 Firestore 데이터베이스를 선택합니다.
- 데이터베이스 만들기를 클릭합니다.
- 데이터베이스 ID는
(default)
로 설정된 채로 둡니다. - 데이터베이스의 위치를 선택한 다음 다음을 클릭합니다.
실제 앱의 경우 사용자와 가까운 위치를 선택하는 것이 좋습니다. - 테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책조항을 읽습니다.
이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 데이터베이스에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요. - 만들기를 클릭합니다.
Firebase용 Cloud Storage 설정
웹 앱은 Firebase용 Cloud Storage를 사용하여 사진을 저장, 업로드, 공유합니다.
Firebase 프로젝트에서 Firebase용 Cloud Storage를 설정하는 방법은 다음과 같습니다.
- Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 스토리지를 선택합니다.
- 시작하기를 클릭합니다.
- 기본 스토리지 버킷의 위치를 선택합니다.
US-WEST1
,US-CENTRAL1
,US-EAST1
의 버킷은 Google Cloud Storage의 '항상 무료' 등급을 활용할 수 있습니다. 다른 모든 위치의 버킷은 Google Cloud Storage 가격 책정 및 사용량을 따릅니다. - 테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책조항을 읽습니다.
이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 스토리지 버킷에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요. - 만들기를 클릭합니다.
4. Firebase 구성하기
appcheck-start
디렉터리에서 다음을 호출합니다.
firebase use --add
메시지가 표시되면 프로젝트 ID를 선택하고 Firebase 프로젝트에 별칭을 지정합니다. 이 프로젝트에서는 default의 별칭을 지정하면 됩니다. 다음으로 Firebase와 함께 작동하도록 로컬 프로젝트를 구성해야 합니다.
- Firebase Console의 프로젝트 설정으로 이동합니다.
- '내 앱' 카드에서 구성 객체가 필요한 앱의 닉네임을 선택합니다.
- Firebase SDK 스니펫 창에서 Config를 선택합니다.
- 구성 객체 스니펫을 복사한 다음
appcheck-start/hosting/src/firebase-config.js
에 추가합니다. Codelab의 나머지 부분에서는 변수 이름이 config라고 가정합니다.
firebase-config.js
const config = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.firebasestorage.app",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
동일한 appcheck-start
디렉터리에서 다음을 호출합니다.
firebase experiments:enable webframeworks
이렇게 하면 이 프로젝트가 빌드된 웹 프레임워크 지원이 사용 설정됩니다.
이제 프로젝트를 실행하고 기본 프로젝트가 작동하는지 테스트할 준비가 되었습니다.
5. 앱 체크 없이 앱 사용해 보기
이제 앱을 구성하고 SDK를 설정했으므로 원래 설계된 대로 앱을 사용해 보세요. 먼저 모든 종속 항목을 설치합니다. 터미널에서 appcheck-start/hosting
디렉터리로 이동합니다. 해당 디렉터리 내에서 npm install
을 실행합니다. 이렇게 하면 프로젝트가 작동하는 데 필요한 모든 종속 항목이 가져와집니다. 현재 상태로 앱을 시작하려면 firebase serve
를 실행하면 됩니다. 앱에서 Google 계정으로 로그인하라는 메시지가 표시되면 로그인한 후 채팅에 채팅 메시지와 사진을 몇 개 게시해 보세요.
이제 로컬에서 테스트했으므로 프로덕션에서 확인해 보겠습니다. firebase deploy
를 실행하여 웹 애플리케이션을 웹에 배포합니다. 이 부분은 reCAPTCHA Enterprise 증명 제공자를 위해 도메인을 구성해야 하므로 앱 체크가 실제 환경에서 작동하는 방식을 데모하는 데 중요한 단계입니다.
앱에서 제공하는 기본 기능을 사용하고 계실 것입니다. 채팅 메시지 게시 및 이와 같은 앱에서만 실행해야 하는 모든 작업 현재 상태의 단점은 이전 단계의 앱 구성이 있는 사용자가 백엔드 리소스에 액세스할 수 있다는 것입니다. Firestore 및 Cloud Storage 시스템에서 설정한 보안 규칙은 여전히 준수해야 하지만, 그 외에는 여기에 저장된 데이터를 쿼리, 저장, 액세스할 수 있습니다.
다음 몇 단계에서는 다음 작업을 수행합니다.
- 앱 체크 등록
- 시행 유효성 검사
- 규칙 시행 시작
6. 앱 체크 및 적용 사용 설정
먼저 프로젝트의 reCAPTCHA Enterprise 키를 가져와 앱 체크에 추가해 보겠습니다. 먼저 Google Cloud 콘솔의 reCAPTCHA Enterprise 섹션으로 이동합니다. 프로젝트를 선택하면 reCAPTCHA Enterprise API를 사용 설정하라는 메시지가 표시됩니다. API를 사용 설정하고 완료될 때까지 몇 분 정도 기다립니다. 그런 다음 엔터프라이즈 키 옆에 있는 키 만들기를 클릭합니다. 그런 다음 이 섹션에서 표시 이름을 지정하고 웹사이트 유형 키를 선택합니다. 앱이 호스팅되는 도메인을 지정해야 합니다. Firebase 호스팅에서 호스팅할 예정이므로 일반적으로 ${YOUR_PROJECT_ID}.web.app
인 기본 호스팅 이름을 사용합니다. 호스팅 도메인은 Firebase Console의 호스팅 섹션에서 확인할 수 있습니다. 이 정보를 입력한 후 완료 및 키 만들기를 누릅니다.
완료되면 주요 세부정보 페이지 상단에 ID가 표시됩니다.
이 ID를 클립보드에 복사합니다. App Check에 사용하는 키입니다. 그런 다음 Firebase Console의 앱 체크 부분으로 이동하여 시작하기를 클릭합니다. 그런 다음 등록을 클릭하고 reCAPTCHA Enterprise를 클릭한 후 복사한 ID를 reCAPTCHA Enterprise 사이트 키 텍스트 상자에 붙여넣습니다. 나머지 설정은 기본값으로 둡니다. 앱 확인 페이지는 다음과 같이 표시됩니다.
확인되지 않고 시행되지 않은 요청
이제 Firebase Console에 등록된 키가 있으므로 firebase serve
를 실행하여 브라우저에서 사이트를 다시 실행합니다. 이제 웹 앱이 로컬로 실행되며 Firebase 백엔드에 대한 요청을 다시 시작할 수 있습니다. 요청이 Firebase 백엔드로 전송되므로 앱 체크에서 이러한 요청을 모니터링하지만 적용하지는 않습니다. 전송되는 요청의 상태를 확인하려면 Firebase 콘솔의 App Check 페이지에 있는 API 탭의 Cloud Firestore 섹션을 방문하면 됩니다. 아직 앱 확인을 사용하도록 클라이언트를 구성하지 않았으므로 다음과 비슷한 내용이 표시됩니다.
백엔드에 100% 미인증 요청이 전송됩니다. 이 화면은 앱 체크가 통합되지 않은 클라이언트에서 거의 모든 클라이언트 요청이 발생하고 있음을 보여주므로 유용합니다.
이 대시보드는 몇 가지 사항을 나타낼 수 있습니다. 가장 먼저 나타낼 수 있는 것은 모든 클라이언트 앱이 최신 버전의 클라이언트를 실행하고 있는지 여부입니다. 이러한 경우 애플리케이션의 정품 클라이언트의 액세스를 사용 중지하지 않고도 앱 체크를 안전하게 적용할 수 있습니다. 이 정보는 앱에서 발생하지 않은 백엔드 액세스 시도 횟수도 알려줍니다. 이는 사용자가 모르는 사이에 백엔드를 직접 쿼리하는 것일 수 있습니다. 요청이 인증되지 않았음을 확인할 수 있으므로, 요청을 인증된 상태로 만들기 전에 백엔드에 인증되지 않은 요청이 있을 수 있는 사용자에게 어떤 일이 일어나는지 확인해야 합니다.
확인되지 않았으며 시행된 요청
이전 화면에서 강제 적용 버튼을 누르고 메시지가 표시되면 강제 적용을 다시 누릅니다.
이렇게 하면 앱 체크가 시행됩니다. 이제 선택한 증명 제공업체 (이 경우 reCAPTCHA Enterprise)를 통해 인증되지 않은 백엔드 서비스 요청이 차단됩니다. http://localhost:5000
에서 실행 중인 웹 앱으로 돌아갑니다. 페이지를 새로고침하고 데이터베이스에서 데이터를 가져오려고 하면 아무 일도 일어나지 않습니다. Chrome 콘솔을 열어 오류를 읽으면 다음과 비슷한 내용이 표시됩니다.
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
이는 Firebase 리소스에 대한 요청에 유효한 증명 토큰이 전달되지 않은 요청을 앱 체크가 차단한 것입니다. 지금은 앱 체크 강제 적용을 사용 중지하고 다음 섹션에서 Friendly Chat 예시에 reCAPTCHA Enterprise 앱 체크를 추가하는 방법을 살펴보겠습니다.
7. 사이트에 reCAPTCHA Enterprise 키 추가
애플리케이션에 엔터프라이즈 키를 추가할 예정입니다. 먼저 hosting/src/firebase-config.js
을 열고 다음 코드 스니펫에 reCAPTCHA Enterprise 키를 추가합니다.
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
이 작업이 완료되면 hosting/src/index.js
를 열고 51번째 줄에 firebase-config.js에서 가져오기를 추가하여 reCAPTCHA 키를 가져오고 reCAPTCHA Enterprise 제공업체와 함께 작업할 수 있도록 앱 체크 라이브러리도 가져옵니다.
// add from here
import {
initializeAppCheck,
ReCaptchaEnterpriseProvider,
} from 'firebase/app-check';
// to here
// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
그런 다음 다음 줄에서 앱 체크를 설정하는 함수를 만듭니다. 이 함수는 먼저 개발 환경에 있는지 확인하고, 개발 환경에 있는 경우 로컬 개발에 사용할 수 있는 디버그 토큰을 출력합니다.
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
}
// to here
이제 선택한 제공자(이 경우 reCAPTCHA Enterprise)와 함께 작동하도록 앱 체크를 초기화할 차례입니다. 그런 다음 백그라운드에서 App Check 토큰을 자동으로 새로고침하여 App Check 토큰이 오래된 경우 사용자가 서비스와 상호작용할 때 발생하는 모든 유형의 지연을 방지하는 것이 좋습니다.
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
// add from here
// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
// to here
}
마지막으로 앱이 초기화되었는지 확인한 후 방금 만든 setupAppCheck 함수를 호출해야 합니다. hosting/src/index.js
파일 하단에 최근에 추가한 메서드 호출을 추가합니다.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
먼저 로컬에서 테스트하기
먼저 로컬에서 애플리케이션을 테스트합니다. 아직 애플리케이션을 로컬로 제공하지 않는 경우 firebase serve
를 실행합니다. 애플리케이션이 여전히 로컬에서 로드되지 않는 것을 확인할 수 있습니다. Firebase 도메인만 reCAPTCHA 증명 제공업체에 등록하고 localhost 도메인은 등록하지 않았기 때문입니다. 사용자가 머신에서 로컬로 실행되는 애플리케이션에서 제한된 백엔드에 액세스할 수 있으므로 localhost를 승인된 도메인으로 등록해서는 안 됩니다. 대신 self.FIREBASE_APPCHECK_DEBUG_TOKEN = true
를 설정했으므로 JavaScript 콘솔에서 다음과 비슷한 줄을 확인해야 합니다.
App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.
제공된 디버그 토큰 (예시에서는 55183c20-de61-4438-85e6-8065789265be
)을 가져와 앱의 더보기 메뉴에 있는 App Check 구성에 삽입합니다.
기억할 수 있는 고유한 이름을 토큰에 지정하고 저장을 클릭합니다. 이 옵션을 사용하면 디버그 토큰을 생성하여 애플리케이션 내에 삽입하는 것보다 더 안전한 방법인 클라이언트 생성 토큰을 앱과 함께 사용할 수 있습니다. 앱 내에 토큰을 삽입하면 실수로 최종 사용자에게 배포될 수 있으며, 최종 사용자가 검사를 우회하여 이를 악용할 수 있습니다. CI 환경에서 디버그 토큰을 배포하려면 이 문서를 읽고 배포 방법을 자세히 알아보세요.
Firebase Console에 디버그 토큰을 등록한 후 앱 콘텐츠가 로컬로 로드되는지 테스트하기 위해 터미널에서 firebase serve
를 호출하여 앱 확인 시행을 다시 사용 설정할 수 있습니다. 이전에 입력한 데이터가 웹 애플리케이션의 로컬 버전에 제공됩니다. 디버그 토큰이 포함된 메시지가 콘솔에 계속 표시됩니다.
프로덕션에서 사용해 보기
App Check가 로컬에서 작동하는지 확인한 후 웹 애플리케이션을 프로덕션에 배포합니다. 터미널에서 firebase deploy
를 다시 호출하고 페이지를 새로고침합니다. 이렇게 하면 Firebase 호스팅에서 실행할 수 있도록 웹 애플리케이션이 패키징됩니다. 애플리케이션이 Firebase 호스팅에 호스팅되면 ${YOUR_PROJECT_ID}.web.app
에서 애플리케이션을 방문해 보세요. JavaScript 콘솔을 열면 디버그 토큰이 더 이상 출력되지 않고 프로젝트에 채팅이 로드되는 것을 확인할 수 있습니다. 또한 애플리케이션과 잠시 상호작용한 후 Firebase Console의 앱 체크 섹션을 방문하여 애플리케이션에 대한 요청이 모두 확인된 상태로 전환되었는지 확인할 수 있습니다.
8. 수고하셨습니다.
수고하셨습니다. 웹 앱에 Firebase 앱 체크를 추가했습니다.
프로덕션 환경의 reCAPTCHA Enterprise 토큰을 처리하도록 Firebase Console을 설정하고 로컬 개발을 위한 디버그 토큰도 설정합니다. 이렇게 하면 앱이 승인된 클라이언트에서 Firebase 리소스에 계속 액세스할 수 있으며 애플리케이션 내에서 사기성 활동이 발생하는 것을 방지할 수 있습니다.
다음 단계
다음 문서를 확인하여 Firebase 앱 체크를 추가하세요.