Firebase 網絡代碼實驗室

在本程式碼實驗室中，您將學習如何使用火力地堡很容易地通過實施和部署使用火力地堡的產品和服務，聊天客戶端創建Web應用程序。

你會學到什麼

使用 Cloud Firestore 和 Cloud Storage for Firebase 同步數據。
使用 Firebase 身份驗證對您的用戶進行身份驗證。
在 Firebase 託管上部署您的網絡應用。
使用 Firebase 雲消息傳遞發送通知。
收集您的 Web 應用程序的性能數據。

你需要什麼

您所選擇的IDE /文本編輯器，如WebStorm ，凌動，崇高，或VS代碼
包管理器NPM ，通常附帶的Node.js
一個終端/控制台
您選擇的瀏覽器，例如 Chrome
codelab的示例代碼（獲取代碼的方法見codelab下一步）

克隆代碼實驗室的GitHub的庫在命令行：

git clone https://github.com/firebase/codelab-friendlychat-web

另外，如果你沒有安裝git的，你可以下載庫為ZIP文件。

導入入門應用

使用你的IDE，打開或導入📁 web-start從克隆庫目錄。這📁 web-start目錄包含代碼實驗室，這將是一個全功能的聊天web應用程序的啟動代碼。

創建 Firebase 項目

登錄火力地堡。
在火力地堡控制台中，單擊添加項目，然後命名你的火力地堡項目FriendlyChat。記住您的 Firebase 項目的項目 ID。
取消選中為這個項目谷歌分析
單擊創建項目。

我們將要構建的應用程序使用可用於網絡應用程序的 Firebase 產品：

火力地堡認證，很容易讓你的用戶登錄到您的應用程序。
雲公司的FireStore保存在雲中的結構化數據，並得到即時通知的數據發生變化時。
雲存儲的火力地堡保存在雲中的文件。
火力地堡主機託管和投放您的資產。
火力點雲信息發送推送通知和顯示瀏覽器彈出通知。
火力性能監控收集用戶的性能數據為您的應用程序。

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

將 Firebase 網絡應用添加到項目

單擊網絡圖標創建一個新的 Firebase 網絡應用。
註冊暱稱親切交談的應用程序，然後檢查旁邊還設置了火力地堡主機為這個應用程序的複選框。點擊註冊應用。
在下一步中，您將看到一個配置對象。僅複製JS對象（而不是周圍的HTML）進入火力-config.js

註冊網頁應用截圖

為了讓用戶在與他們的谷歌帳戶的Web應用程序簽名，我們將使用谷歌登錄方法。

你將需要啟用谷歌登錄：

在火力地堡控制台，定位在左側面板中的Build部分。
點擊身份驗證，然後點擊登錄方法選項卡（或點擊這裡去直接出現）。
啟用谷歌登錄提供者，然後點擊保存。
設置你的應用友好的交談的面向公眾的名稱，然後從下拉菜單中選擇項目支持電子郵件。
配置OAuth同意畫面在谷歌雲端控制台並添加一個標誌：

啟用 Cloud Firestore

Web應用程序使用雲公司的FireStore保存聊天消息和接收新的聊天消息。

您需要啟用 Cloud Firestore：

在火力地堡控制台的Build部分中，單擊數據庫的FireStore。
單擊雲公司的FireStore窗格中創建數據庫。

在測試模式選項選擇開始，然後單擊下一步閱讀安全規則的免責條款之後。

測試模式確保我們在開發過程中可以自由寫入數據庫。我們稍後將在此代碼實驗室中使我們的數據庫更加安全。

設置您的 Cloud Firestore 數據的存儲位置。您可以將其保留為默認值，也可以選擇離您最近的區域。點擊完成以提供公司的FireStore。

啟用雲存儲

該網絡應用使用 Cloud Storage for Firebase 來存儲、上傳和共享圖片。

您需要啟用雲存儲：

在火力地堡控制台的Build部分中，單擊存儲。
如果沒有開始使用按鈕，這意味著雲存儲已經啟用，而你並不需要按照下面的步驟。
點擊開始使用。
閱讀關於你的火力地堡項目安全規則的免責聲明，然後單擊下一步。

使用默認安全規則，任何經過身份驗證的用戶都可以向 Cloud Storage 寫入任何內容。我們稍後將在此 Codelab 中使我們的存儲更加安全。

Cloud Storage 位置與您為 Cloud Firestore 數據庫選擇的區域相同。點擊完成以完成安裝。

