Google 致力于为黑人社区推动种族平等。查看具体举措

Firebase 网络代码实验室

在本程式码实验室中,您将学习如何使用火力地堡很容易地通过实施和部署使用火力地堡的产品和服务,聊天客户端创建Web应用程序。

3b1284f5144b54f6.png

你会学到什么

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

你需要什么

  • 您所选择的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 项目

  1. 登录火力地堡
  2. 在火力地堡控制台中,单击添加项目,然后命名你的火力地堡项目FriendlyChat。记住您的 Firebase 项目的项目 ID。
  3. 取消选中为这个项目谷歌分析
  4. 单击创建项目

我们将要构建的应用程序使用可用于网络应用程序的 Firebase 产品:

  • 火力地堡认证,很容易让你的用户登录到您的应用程序。
  • 云公司的FireStore保存在云中的结构化数据,并得到即时通知的数据发生变化时。
  • 云存储的火力地堡保存在云中的文件。
  • 火力地堡主机托管和投放您的资产。
  • 火力点云信息发送推送通知和显示浏览器弹出通知。
  • 火力性能监控收集用户的性能数据为您的应用程序。

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

将 Firebase 网络应用添加到项目

  1. 单击网络图标58d6543a156e56f9.png创建一个新的 Firebase 网络应用。
  2. 注册昵称亲切交谈的应用程序,然后检查旁边还设置了火力地堡主机为这个应用程序的复选框。点击注册应用
  3. 在下一步中,您将看到一个配置对象。仅复制JS对象(而不是周围的HTML)进入火力-config.js

注册网页应用截图

启用谷歌的标志,在火力地堡认证

为了让用户在与他们的谷歌帐户的Web应用程序签名,我们将使用谷歌登录方法。

你将需要启用谷歌登录:

  1. 在火力地堡控制台,定位在左侧面板中的Build部分。
  2. 点击身份验证,然后点击登录方法选项卡(或点击这里去直接出现)。
  3. 启用谷歌登录提供者,然后点击保存
  4. 设置你的应用友好的交谈的面向公众的名称,然后从下拉菜单中选择项目支持电子邮件
  5. 配置OAuth同意画面在谷歌云端控制台并添加一个标志:

d89fb3873b5d36ae.png

启用 Cloud Firestore

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

您需要启用 Cloud Firestore:

  1. 在火力地堡控制台的Build部分,单击数据库的FireStore。
  2. 单击云公司的FireStore窗格中创建数据库

729991a081e7cd5.png

  1. 在测试模式选项选择开始,然后单击下一步阅读安全规则的免责条款之后。

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

77e4986cbeaf9dee.png

  1. 设置您的 Cloud Firestore 数据的存储位置。您可以将其保留为默认值或选择离您最近的区域。点击完成以提供公司的FireStore。

9f2bb0d4e7ca49c7.png

启用云存储

该网络应用使用 Cloud Storage for Firebase 来存储、上传和共享图片。

您需要启用云存储:

  1. 在火力地堡控制台的Build部分,单击存储
  2. 如果没有开始使用按钮,这意味着云存储已经启用,而你并不需要按照下面的步骤。
  3. 点击开始使用
  4. 阅读关于你的火力地堡项目安全规则的免责声明,然后单击下一步

使用默认安全规则,任何经过身份验证的用户都可以向 Cloud Storage 写入任何内容。我们将在此 Codelab 的稍后部分使我们的存储更加安全。

62f1afdcd1260127.png

  1. Cloud Storage 位置与您为 Cloud Firestore 数据库选择的区域相同。点击完成以完成安装。

1d7f49ebaddb32fc.png

Firebase 命令行界面 (CLI) 允许您使用 Firebase 托管在本地为您的 Web 应用提供服务,以及将您的 Web 应用部署到您的 Firebase 项目。

  1. 通过运行以下 npm 命令安装 CLI:
npm -g install firebase-tools
  1. 通过运行以下命令验证 CLI 是否已正确安装:
firebase --version

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

  1. 通过运行以下命令授权 Firebase CLI:
firebase login

我们已经设置了网络应用模板,以从应用的本地目录(您之前在 codelab 中克隆的存储库)中提取应用的 Firebase 托管配置。但是要提取配置,我们需要将您的应用与您的 Firebase 项目相关联。

  1. 请确保您的命令行访问你的应用程序的本地web-start目录。
  2. 通过运行以下命令将您的应用与 Firebase 项目相关联:
firebase use --add
  1. 提示时,选择您的项目编号,然后给你的火力地堡项目的别名。

