Firebase Web代码实验室

在此代码实验室中，您将学习如何使用Firebase通过使用Firebase产品和服务实现和部署聊天客户端来轻松创建Web应用程序。

你会学到什么

使用Cloud Firestore和Cloud Storage for Firebase同步数据。
使用Firebase身份验证对用户进行身份验证。
在Firebase托管上部署您的Web应用。
使用Firebase Cloud Messaging发送通知。
收集您的Web应用程序的性能数据。

你需要什么

您选择的IDE /文本编辑器，例如WebStorm ， Atom ， Sublime或VS Code
软件包管理器npm ，通常随Node.js一起提供
终端/控制台
您选择的浏览器，例如Chrome
代码实验室的示例代码（有关如何获取代码，请参阅代码实验室的下一步。）

从命令行克隆代码实验室的GitHub存储库：

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

或者，如果您尚未安装git，则可以将存储库下载为ZIP文件。

导入入门应用

使用您的IDE，从克隆的存储库中打开或导入web-start目录。此📁Web web-start目录包含codelab的启动代码，它将是一个功能齐全的聊天Web应用程序。

创建一个Firebase项目

登录到Firebase 。
在Firebase控制台中，单击“添加项目” ，然后将您的Firebase项目命名为FriendlyChat 。记住您的Firebase项目的项目ID。
单击创建项目。

我们将要构建的应用程序使用可用于Web应用程序的Firebase产品：

Firebase身份验证可轻松允许您的用户登录您的应用。
Cloud Firestore可将结构化数据保存在云上，并在数据更改时立即获得通知。
用于Firebase的Cloud Storage将文件保存在云中。
Firebase Hosting托管和服务您的资产。
Firebase Cloud Messaging发送推送通知并显示浏览器弹出通知。
Firebase Performance Monitoring，以收集您应用程序的用户性能数据。

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

将Firebase Web应用添加到项目

点击网页图标创建一个新的Firebase Web应用程序。
使用昵称“友好聊天”注册该应用程序，然后选中“同时为此应用程序设置Firebase托管”旁边的框。点击注册应用。
单击其余步骤。您无需立即按照说明进行操作；这些将在本代码实验室的后续步骤中介绍。

为了允许用户使用其Google帐户登录网络应用，我们将使用Google登录方法。

您需要启用Google登录：

在Firebase控制台中，找到左侧面板中的“开发”部分。
点击身份验证，然后点击登录方法标签（或点击此处直接转到此处）。
启用Google登录提供程序，然后点击保存。
将您应用的公开名称设置为“友好聊天” ，然后从下拉菜单中选择一个项目支持电子邮件。
在Google Cloud Console中配置您的OAuth同意屏幕。添加徽标，

启用Cloud Firestore

该Web应用程序使用Cloud Firestore保存聊天消息并接收新的聊天消息。

您需要启用Cloud Firestore：

在Firebase控制台的“开发”部分中，单击“数据库” 。
在“ Cloud Firestore”窗格中，单击“创建数据库”。

选择“以测试模式启动”选项，然后在阅读有关安全规则的免责声明后单击“下一步” 。

测试模式可确保我们在开发过程中可以自由地写入数据库。我们稍后将在此代码实验室中使数据库更安全。

设置Cloud Firestore数据的存储位置。您可以将其保留为默认值，也可以选择一个靠近您的区域。单击“完成”以配置Firestore。

启用云存储

该Web应用程序使用Cloud Storage for Firebase来存储，上传和共享图片。

您需要启用云存储：

在Firebase控制台的“开发”部分中，单击“存储” 。
单击开始。
阅读有关Firebase项目安全规则的免责声明，然后单击“下一步” 。

使用默认的安全规则，任何经过身份验证的用户都可以将任何内容写入Cloud Storage。在本代码实验室的后面，我们将使存储更加安全。

已预先为Cloud Storage位置选择与您为Cloud Firestore数据库选择的区域相同的区域。单击完成以完成设置。

Firebase命令行界面（CLI）允许您使用Firebase Hosting在本地提供Web应用程序，以及将Web应用程序部署到Firebase项目。

通过运行以下npm命令来安装CLI：

npm -g install firebase-tools

通过运行以下命令，验证CLI已正确安装：

firebase --version

确保Firebase CLI的版本为v4.1.0或更高版本。

通过运行以下命令来授权Firebase CLI：

firebase login

我们已经设置了Web应用程序模板，以从应用程序的本地目录（您之前在代码实验室中克隆的存储库）中提取Firebase Hosting的应用程序配置。但是要提取配置，我们需要将您的应用程序与Firebase项目关联。