Firebase 命令行界面 (CLI) 允許您使用 Firebase 託管在本地為您的 Web 應用提供服務，以及將您的 Web 應用部署到您的 Firebase 項目。

通過運行以下 npm 命令安裝 CLI：

npm -g install firebase-tools

通過運行以下命令驗證 CLI 是否已正確安裝：

firebase --version

確保 Firebase CLI 的版本為 v4.1.0 或更高版本。

通過運行以下命令授權 Firebase CLI：

firebase login

我們已經設置了網絡應用模板，以從應用的本地目錄（您之前在 codelab 中克隆的存儲庫）中提取應用的 Firebase 託管配置。但是要提取配置，我們需要將您的應用與您的 Firebase 項目相關聯。

請確保您的命令行訪問你的應用程序的本地web-start目錄。
通過運行以下命令將您的應用與 Firebase 項目相關聯：

firebase use --add

提示時，選擇您的項目編號，然後給你的火力地堡項目的別名。

如果您有多個環境（生產、暫存等），則別名很有用。然而，對於本程式碼實驗室，就讓我們用的別名default 。

按照命令行上的其餘說明進行操作。

現在您已經導入並配置了您的項目，您已準備好第一次運行 Web 應用程序。

在從一個控制台web-start目錄下，運行下面的火力地堡CLI命令：

firebase serve --only hosting

您的命令行應顯示以下響應：

✔  hosting: Local server: http://localhost:5000

我們使用的火力地堡主機模擬器在本地提供我們的應用程序。 Web應用程序現在應該可以從HTTP：//本地主機：5000 。是位於下的所有文件public子目錄供應。

使用瀏覽器，在打開的應用程序的http：//本地主機：5000 。

您應該會看到您的 FriendlyChat 應用程序的用戶界面，它（尚未！）運行：

該應用程序現在無法執行任何操作，但在您的幫助下它很快就會執行！到目前為止，我們只為您佈置了 UI。

現在讓我們建立一個實時聊天！

導入 Firebase SDK

我們需要將 Firebase SDK 導入應用程序。有多種方式來做到這一點我們的文檔中描述。例如，您可以從我們的 CDN 導入庫。或者，您可以使用 npm 在本地安裝它，如果您使用的是 Browserify，則將其打包到您的應用程序中。

我們打算從NPM獲得火力地堡SDK和使用的WebPack捆綁我們的代碼。我們這樣做是為了讓 Webpack 可以刪除任何不需要的代碼，保持我們的 JS 包大小較小，以確保我們的應用程序盡快加載。對於本程式碼實驗室，我們已經創建了一個web-start/package.json ，其中包括火力地堡SDK的依賴，以及進口所需要的功能，在頂部文件web-start/src/index.js 。

包.json

"dependencies": {
  "firebase": "^9.0.0"
}

索引.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

在此 Codelab 中，我們將使用 Firebase Authentication、Cloud Firestore、Cloud Storage、Cloud Messaging 和 Performance Monitoring，因此我們將導入它們的所有庫。在您未來的應用中，請確保您只導入您需要的 Firebase 部分，以縮短應用的加載時間。

安裝 Firebase SDK 並開始您的 Webpack 構建

我們需要運行一些命令來啟動我們的應用程序構建。

打開一個新的終端窗口
離開終端運行firebase serve開放。這仍然是我們將用來在本地託管應用程序的內容
請確保你在web-start目錄
運行npm install下載SDK火力地堡
運行npm run start啟動的WebPack。 Webpack 現在將不斷為 codelab 的其餘部分重建我們的源代碼。

配置 Firebase

我們還需要配置 Firebase SDK 以告訴它我們正在使用哪個 Firebase 項目。

轉到您的項目設置在控制台火力地堡
在“您的應用”卡片中，選擇您需要配置對象的應用的暱稱。
從 Firebase SDK 代碼段窗格中選擇“配置”。
複製配置對象片斷，然後將其添加到web-start/src/firebase-config.js 。

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",
};

現在，進入底部web-start/src/index.js和初始化火力地堡：

索引.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

因為它的進口和在初始化的火力地堡SDK現在應該準備使用index.html 。現在我們要實現登錄使用的用戶火力地堡認證。

在應用中，當用戶點擊了在與谷歌鍵， signIn功能被觸發。（我們已經為您設置好了！）對於此代碼實驗室，我們希望授權 Firebase 使用 Google 作為身份提供者。我們將使用一個彈出，但其他幾種方法可從火力地堡。

