應用檢查 Web Codelab

一、簡介

最後更新： 2023-02-23

如何防止未經授權存取您的 Firebase 資源？

您可以使用Firebase 應用程式檢查來防止未經授權的用戶端存取您的後端資源，方法是要求傳入請求附上該請求來自您的正版應用程式的證明，並阻止沒有適當證明的流量。 Firebase App Check 依賴特定於平台的證明提供者來驗證客戶端的真實性：對於 Web 應用程序，App Check 支援 reCAPTCHA v3 和 reCAPTCHA Enterprise 作為證明提供者。

App Check 可用於保護對 Cloud Firestore、即時資料庫、雲端功能、使用 Identity Platform 的 Firebase 驗證以及您自己託管的後端的請求。

你將建構什麼

在此 Codelab 中，您將透過先新增然後強制執行 App Check 來保護聊天應用程式的安全性。

由您建立的起始友好聊天應用程式。

你將學到什麼

  • 如何監控後端未經授權的訪問
  • 如何在 Firestore 和 Cloud Storage 中新增強制執行
  • 如何使用調試令牌運行應用程式以進行本地開發

你需要什麼

  • 您選擇的 IDE/文字編輯器
  • 套件管理器npm ，通常隨Node.js一起提供
  • 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 的起始程式碼，它將是一個功能齊全的聊天 Web 應用程式。 📁 appcheck目錄將包含 Codelab 的完整程式碼。

3. 建立並設定 Firebase 項目

創建 Firebase 項目

  1. 登入Firebase 。
  2. 在 Firebase 控制台中，按一下“新增專案”，然後將您的 Firebase 專案命名為FriendlyChat。請記住您的 Firebase 專案的專案 ID。
  3. 取消選取為此專案啟用 Google Analytics
  4. 按一下“建立專案”。

我們要建立的應用程式使用可用於網頁應用程式的 Firebase 產品：

  • Firebase 驗證可輕鬆讓您的使用者登入您的應用程式。
  • Cloud Firestore 將結構化資料保存在雲端上，並在資料變更時獲得即時通知。
  • Cloud Storage for Firebase 將檔案保存在雲端。
  • Firebase Hosting 用於託管和服務您的資產。
  • Firebase Cloud Messaging 用於傳送推播通知並顯示瀏覽器彈出通知。
  • Firebase 效能監控，用於收集應用程式的使用者效能資料。

其中一些產品需要特殊配置或需要使用 Firebase 控制台啟用。

將 Firebase Web 應用程式加入到專案中

  1. 按一下網路圖示58d6543a156e56f9.png建立一個新的 Firebase Web 應用程式。
  2. 使用暱稱“Friendly Chat”註冊應用程序，然後選中“同時為此應用程式設定 Firebase 託管”旁邊的方塊。點擊註冊應用程式。
  3. 在下一步中，您將看到使用 npm 和設定物件安裝 Firebase 的命令。您稍後會在 Codelab 中複製此對象，因此現在請按Next 。

將 Firebase 新增到您的 Web 應用程式窗口

  1. 然後您會看到安裝 Firebase CLI 的選項。如果您尚未安裝它，請立即使用命令npm install -g firebase-tools進行安裝。然後按一下“下一步” 。
  2. 然後您會看到一個登入 Firebase 並部署到 Firebase 託管的選項。繼續使用指令firebase login登入 Firebase，然後按一下「繼續到控制台」 。您將在後續步驟中部署到 Firebase 託管。

啟用 Google 登入以進行 Firebase 驗證

為了允許用戶使用其 Google 帳戶登入網路應用程序，我們將使用 Google 登入方法。

您需要啟用 Google 登入：

  1. 在 Firebase 控制台中，找到左側面板中的「建置」部分。
  2. 按一下「驗證」 ，按一下「開始」 （如果適用），然後按一下「登入方法」標籤（或按一下此處直接前往那裡）。
  3. 啟用 Google 登入供應商
  4. 將應用程式面向公眾的名稱設定為“友好聊天”，然後從下拉式選單中選擇專案支援電子郵件。
  5. 點擊“儲存”

f96888973c3d00cc.png

啟用 Cloud Firestore

Web 應用程式使用Cloud Firestore儲存聊天訊息並接收新的聊天訊息。

您需要啟用 Cloud Firestore：

  1. 在 Firebase 控制台的「建置」部分中，按一下Firestore 資料庫。
  2. 按一下 Cloud Firestore 窗格中的建立資料庫。

Cloud Firestore 建立資料庫按鈕

  1. 選擇「以測試模式啟動」選項，然後在閱讀有關安全規則的免責聲明後按一下「下一步」 。

測試模式保證您在開發過程中可以自由寫入資料庫。您已經在起始程式碼中為您編寫了安全規則。您將在本 Codelab 中使用它們。

資料庫安全規則視窗。選項

  1. 設定 Cloud Firestore 資料的儲存位置。您可以將其保留為預設值或選擇離您較近的區域。按一下「啟用」以配置 Firestore。

a3d24f9f4ace1917.png