如果您有多个环境(生产、暂存等),则别名很有用。然而,对于本程式码实验室,就让我们用的别名default

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

现在您已经导入并配置了您的项目,您已准备好第一次运行 Web 应用程序。

  1. 在从一个控制台web-start目录下,运行下面的火力地堡CLI命令:
firebase serve --only hosting
  1. 您的命令行应显示以下响应:
✔  hosting: Local server: http://localhost:5000

我们使用的火力地堡主机模拟器在本地提供我们的应用程序。 Web应用程序现在应该可以从HTTP://本地主机:5000 。是位于下的所有文件public子目录供应。

  1. 使用浏览器,在打开的应用程序的http://本地主机:5000

您应该会看到您的 FriendlyChat 应用程序的用户界面,它(尚未!)运行:

4c23f9475228cef4.png

该应用程序现在无法执行任何操作,但在您的帮助下它很快就会执行!到目前为止,我们只为您布置了 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 构建

我们需要运行一些命令来启动我们的应用程序构建。

  1. 打开一个新的终端窗口
  2. 请确保你在web-start目录
  3. 运行npm install下载SDK火力地堡
  4. 运行npm run start启动的WebPack。 Webpack 现在将不断为 codelab 的其余部分重建我们的源代码。

配置 Firebase

我们还需要配置 Firebase SDK 以告诉它我们正在使用哪个 Firebase 项目。

  1. 转到您的项目设置在控制台火力地堡
  2. 在“您的应用”卡片中,选择您需要配置对象的应用的昵称。
  3. 从 Firebase SDK 代码段窗格中选择“配置”。
  4. 复制配置对象片断,然后将其添加到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 。现在我们要实现登录使用的用户火力地堡认证

使用 Google Sign-In 对您的用户进行身份验证

在应用中,当用户点击了在与谷歌键, signIn功能被触发。 (我们已经为您设置好了!)对于此代码实验室,我们希望授权 Firebase 使用 Google 作为身份提供者。我们将使用一个弹出,但其他几种方法可从火力地堡。

  1. web-start目录,子目录src/ ,开放index.js
  2. 查找功能signIn
  3. 用以下代码替换整个函数。

索引.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当用户点击退出按钮功能被触发。

  1. 回到文件src/index.js
  2. 查找功能signOutUser
  3. 用以下代码替换整个函数。

索引.js

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

跟踪认证状态

为了相应地更新我们的 UI,我们需要一种方法来检查用户是登录还是退出。使用 Firebase 身份验证,您可以在每次身份验证状态更改时触发的身份验证状态上注册观察者。

  1. 回到文件src/index.js
  2. 查找功能initFirebaseAuth
  3. 用以下代码替换整个函数。

索引.js

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

上述寄存器的代码的功能authStateObserver作为认证状态观测。每次身份验证状态更改时(用户登录或退出时)都会触发它。此时,我们将更新 UI 以显示或隐藏登录按钮、注销按钮、登录用户的个人资料图片等。所有这些 UI 部分都已经实现。

显示登录用户的信息

我们希望在应用程序的顶部栏中显示登录用户的个人资料图片和用户名。在火力地堡,在登录的用户的数据始终处于可用currentUser对象。此前,我们成立了authStateObserver当用户登录,使我们的UI更新相应功能来触发。它将调用getProfilePicUrlgetUserName触发时。

  1. 回到文件src/index.js
  2. 查找功能getProfilePicUrlgetUserName
  3. 用以下代码替换这两个函数。

索引.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;
}

如果用户在未登录时尝试发送消息,我们会显示一条错误消息。(不过您可以尝试!)因此,我们需要检测用户是否实际登录。

  1. 回到文件src/index.js
  2. 查找功能isUserSignedIn
  3. 用以下代码替换整个函数。

索引.js

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

测试登录应用程序

  1. 如果您的应用仍在提供服务,请在浏览器中刷新您的应用。否则,运行firebase serve --only hosting在命令行上,开始从服务应用程序的http://本地主机:5000 ,然后在浏览器中打开它。
  2. 使用登录按钮和您的 Google 帐户登录应用程序。如果你看到一个错误信息,指出auth/operation-not-allowed ,检查,以确保您启用了谷歌登录在作为火力地堡控制台认证供应商。
  3. 登录后,应显示您的个人资料图片和用户名: c7401b3d44d0d78b.png

在本节中,我们将向 Cloud Firestore 写入一些数据,以便我们可以填充应用的 UI。这可以手动与进行火力地堡控制台,但我们会在应用程序本身来证明一个基本的云计算公司的FireStore写做。

数据模型