在web-start目錄，子目錄src/ ，開放index.js 。
查找功能signIn 。
用以下代碼替換整個函數。

索引.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

該signOut當用戶點擊退出按鈕功能被觸發。

回到文件src/index.js 。
查找功能signOutUser 。
用以下代碼替換整個函數。

索引.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

跟踪認證狀態

為了相應地更新我們的 UI，我們需要一種方法來檢查用戶是登錄還是退出。使用 Firebase 身份驗證，您可以在每次身份驗證狀態更改時觸發的身份驗證狀態上註冊觀察者。

回到文件src/index.js 。
查找功能initFirebaseAuth 。
用以下代碼替換整個函數。

索引.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

上述寄存器的代碼的功能authStateObserver作為認證狀態觀測。每次身份驗證狀態更改時（用戶登錄或退出時）都會觸發它。此時，我們將更新 UI 以顯示或隱藏登錄按鈕、註銷按鈕、登錄用戶的個人資料圖片等。所有這些 UI 部分都已經實現。

顯示登錄用戶的信息

我們希望在應用程序的頂部欄中顯示登錄用戶的個人資料圖片和用戶名。在火力地堡，在登錄的用戶的數據始終處於可用currentUser對象。此前，我們成立了authStateObserver當用戶登錄，使我們的UI更新相應功能來觸發。它將調用getProfilePicUrl和getUserName觸發時。

回到文件src/index.js 。
查找功能getProfilePicUrl和getUserName 。
用以下代碼替換這兩個函數。

索引.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

如果用戶在未登錄時嘗試發送消息，我們會顯示一條錯誤消息。（不過您可以嘗試！）因此，我們需要檢測用戶是否實際登錄。

回到文件src/index.js 。
查找功能isUserSignedIn 。
用以下代碼替換整個函數。

索引.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

測試登錄應用程序

如果您的應用仍在提供服務，請在瀏覽器中刷新您的應用。否則，運行firebase serve --only hosting在命令行上，開始從服務應用程序的http：//本地主機：5000 ，然後在瀏覽器中打開它。
使用登錄按鈕和您的 Google 帳戶登錄應用程序。如果你看到一個錯誤信息，指出auth/operation-not-allowed ，檢查，以確保您啟用了谷歌登錄在作為火力地堡控制台認證供應商。
登錄後，應顯示您的個人資料圖片和用戶名：

在本節中，我們將向 Cloud Firestore 寫入一些數據，以便我們可以填充應用的 UI。這可以手動與進行火力地堡控制台，但我們會在應用程序本身來證明一個基本的雲計算公司的FireStore寫做。

數據模型

Cloud Firestore 數據分為集合、文檔、字段和子集合。我們會聊天的每封郵件存儲為稱為頂級集合文件messages 。

將消息添加到 Cloud Firestore

來存儲用戶寫入的聊天消息，我們將使用雲計算公司的FireStore 。

在本節中，您將添加用戶將新消息寫入數據庫的功能。單擊發送按鈕的用戶將觸發下面的代碼段。它增加了與消息字段在你的雲計算公司的FireStore實例的內容的消息對象messages集合。所述add()方法增加了一個新的文檔自動生成的ID添加到集合。

回到文件src/index.js 。
查找功能saveMessage 。
用以下代碼替換整個函數。

索引.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

測試發送消息

如果您的應用仍在提供服務，請在瀏覽器中刷新您的應用。否則，運行firebase serve --only hosting在命令行上，開始從服務應用程序的http：//本地主機：5000 ，然後在瀏覽器中打開它。
在簽約之後，輸入信息，如“嘿！”，然後單擊發送。這會將消息寫入 Cloud Firestore。但是，你還不會看到數據在實際的Web應用程序，因為我們仍然需要實現檢索數據（代碼實驗室的下一節）。
您可以在 Firebase 控制台中看到新添加的消息。打開您的 Firebase 控制台。在構建部分單擊數據庫的FireStore（或點擊這裡，並選擇您的項目），你應該看到這些消息收集與新添加的消息：

同步郵件

要在應用程序中讀取消息，我們需要添加在數據更改時觸發的偵聽器，然後創建一個顯示新消息的 UI 元素。

我們將添加用於偵聽來自應用程序的新添加消息的代碼。在此代碼中，我們將註冊偵聽數據更改的偵聽器。我們將只顯示聊天的最後 12 條消息，以避免在加載時顯示很長的歷史記錄。

回到文件src/index.js 。
查找功能loadMessages 。
用以下代碼替換整個函數。