确保您的命令行正在访问应用程序的本地web-start目录。
通过运行以下命令将您的应用程序与Firebase项目相关联：

firebase use --add

出现提示时，选择您的Project ID ，然后为您的Firebase项目命名。

如果您有多个环境（生产，暂存等），则别名很有用。但是，对于此代码实验室，我们仅使用default的别名。

按照命令行上的其余说明进行操作。

现在，您已经导入并配置了项目，就可以开始运行Web应用程序了。

在web-start目录的控制台中，运行以下Firebase CLI命令：

firebase serve --only hosting

您的命令行应显示以下响应：

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

我们正在使用Firebase托管模拟器在本地提供应用程序。现在应该可以从http：// localhost：5000访问该Web应用程序。将提供位于public子目录下的所有文件。

使用浏览器，在http：// localhost：5000上打开您的应用程序。

您应该看到FriendlyChat应用程序的用户界面，该用户界面尚未运行（但！）：

该应用目前无法执行任何操作，但在您的帮助下，它将很快！到目前为止，我们仅为您布置了用户界面。

现在让我们建立一个实时聊天！

导入Firebase SDK

我们需要将Firebase SDK导入到应用程序中。如我们的文档中所述，有多种方法可以执行此操作。例如，您可以从我们的CDN导入库。或者，您可以使用npm在本地安装它，然后在使用Browserify的情况下将其打包在您的应用中。

由于我们使用Firebase Hosting服务我们的应用程序，因此我们将导入文件index.html （位于web-start/public/目录中）中的本地URL。对于此代码实验室，我们已经在index.html文件的底部为您添加了以下几行，但是您可以再次检查它们是否在其中。

index.html

<script src="/__/firebase/6.4.0/firebase-app.js"></script>
<script src="/__/firebase/6.4.0/firebase-auth.js"></script>
<script src="/__/firebase/6.4.0/firebase-storage.js"></script>
<script src="/__/firebase/6.4.0/firebase-messaging.js"></script>
<script src="/__/firebase/6.4.0/firebase-firestore.js"></script>
<script src="/__/firebase/6.4.0/firebase-performance.js"></script>

在此代码实验室中，我们将使用Firebase身份验证，Cloud Firestore，Cloud Storage，Cloud Messaging和性能监控，因此我们将导入其所有库。在将来的应用程序中，请确保仅导入所需的Firebase部分，以缩短应用程序的加载时间。

配置Firebase

我们还需要配置Firebase SDK来告诉它我们正在使用哪个Firebase项目。由于我们使用的是Firebase托管，因此您可以导入一个特殊的脚本来为您执行此配置。同样，对于此代码实验室，我们已经在public/index.html文件的底部为您添加了以下行，但是请仔细检查它是否存在。

index.html

<script src="/__/firebase/init.js"></script>

该脚本包含基于您之前运行firebase use --add时指定的Firebase项目的Firebase项目配置。

随时检查文件init.js以查看项目配置的外观。为此，请在浏览器中打开http：// localhost：5000 / __ / firebase / init.js。您应该看到类似以下内容的内容：

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

由于Firebase SDK已在index.html导入和初始化，因此现在应该可以使用了。现在，我们将使用Firebase Authentication实施用户登录。

在应用程序中，当用户单击“使用Google登录”按钮时，将触发signIn功能。（我们已经为您设置好了！）对于此代码实验室，我们想授权Firebase使用Google作为身份提供者。我们将使用一个弹出窗口，但是Firebase可以使用其他几种方法。

在web-start目录的public/scripts/子目录中，打开main.js
找到功能signIn 。
用以下代码替换整个功能。

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

该signOut当用户点击退出按钮功能被触发。

返回文件public/scripts/main.js
找到功能signOut 。
用以下代码替换整个功能。

main.js

第069章

追踪认证状态

要相应地更新我们的UI，我们需要一种检查用户是否已登录或注销的方法。借助Firebase身份验证，您可以在每次身份验证状态更改时都会触发的身份验证状态上注册观察者。

返回文件public/scripts/main.js
找到函数initFirebaseAuth 。
用以下代码替换整个功能。

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

上面的代码将功能authStateObserver注册为身份验证状态观察者。每当身份验证状态更改时（用户登录或注销时），它将触发。至此，我们将更新UI以显示或隐藏登录按钮，退出按钮，已登录用户的个人资料图片，等等。所有这些UI部分均已实现。

显示已登录用户的信息

我们要在应用程序的顶部栏中显示已登录用户的个人资料图片和用户名。在Firebase中，登录用户的数据始终在firebase.auth().currentUser对象中可用。之前，我们将authStateObserver函数设置为在用户authStateObserver时触发，以便我们的UI相应地更新。触发时将调用getProfilePicUrl和getUserName 。

