GSP643

概览

12 年前，Lily 创办了 Pet Theory 连锁宠物医院。近几年来，Pet Theory 宠物医院的规模迅速扩张。他们的旧预约系统无法处理日益增加的客流量，客户也无法自行预约，因此 Lily 请 IT 部门的 Patrick 和顾问 Ruby 构建一个易于伸缩的云端系统。在本实验中，您将构建一个功能齐全的 Firebase Web 应用，允许用户实时输入信息和安排预约。

架构

下图概述了您将使用的服务，以及这些服务之间的关系：

目标

在本实验中，您将学习如何完成以下操作：

• 配置 Firestore 安全功能以自动执行服务器端身份验证和授权。
• 向您的 Web 应用添加 Google 登录功能。
• 配置数据库，以便用户可以添加他们的联系信息。
• 探索和部署允许用户自行安排预约的代码。
• 在您的 Web 应用中探索 Firebase 的实时更新。

前提条件

这是一个中级实验，假设您熟悉 Cloud 控制台和 shell 环境。具备 Firebase 使用经验会有帮助，但不是硬性要求。在进行本实验之前，建议您先完成以下实验：

• 将数据导入 Firestore 数据库

您还应该能够自如地修改文件。您可以使用惯用的文本编辑器（如 nano、vi 等），也可以从 Cloud Shell 顶部的功能区启动代码编辑器：

准备就绪后，请向下滚动页面，并按下方步骤来设置实验环境。

Firebase 后端

Ruby 给 Patrick 发送了一封电子邮件：

Ruby，软件顾问	Patrick，您好！ 上周的工作完成得很出色。很高兴看到诊所的数据已迁移到 Firestore！ 看来接下来的工作就是使用 Firebase 来托管 Pet Theory 网站。 Ruby
Patrick，IT 管理员	Ruby，您好！ 我没听说过 Firebase Hosting，它有什么优点？我应该如何着手？ Patrick
Ruby，软件顾问	Patrick，您好！ Firebase Hosting 的主要优点是无服务器，因此我们无需管理基础设施。应用中还嵌入了安全规则，因此在处理客户数据时可以限制权限，最大限度地减少可能出现的问题。 它还具有“即用即付”模式，意味着 Firebase 这个综合性移动开发平台很适合我们的应用场景。 Ruby
Patrick，IT 管理员	Ruby，您好！ 听起来 Firebase 能大大简化安全和基础设施管理，这些在我的工作中占了很大一部分。不用为空闲服务器付费，也让我很期待！ Patrick

Ruby 通过电子邮件向 Patrick 发送一些背景信息，然后他们开了一次会来确定要执行的主要活动。在这次会议上，他们确定了 Patrick 需要完成以下任务：

• 配置 Firebase 项目。
• 制定安全政策。
• 将 Firestore CLI 添加到 Google Cloud 项目。

接下来，需要帮助 Patrick 完成以下任务。

任务 1. 注册 Firebase 应用

打开无痕式窗口，然后前往 Firebase 控制台。

在系统提示时，输入以下信息：

• 用户名：
• 密码：

注意：已经为您预配带有标签 的 Firebase 项目。选择此项目以访问控制台。

1. 如果系统提示，请接受《Firebase 条款及条件》，然后点击继续。

2. 在“项目概览”页面上，点击 + 添加应用，然后选择 Web 图标。

3. 在系统提示输入应用别名时，输入 Pet Theory。

4. 选中还为此应用设置 Firebase Hosting。

5. 在网站的下拉菜单中，选择创建新网站，或确保它与您的项目 ID 匹配（或遵循实验详细信息中的说明）。

6. 点击注册应用按钮。

7. 在后续步骤（添加 Firebase SDK、安装 Firebase CLI 和部署到 Firebase Hosting）中，点击下一步或继续前往控制台，返回主信息中心。

现在，您已完成配置 Firebase 应用。

验证您已完成的任务

点击检查我的进度，验证已完成以下目标：

注册 Firebase 应用

任务 2. 启用 Firebase 产品。

Firebase Authentication

在 Firebase 控制台中，设置 Firebase Authentication，允许用户使用 Google 账号登录。

1. 在左侧导航菜单中，点击身份验证（如未固定，可在项目快捷方式或产品类别 > 安全下找到）。

2. 如果您是首次使用，请点击开始。

3. 在登录方法标签页中，从提供方列表中选择 Google。

4. 在配置对话框中，点击启用切换开关。

5. 从下拉菜单中选择支持邮箱，然后点击保存。

6. 如需添加自定义网域进行授权，请点击“身份验证”页面顶部的设置标签页。

7. 从设置窗格左侧菜单中选择已获授权的网域。

8. 点击添加网域按钮。

9. 输入以下网域（如有必要，请替换为您的项目 ID）：

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. 点击添加按钮。

验证您已完成的任务

点击检查我的进度，验证已完成以下目标：

设置 Firebase Authentication

Firebase Firestore

接下来，设置 Firestore 数据库。

1. 在左侧导航菜单中，点击数据库和存储空间下的 Firestore。