索引.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

要收聽數據庫中的信息中，我們通過創建一個集合的查詢collection函數來指定，我們要聽是在收集的數據。在上面的代碼中，我們聽著內變動messages集合，這是存儲聊天消息的地方。我們也只用聽過去12消息施加限制.limit(12)並使用按日期排序郵件orderBy('timestamp', 'desc')以獲得12最新消息。

所述onSnapshot函數以一個查詢作為它的第一個參數，和一個回調函數作為其第二個。當與查詢匹配的文檔有任何更改時，將觸發回調函數。這可能是因為消息被刪除、修改或添加。您可以在閱讀更多關於這個雲公司的FireStore文檔。

測試同步消息

如果您的應用仍在提供服務，請在瀏覽器中刷新您的應用。否則，運行firebase serve --only hosting在命令行上，開始從服務應用程序的http：//本地主機：5000 ，然後在瀏覽器中打開它。
您之前在數據庫中創建的消息應顯示在 FriendlyChat UI 中（見下文）。隨意編寫新消息；他們應該立即出現。
（可選）可以嘗試手動刪除，修改，或直接在火力地堡控制台的數據庫部分添加新的消息;任何更改都應反映在 UI 中。

恭喜！您正在您的應用中閱讀 Cloud Firestore 文檔！

我們現在將添加一個共享圖像的功能。

Cloud Firestore 適合存儲結構化數據，而 Cloud Storage 更適合存儲文件。雲存儲的火力地堡是一個文件/ Blob存儲服務，我們會使用它，使用我們的應用程序用戶共享存儲的任何圖像。

將圖像保存到雲存儲

對於此代碼實驗室，我們已經為您添加了一個觸發文件選擇器對話框的按鈕。選擇一個文件後， saveImageMessage函數被調用，你可以得到所選文件的引用。該saveImageMessage功能完成以下操作：

在聊天提要中創建“佔位符”聊天消息，以便用戶在我們上傳圖像時看到“加載”動畫。
上傳的圖像文件，以雲存儲到該路徑： /<uid>/<messageId>/<file_name>
為圖像文件生成一個公開可讀的 URL。
使用新上傳的圖像文件的 URL 代替臨時加載的圖像更新聊天消息。

現在您將添加發送圖像的功能：

回到文件src/index.js 。
查找功能saveImageMessage 。
用以下代碼替換整個函數。

索引.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

測試發送圖片

如果您的應用仍在提供服務，請在瀏覽器中刷新您的應用。否則，運行firebase serve --only hosting在命令行上，開始從服務應用程序的http：//本地主機：5000 ，然後在瀏覽器中打開它。
登錄後，點擊圖片上傳按鈕並使用文件選擇器選擇一個圖像文件。如果你正在尋找一個圖像，隨意使用這個咖啡杯的漂亮的圖片。
應用程序的 UI 中應該會出現一條帶有您選擇的圖像的新消息：

如果您在未登錄的情況下嘗試添加圖像，您應該會看到 Toast 通知，告訴您必須登錄才能添加圖像。

我們現在將添加對瀏覽器通知的支持。該應用程序將在聊天中發布新消息時通知用戶。火力地堡雲端通訊（FCM）是一個跨平台的通訊解決方案，讓您可靠地無成本提供消息和通知。

添加 FCM 服務工作者

該網站的應用程序需要服務人員將接收和顯示網頁的通知。

從web-start目錄下，在src目錄中，打開firebase-messaging-sw.js 。
將以下內容添加到該文件中。

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

Service Worker 只需要加載和初始化 Firebase Cloud Messaging SDK，它將負責顯示通知。

獲取 FCM 設備令牌

當通知已經一個設備或瀏覽器上啟用，你會得到令牌的裝置。我們使用此設備令牌向特定設備或特定瀏覽器發送通知。

當用戶招牌式，我們稱之為saveMessagingDeviceToken功能。這就是我們會從瀏覽器的令牌設備FCM並保存到雲公司的FireStore。

回到文件src/index.js 。
查找功能saveMessagingDeviceToken 。
用以下代碼替換整個函數。

索引.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

但是，此代碼最初不起作用。為了讓您的應用能夠檢索設備令牌，用戶需要授予您的應用顯示通知的權限（代碼實驗室的下一步）。

請求顯示通知的權限

如果用戶尚未授予您的應用顯示通知的權限，您將不會獲得設備令牌。在這種情況下，我們所說的firebase.messaging().requestPermission()方法，它會顯示一個瀏覽器對話框，詢問此權限（在支持的瀏覽器）。