返回文件public/scripts/main.js
找到函数getProfilePicUrl和getUserName 。
用下面的代码替换这两个函数。

main.js

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

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

如果用户在未登录时尝试发送消息，我们将显示一条错误消息。（但是，您可以尝试！）因此，我们需要检测用户是否实际上已登录。

返回文件public/scripts/main.js
找到函数isUserSignedIn 。
用以下代码替换整个功能。

main.js

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

测试登录到应用程序

如果您的应用仍在提供中，请在浏览器中刷新您的应用。否则，请在命令行上运行firebase serve --only hosting从http：// localhost：5000开始提供应用程序，然后在浏览器中将其打开。
使用登录按钮和您的Google帐户登录该应用。如果您看到错误消息，说明auth/operation-not-allowed ，请检查并确保您在Firebase控制台中启用了Google登录作为身份验证提供程序
登录后，您的个人资料图片和用户名应显示：

在本部分中，我们将一些数据写入Cloud Firestore，以便我们可以填充应用程序的UI。可以使用Firebase控制台手动完成此操作，但我们将在应用程序本身中完成此操作，以演示Cloud Firestore的基本写操作。

资料模型

Cloud Firestore数据分为集合，文档，字段和子集合。我们会将聊天的每条消息作为文档存储在称为messages的顶级集合中。

将消息添加到Cloud Firestore

要存储用户编写的聊天消息，我们将使用Cloud Firestore 。

在本部分中，您将添加功能，以便用户将新消息写入数据库。用户单击“发送”按钮将触发以下代码段。它将带有消息字段内容的消息对象添加到messages集合中的Cloud Firestore实例。 add()方法将具有自动生成的ID的新文档添加到集合中。

返回文件public/scripts/main.js
找到功能saveMessage 。
用以下代码替换整个功能。

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

测试发送消息

如果您的应用仍在提供中，请在浏览器中刷新您的应用。否则，请在命令行上运行firebase serve --only hosting从http：// localhost：5000开始提供应用程序，然后在浏览器中将其打开。
登录后，输入诸如“ Hey there！”的消息，然后单击“ SEND” 。这会将消息写入Cloud Firestore。但是，您仍无法在实际的Web应用程序中看到数据，因为我们仍然需要实现检索数据（代码实验室的下一部分）。
您可以在Firebase控制台中看到新添加的消息。打开您的Firebase控制台。在“开发”部分下，单击“数据库” （或单击此处并选择您的项目），您应该会看到包含新添加的消息的消息集合：

同步消息

要在应用中阅读消息，我们需要添加在数据更改时触发的侦听器，然后创建一个显示新消息的UI元素。

我们将添加代码来侦听来自应用程序的新添加的消息。在此代码中，我们将注册用于监听对数据所做的更改的监听器。我们将仅显示聊天的最后12条消息，以避免在加载时显示很长的历史记录。

返回文件public/scripts/main.js
找到功能loadMessages 。
用以下代码替换整个功能。

main.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.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(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收集，即聊天消息的存储位置。我们还通过使用.limit(12)仅侦听最后12条消息，并使用.orderBy('timestamp', 'desc')按日期对消息进行排序来获取12条最新消息，从而应用了限制。

.onSnapshot函数采用一个参数：回调函数。当与查询匹配的文档有任何更改时，将触发回调函数。这可能是消息被删除，修改或添加的情况。您可以在Cloud Firestore文档中阅读有关此内容的更多信息。

测试同步消息

如果您的应用仍在提供中，请在浏览器中刷新您的应用。否则，请在命令行上运行firebase serve --only hosting从http：// localhost：5000开始提供应用程序，然后在浏览器中将其打开。
您先前在数据库中创建的消息应显示在FriendlyChat UI中（请参见下文）。随时编写新消息；它们应该立即出现。
（可选）您可以尝试直接在Firebase控制台的“数据库”部分中手动删除，修改或添加新消息。任何更改都应反映在用户界面中。

恭喜你！您正在阅读应用程序中的Cloud Firestore文档！

现在，我们将添加共享图像的功能。

尽管Cloud Firestore适合存储结构化数据，但Cloud Storage更适合存储文件。 Cloud Storage for Firebase是一种文件/ blob存储服务，我们将使用它来存储用户使用我们的应用共享的任何图像。

将图像保存到云存储

对于此代码实验室，我们已经为您添加了一个触发文件选择器对话框的按钮。选择文件后，将saveImageMessage函数，您可以获取对所选文件的引用。 saveImageMessage函数完成以下任务：

在聊天供稿中创建“占位符”聊天消息，以便用户在上载图像时看到“正在加载”动画。
将映像文件上传到Cloud Storage到以下路径： /<uid>/<messageId>/<file_name>
生成图像文件的公共可读URL。
用新上传的图像文件的URL代替临时加载图像来更新聊天消息。

现在，您将添加发送图像的功能：

返回文件public/scripts/main.js
找到功能saveImageMessage 。
用以下代码替换整个功能。

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}

