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 发送一些背景信息，然后他们开了一次会来确定要执行的主要活动。在这次会议上，他们确定了 Ruby 需要完成以下任务：

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

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

任务 1.注册 Firebase 应用

打开无痕式窗口以访问 Firebase 控制台。

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

• 用户名输入“”
• 密码输入“”。

注意：
带有 标签的 Firebase 项目已为您预配。 请选择此项目以访问 Firebase 产品，然后按照本教程操作。

在 Firebase 项目概览屏幕中，输入以下命令：

1. 从“将 Firebase 添加至您的应用即可开始使用”图标列表中选择 Web 图标（在下图中突出显示）：

   

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

   Pet Theory

3. 选中“还为此应用设置 Firebase Hosting”。

4. 点击“部署”下拉菜单，然后选择创建新网站。

5. 修改默认值以添加 student 前缀。

   student-bucket-{{{ project_0.project_id | "PREFIX" }}}-1 注意：
   请确保网站下拉菜单中包含 student-bucket--1，然后再继续操作。 该网站的网域将沿用此设置。

6. 点击注册应用按钮。

7. 点击下一步 > 下一步 > 前往控制台。

   注意：
   更改默认 Firebase 网站网域需要更改本地环境。
   具体而言，我们需要：
   1. 更新 firebase.json 以添加自定义网站 ID。为您的网站设置部署目标
   2. 使用命令 firebase deploy --only hosting:student-bucket--1 时，请使用网站 ID

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

验证您已完成的任务

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

注册 Firebase 应用

任务 2.启用 Firebase 产品

Firebase Authentication

在 Firebase 控制台中，我们将设置 Firebase Authentication。

1. 点击左侧导航面板中的 Build 下拉菜单按钮。

2. 选择 Authentication 功能块，然后点击开始：

3. 点击登录方法标签页，然后点击 Google 这一项。

4. 点击右上角的启用切换开关，对于项目支持邮箱，从下拉列表中选择您的实验账号。

   {{{user_0.username | "<用户名>"}}}

   现在，您将看到类似下图的页面：

5. 验证上面的设置后，点击保存按钮。

   注意：
   在 Firebase 中使用自定义网域时，您还需要修改“已获授权的网域”设置。

6. 点击设置标签页

7. 在网域标题下，点击已获授权的网域菜单项

   现在，您将看到类似下图的页面：

8. 点击添加网域按钮

9. 输入以下网域：

   student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app 注意：
   添加自定义网域后，Firebase OAuth 流程才能正常运行。

10. 点击添加按钮

验证您已完成的任务

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

设置 Firebase Authentication

Firebase Firestore

在 Firebase 控制台中，我们将设置 Firebase Authentication。

1. 点击左侧导航面板中的 Build 下拉菜单按钮。

2. 选择 Firestore Database 功能块，然后点击创建数据库：

3. 接受默认设置，然后点击下一步

4. 点击创建以预配 Cloud Firestore

5. 点击规则标签页

   注意：
   要使用身份验证，我们需要更新 Firestore 数据库的安全规则。 在新规则中，我们允许在用户通过身份验证的情况下对数据库进行读/写操作。

6. 按如下所示更新规则：

   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 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.安装 Firebase CLI

使用 IDE 连接 Firebase 并部署应用。

注意：
开发环境已预配置 Firebase 工具。

1. 从“实验详细信息”面板复制 IDE 链接

   {{{ project_0.startup_script.service_url | "IDE" }}}

2. 将链接粘贴到新的无痕式浏览器标签页中，以打开 Cloud Code。

3. 依次点击“应用”菜单 () > 终端 > 新终端，以打开终端。

4. 从命令行克隆 GitHub 代码库：

   git clone https://github.com/rosera/pet-theory.git

5. 点击左侧面板中的探索器图标，然后点击打开文件夹 > pet-theory > lab02。点击确定。

   注意：
   如果您看到 Do you trust the authors of the files in this folder?（您信任此文件夹中文件的作者吗？）的弹出式窗口，请勾选相应复选框，然后点击 Yes, I trust the authors（是的，我信任作者）。

6. 依次点击“应用”菜单 () > 终端 > 新终端，再次打开终端。

7. 更新节点软件包：

   npm i

   输出示例：

   added 630 packages, and audited 631 packages in 42s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3 npm notice To update run: npm install -g npm@10.8.3 npm notice npm warn using --force Recommended protections disabled. up to date, audited 631 packages in 2s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

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

任务 4.授予 Firebase 访问权限

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

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

   firebase login --no-localhost 注意：
   Firebase 会尝试授权本地环境与 Firebase 项目建立连接。 因此，请确保在无痕式窗口中执行浏览器活动，以便使用相应的凭据执行此操作。

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

3. 在新的无痕式浏览器标签页中复制并粘贴生成的网址，然后按 Enter 键（直接点击链接会出错）。

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

5. 点击 Yes, I just ran this command（是，我刚才运行的是此命令）以继续

点击 Yes, this is my session ID（是，这是我的会话 ID）确认您的会话 ID。

7. 然后，您会获得一个访问代码：

8. 复制该访问代码，将其粘贴到 Cloud Shell 提示 Enter authorization code:（输入授权代码：）中，然后按 Enter 键。

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

输出示例：

✔ 成功！以 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：

   • 使用向下键选择 Use an existing project（使用现有项目），然后按 Enter 键。
   • 从列表中选择您的项目 ID ，然后按 Enter 键。
   • 按 Enter 键，然后按 N 键，以保留 firestore.rules 文件。
   • 按 Enter 键，然后按 N 键，以保留 firestore.indexes.json 文件。
   • 按 Enter 键保留公共目录，然后按 N 键以禁止重写 /index.html 文件。
   • 按 Enter 键，出现“Set up automatic builds and deploys with GitHub?”（设置使用 GitHub 自动构建和部署）时，按 N 键。
   • 当提示覆盖 404.html 文件时，输入 N。
   • 当提示覆盖 index.html 文件时，输入 N。

   输出示例：

   ✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

本地配置现已完成。

任务 6.部署到 Firebase

请在终端中继续完成此步骤。 确保您仍然位于 pet-theory/lab02 文件夹中。

1. 修改并更新 firebase.json 中 site 的 hosting 部分

   预期输出

   { ... "hosting": { "site": "student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1", ... } }

2. 使用您的网站 ID 值部署 Firebase 应用，例如：

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

   输出：

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

3. 复制托管网址（应类似于 .web.app），然后在新无痕式标签页中打开它。

   https://student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app 重要提示：
   在本实验中，请勿使用个人凭据进行身份验证。 请使用账号： 执行 Google 登录！

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

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

   

   在 Chrome 浏览器中，点击网址标签页最右侧的眼睛图标，然后点击弹出式窗口中的蓝色链接，即可启用 Cookie。点击网站无法正常运行？链接，可更新浏览器设置以接受 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:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

   输出：

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

4. 前往应用标签页，按 CMND+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 技术方面的技能与专业知识。

上次更新手册的时间：2024 年 10 月 16 日

上次测试实验的时间：2024 年 10 月 16 日

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