回到文件src/index.js 。
查找功能requestNotificationsPermissions 。
用以下代碼替換整個函數。

索引.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

獲取您的設備令牌

如果您的應用仍在提供服務，請在瀏覽器中刷新您的應用。否則，運行firebase serve --only hosting在命令行上，開始從服務應用程序的http：//本地主機：5000 ，然後在瀏覽器中打開它。
登錄後，通知權限對話框應出現：
點擊允許。
打開瀏覽器的 JavaScript 控制台。您應該看到以下消息： Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
複製您的設備令牌。您將在代碼實驗室的下一階段需要它。

向您的設備發送通知

現在您擁有設備令牌，您可以發送通知。

打開了火力地堡控制台的雲郵件選項卡。
點擊“新通知”
輸入通知標題和通知文本。
在屏幕右側，點擊“發送測試消息”
輸入您從瀏覽器的 JavaScript 控制台複製的設備令牌，然後單擊加號 ("+")
點擊“測試”

如果您的應用程序在前台，您將在 JavaScript 控制台中看到通知。

如果您的應用程序在後台運行，則瀏覽器中應顯示通知，如下例所示：

查看數據庫安全規則

雲公司的FireStore使用特定規則的語言來定義訪問權限，安全性和數據的驗證。

在本 Codelab 開始時設置 Firebase 項目時，我們選擇使用“測試模式”默認安全規則，這樣我們就不會限制對數據存儲區的訪問。在火力地堡控制台，在數據庫部的規則選項卡，您可以查看和修改這些規則。

現在，您應該會看到默認規則，這些規則不限制對數據存儲的訪問。這意味著任何用戶都可以讀取和寫入數據存儲中的任何集合。

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

我們將使用以下規則更新規則以限制事物：

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

更新數據庫安全規則

有兩種方法可以編輯數據庫安全規則，在 Firebase 控制台中或從使用 Firebase CLI 部署的本地規則文件中。

要在 Firebase 控制台中更新安全規則：

轉到左側面板中的數據庫部分，然後單擊規則選項卡。
將控制台中已有的默認規則替換為上面顯示的規則。
點擊發布。

從本地文件更新安全規則：

從web-start目錄，打開firestore.rules 。
用上面顯示的規則替換文件中已有的默認規則。
從web-start目錄，打開firebase.json 。
添加firestore.rules屬性指向firestore.rules ，如下圖所示。（該hosting屬性應該已經在文件中。）

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

通過運行以下命令，使用 Firebase CLI 部署安全規則：

firebase deploy --only firestore

您的命令行應顯示以下響應：

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

查看 Cloud Storage 安全規則

雲存儲的火力地堡使用特定規則的語言來定義訪問權限，安全性和數據的驗證。

在本 Codelab 開始時設置 Firebase 項目時，我們選擇使用默認的 Cloud Storage 安全規則，該規則僅允許經過身份驗證的用戶使用 Cloud Storage。在火力地堡控制台，在存儲部分的規則選項卡，您可以查看和修改規則。您應該會看到允許任何登錄用戶讀取和寫入存儲桶中的任何文件的默認規則。

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

我們將更新規則以執行以下操作：

允許每個用戶只寫入他們自己的特定文件夾
允許任何人從 Cloud Storage 讀取
確保上傳的文件是圖片
將可上傳的圖片大小限制為最大 5 MB

這可以使用以下規則來實現：

存儲規則

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

更新 Cloud Storage 安全規則

有兩種方法可以編輯您的存儲安全規則：在 Firebase 控制台中或從使用 Firebase CLI 部署的本地規則文件中。

要在 Firebase 控制台中更新安全規則：

轉到左側面板中的存儲部分，然後單擊規則選項卡。
將控制台中已有的默認規則替換為上面顯示的規則。
點擊發布。

從本地文件更新安全規則：

從web-start目錄，打開storage.rules 。
用上面顯示的規則替換文件中已有的默認規則。
從web-start目錄，打開firebase.json 。
添加storage.rules屬性指向storage.rules文件，如下圖所示。（該hosting和database屬性應該已經在文件中。）

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

通過運行以下命令，使用 Firebase CLI 部署安全規則：

firebase deploy --only storage

您的命令行應顯示以下響應：

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

您可以使用 Performance Monitoring SDK 從您的應用中收集真實世界的性能數據，然後在 Firebase 控制台中查看和分析該數據。性能監控可幫助您了解可以在何時何地改進應用程序的性能，以便您可以使用該信息來解決性能問題。