测试发送图像

如果您的应用仍在提供中，请在浏览器中刷新您的应用。否则，请在命令行上运行firebase serve --only hosting从http：// localhost：5000开始提供应用程序，然后在浏览器中将其打开。
登录后，点击图片上传按钮并使用文件选择器选择图像文件。如果您要查找图像，请随时使用这张精美的咖啡杯图片。
新消息应显示在应用程序的用户界面中，并带有您选择的图像：

如果您尝试在未登录时添加图像，则应该看到一条Toast通知，告知您必须登录才能添加图像。

现在，我们将添加对浏览器通知的支持。当新消息发布在聊天中时，该应用程序将通知用户。 Firebase云消息传递（FCM）是一种跨平台的消息传递解决方案，可让您可靠地免费传递消息和通知。

将GCM发送者ID列入白名单

在Web应用程序清单中，您需要指定gcm_sender_id ，这是一个硬编码的值，指示FCM被授权向该应用程序发送消息。

在web-start目录的public目录中，打开manifest.json 。
完全如下所示，将浏览器发件人ID值添加到gcm_sender_id属性中。不要更改下面显示的值。

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

添加FCM服务工作者

Web应用程序需要一名服务人员，该服务人员将接收并显示Web通知。

在web-start目录的public目录中，创建一个名为firebase-messaging-sw.js的新文件。
将以下内容添加到该新文件。

firebase-messaging-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

服务人员只需加载并初始化Firebase Cloud Messaging SDK，即可处理显示通知。

获取FCM设备令牌

在设备或浏览器上启用通知后，系统会为您提供设备令牌。该设备令牌是我们用来向特定设备或特定浏览器发送通知的工具。

当用户saveMessagingDeviceToken ，我们调用saveMessagingDeviceToken函数。那就是我们从浏览器获取FCM设备令牌并将其保存到Cloud Firestore的地方。

返回文件public/scripts/main.js
找到功能saveMessagingDeviceToken 。
用以下代码替换整个功能。

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

但是，此代码最初不会起作用。为了使您的应用能够检索设备令牌，用户需要向您的应用授予显示通知的权限（代码实验室的下一步）。

请求显示通知的权限

如果用户尚未授予您的应用显示通知的权限，则不会获得设备令牌。在这种情况下，我们调用firebase.messaging().requestPermission()方法，该方法将显示一个浏览器对话框，询问该权限（在受支持的浏览器中）。

返回文件public/scripts/main.js
找到功能requestNotificationsPermissions 。
用以下代码替换整个功能。

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

获取设备令牌

如果您的应用仍在提供中，请在浏览器中刷新您的应用。否则，请在命令行上运行firebase serve --only hosting从http：// localhost：5000开始提供应用程序，然后在浏览器中将其打开。
登录后，将显示通知权限对话框：
点击允许。
打开浏览器的JavaScript控制台。您应该看到以下消息： Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
复制您的设备令牌。您将在下一阶段的代码实验室中使用它。

发送通知到您的设备

现在您有了设备令牌，就可以发送通知了。

除了设备令牌之外，您还需要Firebase应用程序的Server Key 。要获取此密钥，请转到Firebase控制台>项目设置> Cloud Messaging ，然后复制服务器密钥。

要发送通知，您需要发送以下HTTP请求：

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}

在命令行上，运行以下cURL命令。

curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

请注意，只有在FriendlyChat应用程序在后台时，才会显示通知。您必须导航或显示另一个选项卡才能显示通知。当应用程序处于前台时，有一种方法可以捕获FCM发送的消息。

如果您的应用程序在后台运行，则应在浏览器中显示一条通知，如以下示例所示：

查看数据库安全规则

Cloud Firestore使用特定的规则语言来定义访问权限，安全性和数据验证。

在此代码实验室的开头设置Firebase项目时，我们选择使用“测试模式”默认安全规则，以便不限制对数据存储的访问。在Firebase控制台的“数据库”部分的“规则”选项卡中，您可以查看和修改这些规则。

现在，您应该看到默认规则，该规则不限制对数据存储的访问。这意味着任何用户都可以读写您的数据存储区中的任何集合。

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