啟用雲端儲存

此 Web 應用程式使用 Cloud Storage for Firebase 來儲存、上傳和分享圖片。

您需要啟用雲端儲存：

  1. 在 Firebase 控制台的「建置」部分中，按一下「儲存」 。
  2. 如果沒有「開始」按鈕，則表示雲端儲存已啟用，您無需執行下列步驟。
  3. 單擊開始。
  4. 選擇「以測試模式啟動」選項，然後在閱讀有關安全規則的免責聲明後按一下「下一步」 。

使用預設安全規則，任何經過驗證的使用者都可以向 Cloud Storage 寫入任何內容。我們稍後將在此 Codelab 中部署已經為我們編寫的安全規則。

1c875cef812a4384.png

  1. 預先選擇的 Cloud Storage 位置與您為 Cloud Firestore 資料庫選擇的區域相同。按一下“完成”完成設定。

d038569661620910.png

4.配置Firebase

從appcheck-start目錄中呼叫：

firebase use --add

出現提示時，選擇您的專案 ID，然後為您的 Firebase 專案指定一個別名。對於這個項目，您可以只指定一個別名default 。接下來，您需要配置本機專案以使用 Firebase。

  1. 前往Firebase 控制台中的項目設置
  2. 在「您的應用程式」卡中，選擇您需要配置物件的應用程式的暱稱。
  3. 從 Firebase SDK 程式碼段窗格中選擇「配置」 。
  4. 複製配置物件片段，然後將其新增至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.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

從同一appcheck-start目錄，然後呼叫：

firebase experiments:enable webframeworks

這使得該專案所使用的Web 框架支援成為可能。

我們現在應該準備好運行您的專案並測試預設專案是否有效！

5. 在沒有應用程式檢查的情況下嘗試該應用程式

現在您已經配置了應用程式並設定了 SDK，請嘗試以最初設計的方式使用該應用程式。首先，首先安裝所有相依性。從您的終端導航到appcheck-start/hosting目錄。在該目錄中，執行npm install 。這將獲取專案運行所需的所有依賴項。要在目前狀態下啟動應用程序，您可以運行firebase serve 。該應用程式要求您使用 Google 帳戶登入；這樣做，然後嘗試在聊天中發布一些聊天訊息和一些照片。

現在您已經在本地測試了它，是時候在生產中查看它了！運行firebase deploy將 Web 應用程式部署到 Web。此部分是示範 App Check 在現實世界中如何運作的關鍵步驟，因為它需要為 reCAPTCHA Enterprise 證明提供者設定域。

希望您正在體驗該應用程式提供的預設功能。發布聊天訊息以及其他一切只能透過這樣的應用程式完成的事情。當前狀態的缺點是任何擁有上一步中的應用程式配置的人都可以存取您的後端資源。他們仍然需要遵守 Firestore 和 Cloud Storage 系統制定的安全規則，但除此之外，他們仍然可以查詢、儲存和存取儲存在其中的資料。

在接下來的幾個步驟中，您將：

  • 註冊應用程式檢查
  • 驗證執行情況
  • 開始執行規則

6. 開啟應用程式檢查和強制執行

首先，我們為您的專案取得一個 reCAPTCHA Enterprise Key，並將其新增至 App Check 中。首先，您可以造訪 Google Cloud Console 的reCAPTCHA Enterprise部分。選擇您的項目，然後系統會提示您啟用 reCAPTCHA Enterprise API。啟用API 並等待幾分鐘以完成。然後點選「企業金鑰」旁的「建立金鑰」 。然後在此部分中指定顯示名稱並選擇網站類型鍵。您需要指定託管應用程式的網域。由於您打算在 Firebase 託管上託管它，因此您使用預設託管名稱，通常為${YOUR_PROJECT_ID}.web.app 。您可以在 Firebase 控制台的「託管」部分下找到您的託管網域。填寫此資訊後，按「完成」和「建立密鑰」 。

reCAPTCHA 建立關鍵螢幕

完成後，您會在「關鍵詳細資料」頁面頂部看到一個 ID。

reCAPTCHA企業註冊窗口

繼續將此 ID 複製到剪貼簿。這是您用於應用程式檢查的密鑰。接下來，造訪 Firebase 控制台的App Check部分，然後按一下開始。然後，按一下「註冊」 ，然後按一下「reCAPTCHA Enterprise」 ，並將複製的 ID 放入「reCAPTCHA Enterprise 網站金鑰」的文字方塊中。將其餘設定保留為預設值。您的應用程式檢查頁面應如下所示：

您可以在其中註冊 reCAPTCHA 企業令牌的 App Check 應用程式窗口

未經驗證和未執行的請求

現在您已在 Firebase 控制台中註冊了密鑰，請透過執行firebase serve返回在瀏覽器中運行您的網站。在這裡，您可以在本地運行 Web 應用程序，並且可以開始再次向 Firebase 後端發出請求。由於請求針對 Firebase 後端，因此 App Check 會監控這些請求，但不會強制執行。如果您想查看正在通過的請求的狀態，可以存取 Firebase 控制台中套用檢查頁面的API 標籤中的Cloud Firestore部分。由於您尚未將客戶端配置為使用 App Check，因此您應該會看到類似以下內容：