Cloud Firestore 数据分为集合、文档、字段和子集合。我们会聊天的每封邮件存储为称为顶级集合文件messages

688d7bc5fb662b57.png

将消息添加到 Cloud Firestore

来存储用户写入的聊天消息,我们将使用云计算公司的FireStore

在本节中,您将添加用户将新消息写入数据库的功能。单击发送按钮的用户将触发下面的代码段。它增加了与消息字段在你的云计算公司的FireStore实例的内容的消息对象messages集合。所述add()方法增加了一个新的文档自动生成的ID添加到集合。

  1. 回到文件src/index.js
  2. 查找功能saveMessage
  3. 用以下代码替换整个函数。

索引.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);
  }
}

测试发送消息

  1. 如果您的应用仍在提供服务,请在浏览器中刷新您的应用。否则,运行firebase serve --only hosting在命令行上,开始从服务应用程序的http://本地主机:5000 ,然后在浏览器中打开它。
  2. 在签约之后,输入信息,如“嘿!”,然后单击发送。这会将消息写入 Cloud Firestore。但是,你还不会看到数据在实际的Web应用程序,因为我们仍然需要实现检索数据(代码实验室的下一节)。
  3. 您可以在 Firebase 控制台中看到新添加的消息。打开您的 Firebase 控制台。在构建部分单击数据库的FireStore(或点击这里,并选择您的项目),你应该看到这些消息收集与新添加的消息:

6812efe7da395692.png

同步邮件

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

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

  1. 回到文件src/index.js
  2. 查找功能loadMessages
  3. 用以下代码替换整个函数。

索引.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文档

测试同步消息

  1. 如果您的应用仍在提供服务,请在浏览器中刷新您的应用。否则,运行firebase serve --only hosting在命令行上,开始从服务应用程序的http://本地主机:5000 ,然后在浏览器中打开它。
  2. 您之前在数据库中创建的消息应显示在 FriendlyChat UI 中(见下文)。随意编写新消息;他们应该立即出现。
  3. (可选)可以尝试手动删除,修改,或直接在火力地堡控制台的数据库部分添加新的消息;任何更改都应反映在 UI 中。

恭喜!您正在您的应用中阅读 Cloud Firestore 文档!

2168dec79b573d07.png

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

Cloud Firestore 适合存储结构化数据,而 Cloud Storage 更适合存储文件。云存储的火力地堡是一个文件/ Blob存储服务,我们会使用它,使用我们的应用程序用户共享存储的任何图像。

将图像保存到云存储

对于此代码实验室,我们已经为您添加了一个触发文件选择器对话框的按钮。选择一个文件后, saveImageMessage函数被调用,你可以得到所选文件的引用。该saveImageMessage功能完成以下操作:

  1. 在聊天提要中创建“占位符”聊天消息,以便用户在我们上传图像时看到“加载”动画。
  2. 上传的图像文件,以云存储到该路径: /<uid>/<messageId>/<file_name>
  3. 为图像文件生成一个公开可读的 URL。
  4. 使用新上传的图像文件的 URL 代替临时加载的图像更新聊天消息。

现在,您将添加发送图像的功能:

  1. 回到文件src/index.js
  2. 查找功能saveImageMessage
  3. 用以下代码替换整个函数。

索引.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);
  }
}

测试发送图片

  1. 如果您的应用仍在提供服务,请在浏览器中刷新您的应用。否则,运行firebase serve --only hosting在命令行上,开始从服务应用程序的http://本地主机:5000 ,然后在浏览器中打开它。
  2. 登录后,点击图片上传按钮13734cb66773e5a3.png并使用文件选择器选择一个图像文件。如果你正在寻找一个图像,随意使用这个咖啡杯的漂亮的图片
  3. 应用程序的 UI 中应该会出现一条带有您选择的图像的新消息: 3b1284f5144b54f6.png

如果您在未登录的情况下尝试添加图像,您应该会看到 Toast 通知,告诉您必须登录才能添加图像。

我们现在将添加对浏览器通知的支持。该应用程序将在聊天中发布新消息时通知用户。火力地堡云端通讯(FCM)是一个跨平台的通讯解决方案,让您可靠地无成本提供消息和通知。

添加 FCM 服务工作者

该网站的应用程序需要服务人员将接收和显示网页的通知。

  1. web-start目录下,在src目录中,打开firebase-messaging-sw.js
  2. 将以下内容添加到该文件中。

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。

  1. 回到文件src/index.js
  2. 查找功能saveMessagingDeviceToken
  3. 用以下代码替换整个函数。