我们将使用以下规则更新规则以限制事物：

firestore.rules

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 for Firebase使用特定的规则语言来定义访问权限，安全性和数据验证。

在此代码实验室的开头设置Firebase项目时，我们选择使用默认的Cloud Storage安全规则，该规则仅允许经过身份验证的用户使用Cloud Storage。在Firebase控制台的“存储”部分的“规则”选项卡中，您可以查看和修改规则。您应该看到默认规则，该规则允许所有已登录的用户读取和写入存储桶中的任何文件。

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

我们将更新规则以执行以下操作：

允许每个用户仅写入自己的特定文件夹
允许任何人从Cloud Storage中读取
确保上传的文件是图像
将可以上传的图片大小限制为最大5 MB

可以使用以下规则来实现：

储存规则

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

更新云存储安全规则

有两种编辑存储安全规则的方法：在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 Performance Monitoring JavaScript SDK集成。在此代码实验室中，我们从托管URL启用了性能监视。请参阅文档以查看其他启用SDK的方法。

自动跟踪

由于我们在代码实验室的较早步骤中包括了init.js firebase-performance.js和init.js ，因此我们只需要添加一行内容即可告诉Performance Monitoring在用户访问您部署的网站时自动为您收集页面负载和网络请求指标！

在public/scripts/main.js ， public/scripts/main.js添加到现有TODO下方以初始化性能监控。

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

测量第一个输入延迟（可选）

第一次输入延迟非常有用，因为浏览器对用户交互的响应会给您的用户关于应用程序响应性的第一印象。

当用户首次与页面上的元素进行交互（例如单击按钮或超链接）时，开始输入延迟。浏览器能够响应输入后，它将立即停止，这意味着浏览器不忙于加载或解析页面内容。

如果要测量第一个输入延迟，则需要直接包含以下代码。

打开public/index.html 。
在下一行取消注释script标记。

index.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>

要了解有关第一个输入延迟polyfill的更多信息，请参阅文档。

查看效果数据

由于您尚未部署网站（将在下一步中进行部署），因此下面的屏幕快照显示了用户与已部署的网站互动后12个小时内将在Firebase控制台中看到的有关页面加载性能的指标：

当您将Performance Monitoring SDK集成到您的应用程序中时，您无需编写任何其他代码即可在您的应用程序开始自动监视性能的几个关键方面之前。对于Web应用程序，SDK记录了诸如第一个内容丰富的绘画，用户与您的应用程序进行交互的能力等方面。

您还可以设置自定义跟踪，指标和属性以衡量应用程序的特定方面。请访问文档以了解有关自定义跟踪和指标以及自定义属性的更多信息。

Firebase提供托管服务，以服务您的资产和Web应用程序。您可以使用Firebase CLI将文件部署到Firebase托管。部署之前，您需要在firebase.json文件中指定应部署的本地文件。对于此代码实验室，我们已经为您完成了此操作，因为在此代码实验室过程中需要此步骤来提供文件。主机设置在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

访问您的Web应用程序，该应用程序现在已经在您自己的两个Firebase子域中使用Firebase Hosting进行了完全托管：

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

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

请访问文档以了解有关Firebase托管工作原理的更多信息。

转到项目的Firebase控制台“托管”部分，以查看有用的托管信息和工具，包括部署的历史记录，回滚到应用程序早期版本的功能以及用于设置自定义域的工作流。

您已经使用Firebase构建了实时聊天Web应用程序！

我们涵盖的内容

Firebase身份验证
Cloud Firestore
Firebase SDK for Cloud Storage
Firebase云消息传递
Firebase性能监控
Firebase托管

下一步

了解更多

firebase.google.com

Firebase Web代码实验室

你会学到什么

你需要什么

导入入门应用

创建一个Firebase项目

将Firebase Web应用添加到项目

为Firebase身份验证启用Google登录

启用Cloud Firestore

启用云存储

导入Firebase SDK

配置Firebase

使用Google登录身份验证您的用户

追踪认证状态

显示已登录用户的信息

测试登录到应用程序

资料模型

将消息添加到Cloud Firestore

测试发送消息

同步消息

测试同步消息

将图像保存到云存储

测试发送图像

将GCM发送者ID列入白名单

添加FCM服务工作者

获取FCM设备令牌

请求显示通知的权限

获取设备令牌

发送通知到您的设备

查看数据库安全规则

更新数据库安全规则

查看云存储安全规则

更新云存储安全规则

自动跟踪

测量第一个输入延迟（可选）

查看效果数据

我们涵盖的内容

下一步

了解更多