應用程式檢查儀表板顯示您的應用程式的 100% 未經驗證的用戶端請求。

後端有 100% 未經驗證的請求通過。此畫面非常有用，因為它顯示幾乎所有客戶端請求都來自未整合 App Check 的客戶端。

此儀表板可以指示一些事情。它可以指示的第一件事是您的所有客戶端應用程式是否都在執行最新版本的用戶端。如果是，那麼您可以安全地強制執行應用程式檢查，而​​不必擔心關閉應用程式的真實用戶端的存取權限。這可能告訴您的另一件事是有多少次嘗試訪問您的後端而不是來自您的應用程式內部。這可能是用戶在您不知情的情況下直接查詢您的後端。由於您可以看到請求未經驗證，因此是時候看看那些可能向您的後端發出未經驗證的請求的用戶會發生什麼情況，然後再繼續驗證他們的請求。

未經驗證和強制執行的請求

繼續並按下上一畫面中的「強制」按鈕，然後在出現提示時再次按下「強制」 。

未經驗證的指標儀表板，帶有突出顯示的“強制”按鈕

這將開始強制執行應用程式檢查；現在，它會封鎖未透過您選擇的證明提供者（在本例中為 reCAPTCHA Enterprise）驗證的後端服務的請求。返回正在運行的 Web 應用程序，該應用程式應在http://localhost:5000上運行。當您刷新頁面並嘗試從資料庫獲取資料時，沒有任何反應。如果您打開 Chrome 控制台來讀取錯誤，您應該會看到類似以下內容的內容：

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

這是應用程式檢查阻止未在其對 Firebase 資源的請求中傳遞有效證明令牌的請求。目前，您可以關閉應用程式檢查強制執行，在下一節中，您將研究如何將 reCAPTCHA Enterprise 應用程式檢查新增至Friendly Chat 範例。

7. 將 reCAPTCHA Enterprise 金鑰新增至站點

我們將把企業密鑰添加到您的應用程式中。首先，開啟hosting/src/firebase-config.js並將您的 reCAPTCHA Enterprise Key 加入到以下程式碼片段：

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 密鑰，並導入 App Check 庫，以便您可以使用 reCAPTCHA企業提供商。

// 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';

然後，在下一行中，您將建立一個函數來設定 App Check。該函數將首先檢查您是否處於開發環境中，如果是，則列印可用於本機開發的偵錯令牌。

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

現在是時候初始化 App Check 以便與您選擇的提供者合作了——在本例中，它是 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 。您應該注意到應用程式仍然無法在本地加載。這是因為您只向 reCAPTCHA 證明提供者註冊了 Firebase 網域，而不是 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 ）並將其插入到應用程式的溢出選單下的應用程式檢查組態中。

應用程式檢查儀表板指示管理偵錯令牌位置

為令牌指定一個您會記住的唯一名稱，然後按一下「儲存」 。此選項可讓您在應用程式中使用客戶端產生的令牌，這是比產生偵錯令牌並將其嵌入到應用程式中更安全的替代方案。在應用程式中嵌入令牌可能會意外地將其分發給最終用戶，而這些最終用戶可能會繞過您的檢查來利用它。例如，如果您希望在 CI 環境中分發偵錯令牌，請閱讀本文檔以了解有關如何分發它的更多資訊。

使用別名填寫調試令牌的範例

在 Firebase 控制台中註冊偵錯令牌後，您可以重新啟用應用程式檢查強制執行，並透過從終端呼叫firebase serve來測試應用程式內容是否在本機載入。您應該看到先前輸入的資料被提供給 Web 應用程式的本機版本。您仍然應該看到帶有調試令牌的消息打印到控制台。

在生產中嘗試一下

一旦您對 App Check 在本地運行感到滿意，就可以將 Web 應用程式部署到生產環境中。從您的終端再次firebase deploy並重新載入頁面。這將打包您的 Web 應用程式以在 Firebase 託管上運行。當您的應用程式託管在 Firebase Hosting 上後，請嘗試透過${YOUR_PROJECT_ID}.web.app存取您的應用程式。您可以打開 JavaScript 控制台，並且應該不再看到那裡列印的偵錯令牌，並且應該看到聊天載入到您的專案中。此外，與應用程式互動一段時間後，您可以存取Firebase 控制台的「應用程式檢查」部分，並驗證對應用程式的請求是否已切換為所有正在驗證的狀態。

8. 恭喜！

恭喜，您已成功將 Firebase App Check 新增至 Web 應用程式！

您可以設定 Firebase 控制台來處理生產環境的 reCAPTCHA Enterprise 令牌，甚至可以設定用於本機開發的偵錯令牌。這可以確保您的應用程式仍然能夠從已批准的用戶端存取 Firebase 資源，並防止應用程式內發生詐欺活動。

下一步是什麼？

查看以下文件以將 Firebase App Check 新增至：

參考文檔