索引.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()方法,它会显示一个浏览器对话框,询问此权限(在支持的浏览器)。

8b9d0c66dc36153d.png

  1. 回到文件src/index.js
  2. 查找功能requestNotificationsPermissions
  3. 用以下代码替换整个函数。

索引.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.');
  }
}

获取您的设备令牌

  1. 如果您的应用仍在提供服务,请在浏览器中刷新您的应用。否则,运行firebase serve --only hosting在命令行上,开始从服务应用程序的http://本地主机:5000 ,然后在浏览器中打开它。
  2. 登录后,通知权限对话框应出现: bd3454e6dbfb6723.png
  3. 点击允许
  4. 打开浏览器的 JavaScript 控制台。您应该看到以下消息: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. 复制您的设备令牌。您将在代码实验室的下一阶段需要它。

向您的设备发送通知

现在您拥有设备令牌,您可以发送通知。

  1. 打开了火力地堡控制台的云邮件选项卡
  2. 点击“新通知”
  3. 输入通知标题和通知文本。
  4. 在屏幕右侧,点击“发送测试消息”
  5. 输入您从浏览器的 JavaScript 控制台复制的设备令牌,然后单击加号 ("+")
  6. 点击“测试”

如果您的应用程序在前台,您将在 JavaScript 控制台中看到通知。

如果您的应用程序在后台运行,您的浏览器中应该会出现一条通知,如下例所示:

de79e8638a45864c.png

查看数据库安全规则

云公司的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 控制台中更新安全规则:

  1. 转到左侧面板中的数据库部分,然后单击规则选项卡。
  2. 将控制台中已有的默认规则替换为上面显示的规则。
  3. 点击发布

从本地文件更新安全规则:

  1. web-start目录,打开firestore.rules
  2. 用上面显示的规则替换文件中已有的默认规则。
  3. web-start目录,打开firebase.json
  4. 添加firestore.rules属性指向firestore.rules ,如下图所示。 (该hosting属性应该已经在文件中。)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. 通过运行以下命令,使用 Firebase CLI 部署安全规则:
firebase deploy --only firestore
  1. 您的命令行应显示以下响应:
=== 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 控制台中更新安全规则:

  1. 转到左侧面板中的存储部分,然后单击规则选项卡。
  2. 将控制台中已有的默认规则替换为上面显示的规则。
  3. 点击发布

从本地文件更新安全规则:

  1. web-start目录,打开storage.rules
  2. 用上面显示的规则替换文件中已有的默认规则。
  3. web-start目录,打开firebase.json
  4. 添加storage.rules属性指向storage.rules文件,如下图所示。 (该hostingdatabase属性应该已经在文件中。)

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"
  }
}
  1. 通过运行以下命令,使用 Firebase CLI 部署安全规则:
firebase deploy --only storage
  1. 您的命令行应显示以下响应:
=== 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 ,我们只需要添加一行告诉性能监控自动收集页面加载和网络请求指标你当用户访问你的网站部署!

  1. web-start/src/index.js ,加上现有的下方以下行TODO初始化性能监视。

索引.js

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

测量首次输入延迟(可选)

首先输入延迟,因为浏览器响应用户的互动让您的用户了解您的应用程序的响应他们的第一印象是非常有用的。

当用户第一次与页面上的元素交互时,首次输入延迟开始,比如点击按钮或超链接。它在浏览器能够响应输入后立即停止,这意味着浏览器不会忙于加载或解析您的页面内容。

如果您想测量首次输入延迟,则需要直接包含以下代码。

  1. 开放式public/index.html
  2. 取消对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 控制台中看到的页面加载性能指标:

29389131150f33d7.png

当您将性能监控 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" )。

  1. 请确保您的命令行访问你的应用程序的本地web-start目录。
  2. 通过运行以下命令将文件部署到 Firebase 项目:
firebase deploy --except functions
  1. 控制台应显示以下内容:
=== 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
  1. 在您自己的两个 Firebase 子域中使用 Firebase 托管访问现在完全托管在全球 CDN 上的网络应用:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

访问文档,详细了解火力地堡如何托管工作

转到您的项目的火力地堡控制台主机部分查看有用的信息托管和工具,包括你的展开时的历史,功能回滚到您的应用程序的早期版本,以及工作流设置自定义域。

您已经使用 Firebase 构建了一个实时聊天网络应用程序!

我们涵盖的内容

  • Firebase 身份验证
  • 云防火墙
  • 用于云存储的 Firebase SDK
  • Firebase 云消息传递
  • Firebase 性能监控
  • Firebase 托管

下一步

了解更多