有多種方法可以與 Firebase 性能監控 JavaScript SDK 集成。在本程式碼實驗室中，我們啟用了性能從託管的URL監控。請參閱文檔查看啟用該SDK的其他方法。

自動跟踪

既然我們已經導入getPerformance在頂部web-start/src/index.js ，我們只需要添加一行告訴性能監控自動收集頁面加載和網絡請求指標你當用戶訪問你的網站部署！

在web-start/src/index.js ，加上現有的下方以下行TODO初始化性能監視。

索引.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

測量首次輸入延遲（可選）

首先輸入延遲，因為瀏覽器響應用戶的互動讓您的用戶了解您的應用程序的響應他們的第一印象是非常有用的。

當用戶第一次與頁面上的元素交互時，首次輸入延遲開始，比如點擊按鈕或超鏈接。它在瀏覽器能夠響應輸入後立即停止，這意味著瀏覽器不會忙於加載或解析您的頁面內容。

如果您想測量首次輸入延遲，則需要直接包含以下代碼。

開放式public/index.html 。
取消對script以下行標籤。

索引.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

要了解更多關於第一輸入延遲填充工具，看看該文檔。

查看性能數據

由於您尚未部署您的網站（您將在下一步中部署它），下面的屏幕截圖顯示了您將在用戶與您部署的網站互動 30 分鐘內在 Firebase 控制台中看到的頁面加載性能指標：

當您將性能監控 SDK 集成到您的應用程序中時，您無需編寫任何其他代碼即可在您的應用程序開始自動監控性能的幾個關鍵方面。對於 Web 應用程序，SDK 會記錄諸如首次內容繪製、用戶與您的應用程序交互的能力等方面。

您還可以設置自定義跟踪、指標和屬性來衡量應用程序的特定方面。訪問文檔，以了解更多關於自定義跟踪和度量標準和自定義屬性。

火力地堡提供一個託管服務，以滿足您的資產和網絡應用程序。您可以使用 Firebase CLI 將文件部署到 Firebase 託管。在部署之前，您需要在指定firebase.json哪些本地文件應部署文件。對於此 Codelab，我們已經為您完成了此操作，因為在此 Codelab 期間需要執行此步驟才能提供我們的文件。託管設置下指定的hosting屬性：

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

這些設置告訴CLI，我們要部署在所有文件./public目錄（ "public": "./public"

請確保您的命令行訪問你的應用程序的本地web-start目錄。
通過運行以下命令將文件部署到 Firebase 項目：

firebase deploy --except functions

控制台應顯示以下內容：

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

在您自己的兩個 Firebase 子域中使用 Firebase 託管訪問現在完全託管在全球 CDN 上的網絡應用：

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app

另外，您也可以運行firebase open hosting:site在命令行。

訪問文檔，詳細了解火力地堡如何託管工作。

轉到您的項目的火力地堡控制台主機部分查看有用的信息託管和工具，包括你的展開時的歷史，功能回滾到您的應用程序的早期版本，以及工作流設置自定義域。

您已經使用 Firebase 構建了一個實時聊天網絡應用程序！

我們涵蓋的內容

Firebase 身份驗證
雲防火牆
用於雲存儲的 Firebase SDK
Firebase 雲消息傳遞
Firebase 性能監控
Firebase 託管

下一步

了解更多

firebase.google.com

Firebase 網絡代碼實驗室

你會學到什麼

你需要什麼

導入入門應用

創建 Firebase 項目

將 Firebase 網絡應用添加到項目

啟用谷歌的標誌，在火力地堡認證

啟用 Cloud Firestore

啟用雲存儲

導入 Firebase SDK

安裝 Firebase SDK 並開始您的 Webpack 構建

配置 Firebase

使用 Google Sign-In 對您的用戶進行身份驗證

跟踪認證狀態

顯示登錄用戶的信息

測試登錄應用程序

數據模型

將消息添加到 Cloud Firestore

測試發送消息

同步郵件

測試同步消息

將圖像保存到雲存儲

測試發送圖片

添加 FCM 服務工作者

獲取 FCM 設備令牌

請求顯示通知的權限

獲取您的設備令牌

向您的設備發送通知

查看數據庫安全規則

更新數據庫安全規則

查看 Cloud Storage 安全規則

更新 Cloud Storage 安全規則

自動跟踪

測量首次輸入延遲（可選）

查看性能數據

我們涵蓋的內容

下一步

了解更多