2. 在 Cloud Firestore 着陆页上，点击创建数据库按钮。

3. 在第 1 步：选择版本中，选择标准版，然后点击下一步。

4. 在第 2 步：数据库 ID 和位置中，选择适当位置（如 nam5 或接受默认设置），然后点击下一步。

5. 在第 3 步：配置中，选择以测试模式开始，然后点击创建。

6. 预配数据库后，点击规则标签页。

7. 将安全规则替换为以下内容，允许通过身份验证的用户读取/写入自己的数据：

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

点击发布，将更改部署到 Firebase。

现在，您已设置 Firebase Authentication 和 Firestore。后端配置已完成。

Firebase Localhost

您协助 Patrick 设置了一个可正常运作的 Firebase Hosting 环境，Web 开发者可以在其中部署自己的代码。

然而，Patrick 从未启用过 Firebase Authentication，也没有在 Firebase 中部署过代码，因此他向 Ruby 发邮件寻求帮助…

Patrick，IT 管理员	Ruby，您好！ 感谢您提供的宝贵建议！Firebase 环境看起来已完全准备就绪了。我的下一项任务是部署网站开发者的代码。 您能介绍一下这需要做哪些准备，以及下一步我需要做什么吗？ Patrick
Ruby，顾问	Patrick，您好！ 太好了，我将向您发送如何运行应用和添加以下功能的说明： 设置用于登录的 Web 身份验证。 允许在“个人资料”页面记录客户详细信息。 创建自助式预约门户。 Ruby
Patrick，DevOps 工程师	Ruby，您好！ 听起来工作量还不小。 是不是每次我想添加新内容时，都必须更改结构？更何况，所做的更新还要过些时间才能体现出来… Patrick
Ruby，顾问	Patrick，您好！ 大部分繁重的工作都可以使用 Firebase 库来完成。 Firebase 提供了一些出色的命令行工具，可帮助您从 localhost 连接到后端 Firebase 项目。 只要使用 firebase init，告诉 Firebase 您要使用哪些产品。 项目设置完毕后，您只需在命令行中调用 `firebase deploy` 即可。 Ruby
Patrick，IT 管理员	Ruby，您好！ 哇，这让我感觉好多了！Firebase Hosting 是越来越好了 :-) Patrick

任务 3. 克隆代码库并安装依赖项。

在此任务中，您将使用 Cloud Shell 和 Cloud Shell 编辑器克隆应用代码并安装所需的 Node.js 软件包。

1. 在您用于 Firebase 控制台的无痕式窗口中，打开新标签页，前往 Google Cloud 控制台，并根据提示接受《服务条款》。

2. 点击 Google Cloud 控制台工具栏中的激活 Cloud Shell。

3. 在 Cloud Shell 终端中，运行以下命令，从 Cloud Storage 存储桶复制实验文件：

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. 如需查看和编辑代码，请点击 Cloud Shell 工具栏中的打开编辑器按钮。

5. 在 Cloud Shell 编辑器中，前往文件资源管理器中的 pet-theory/lab02 文件夹。

6. 在 Cloud Shell 编辑器中打开一个终端（或使用现有 Cloud Shell 终端），然后切换到 lab02 目录：

   cd pet-theory/lab02

7. 运行以下命令，安装 Node.js 软件包：

   npm install 注意：Cloud Shell 环境预安装了 Node.js 和 npm。

现在，您可以将应用关联到后端 Firebase 项目了。

任务 4. 授予 Firebase 访问权限。

在 IDE 中，连接 Firebase 并部署应用。

1. 输入以下命令，授予 Firebase 项目访问权限：

   firebase login --no-localhost

   注意：

   Firebase 会尝试授权本地环境与 Firebase 项目建立连接。 因此，请务必在无痕式窗口中执行浏览器活动，以便使用相应的凭据执行此操作。

2. 输入 Y，在 Firebase 中启用 Gemini 功能。

3. 如果系统询问 Firebase 是否可以收集错误报告信息，请输入 Y，然后按 Enter 键。

4. 点击生成的网址，在同一无痕式窗口中打开另一个标签页。

5. 选择您的实验账号，然后点击允许。

6. 点击是，我刚才运行了此命令以继续。

7. 点击是，这是我的会话 ID，确认您的会话 ID。

8. 复制生成的访问代码，并粘贴到 Cloud Shell 提示输入授权代码：中，然后按 Enter 键。

您应该会收到类似以下响应的输出：

输出示例：

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net

注意：

此时，localhost 已关联至后端 Firebase 项目。

Firebase 现已连接并获得授权。下一步是初始化要使用的 Firebase 产品。

任务 5. 初始化 Firebase 产品。

在 IDE 中，告诉 Firebase 哪些产品是必需的。

1. 在当前工作目录中初始化一个新 Firebase 项目：

   firebase init

   注意：

   运行此命令后，系统会引导您完成设置项目目录和 Firebase 产品的每个步骤。 选择要在此文件夹中设置的 Firebase CLI 功能。 使用箭头键在列表中向上和向下移动。使用空格键选择某项产品。

2. 选择以下产品：

   • Firestore
   • Hosting

3. 使用方向键和空格键选择 Firestore 和 Hosting。确保您的 shell 符合以下条件，然后按 Enter 键：

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. 执行其余步骤来配置 Firebase：

   • 使用向下键选择使用现有项目，然后按 Enter 键。
   • 从列表中选择您的项目 ID ，然后按 Enter 键。
   • 按 N 键，然后按 Enter 键，保留 firestore.rules 文件。
   • 按 N 键，然后按 Enter 键，保留 firestore.indexes.json 文件。
   • 按 Enter 键，保留公共目录。
   • 按 N 键，禁止重写 index.html 文件，然后按 Enter 键。
   • 当系统询问是否设置使用 GitHub 自动构建和部署时，按 N 键，然后按 Enter 键。
   • 当系统提示覆盖 404.html 文件时，按 N 键。
   • 当系统提示覆盖 index.html 文件时，按 N 键。
   • 当系统询问是否为 Firebase 安装智能体技能时，按 Y 键，然后按 Enter 键。

   输出示例：

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

本地配置现已完成。

任务 6. 部署到 Firebase。

请在 Cloud Shell 中继续完成此步骤。 确保您位于代码编辑器中的 pet-theory/lab02 文件夹。

1. 编辑 firebase.json 文件，使用 site 键更新 hosting 部分：

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. 打开终端并部署您的 Firebase 应用，部署时请使用您的网站 ID 值，例如：

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   输出：

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. 点击生成的托管网址（应类似于 .web.app），在新的无痕式标签页中打开：

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   重要提示：

   在本实验中，请勿使用个人凭据进行身份验证。 请使用 这个账号执行 Google 登录。

4. 点击使用 Google 账号登录按钮：

   注意：

   如果看到 browser is not supported or 3rd party cookies and data may be disabled（浏览器不受支持，或者第三方 Cookie 和数据可能会被禁用）错误，请务必在浏览器中启用 Cookie。

   

   在 Chrome 中，点击网址标签页最右侧的眼睛图标，然后点击弹出式窗口中的蓝色链接。点击网站无法正常运行？链接，可更新浏览器设置以接受 Cookie。

5. 使用为您提供的用户名（例如 ）登录。随即会打开以下页面：

   

   像 Pet Theory 这样的小公司没有资源或必需的技能来做这件事。 在这种情况下，允许应用用户使用他们现有的 Google 账号（或任何其他身份提供方）登录可能更方便！

   注意：

   管理密码并非易事，可能让公司面临额外的安全风险。此外，用户也不想再创建一套用户 ID 和密码。

现在，您已经部署了允许用户使用 Google 身份验证访问预约应用的代码。

任务 7. 向 Web 应用中添加客户页面。

返回终端，使用编辑器查看 public 文件夹中的文件。

1. 打开　public/customer.js 文件，然后复制并粘贴以下代码：

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. 打开 public/styles.css 文件并粘贴以下代码：

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. 在终端命令行中，运行以下命令：

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   输出：

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. 前往应用标签页，按 CMD+SHIFT+R (Mac) 或 CTRL+SHIFT+R (Windows) 强制刷新页面。常规刷新无法显示所需更新。

   

5. 输入一些客户信息：编造一个姓名和电话号码：

   客户姓名：

   John

   客户电话：

   98473757454

6. 点击保存个人资料。

7. 返回 Firebase 控制台。

8. 点击构建 > Firestore Database，以查看保存的个人资料信息：

   

9. 返回 Web 应用页面并点击 Appointments（预约）链接。您会看到一个空白页面，因为预约代码尚未部署。

验证您已完成的任务

点击检查我的进度，验证已完成以下目标：

向 Web 应用添加客户页面

太酷了！

Firestore 会实时更新客户端（Web 应用和原生移动应用），用户无需刷新或重新加载。

恭喜！

在本实验中，您使用 Firebase 创建了一个强大的无服务器 Web 应用。创建并配置 Firebase 项目后，您添加了 Firestore 安全功能，以自动执行服务器端身份验证和授权。然后，您在 Web 应用中添加了 Google 登录功能，并配置了数据库，使用户可以添加联系信息和预约。最后，您探索并部署了允许用户安排预约的代码，并在 Web 应用中查看了 Firebase 的实时更新。现在，您可以参加此学习路线中的更多实验了。

后续步骤/了解详情

• Google Cloud - 什么是无服务器？

Google Cloud 培训和认证

…可帮助您充分利用 Google Cloud 技术。我们的课程会讲解各项技能与最佳实践，可帮助您迅速上手使用并继续学习更深入的知识。我们提供从基础到高级的全方位培训，并有点播、直播和虚拟三种方式选择，让您可以按照自己的日程安排学习时间。各项认证可以帮助您核实并证明您在 Google Cloud 技术方面的技能与专业知识。

上次更新手册的时间：2026 年 5 月 31 日

上次测试实验的时间：2026 年 5 月 31 日

版权所有 2026 Google LLC 保留所有权利。Google 和 Google 徽标是 Google LLC 的商标。其他所有公司名和产品名可能是其各自相关公司的商标。