Lee达森的博客

我们使用安排、行动和断言模式描述了Header组件的测试套件，并验证呈现的组件是否与存储的快照匹配。我们利用了内置的 Next.js Jest 配置，因此需要配置项目的基本目录以将配置和 .env 文件加载到测试环境中。接下来，通过创建一个名为 jest.config.js 的新文件来配置 Jest 以适应我们的 Next.js 设置，并在文件中包含代码清单 16-1 的内容。因此，将代码清单 16-2 中的两个命令添加到项目的 package.json 文件的 scripts 属性中。

我们已经成功地为 Food Finder 应用程序添加了 OAuth 身份验证流程。现在用户可以使用他们的 GitHub 帐户登录。登录后，他们可以维护他们的个人公共愿望清单。此外，我们还保护了 GraphQL 变更，这意味着它们不再对任何人公开；相反，只有已登录的用户才能访问它们。在最后一章中，我们将添加自动化测试来使用 Jest 评估应用程序。

尽管我们已经将 next-auth 包添加到项目中，创建了 OAuth API 路由，并配置了我们的 OAuth 提供商，但由于没有登录按钮，我们仍然无法访问会话信息。如果它们匹配，我们知道当前登录的用户已访问他们自己的愿望清单，并相应地调整用户界面。但在服务器端，我们需要通过 JWT 访问会话信息，因为会话信息是 API 请求的 HTTP cookies 的一部分。此组件使用我们默认的按钮组件，一旦用户登录，它会显示他们的全名，以及一个指向他们愿望清单的链接。，就像我们为位置详情页面所做的那样。

在本章中，你将为 Food Finder 应用程序添加 OAuth 身份验证，让用户有机会使用他们的 GitHub 账户登录。你还将实现愿望清单页面，已认证的用户可以在该页面添加和移除位置，以及实现完成此操作所需的按钮组件。最后，你将学习如何保护你的 GraphQL 变更，防止未认证的用户访问。

我们的应用程序将由三个Next.js页面组成。起始页面将显示从数据库中检索到的位置列表。列表中的每个项目将链接到其各自的位置详细信息页面，我们将使用位置的 ID 构建其 URL，如下所示：/location/:location_id。第三个页面是用户的愿望清单页面。它类似于起始页面，并遵循与位置详细信息页面相同的动态 URL 模式，只是提供用户的 ID 而不是位置的 ID。此页面仅显示已添加到愿望清单中的位置。我们还必须考虑为每个页面使用哪种渲染策略。

将示例 13-1中的代码添加到文件中以定义 GraphQL 查询的模式。graphql示例 13-1：graphql/locations/custom.gql.ts 文件GraphQL API 将从 Mongoose 模式返回位置对象。因此，我们必须定义一个表示这些位置对象的自定义类型。创建一个自定义 Location 类型。

你可能已经注意到，我们需要两个自定义类型作为统一函数的参数。一个参数定义了与愿望清单相关的查找操作的属性，一个参数是位置的 ID。在文件夹中创建文件来定义这些类型，如示例 12-9所示。typescript示例 12-9：mongoose/locations/custom.d.ts 文件我们定义并直接导出这两种自定义类型。非常简单。它定义了一个对象，该对象具有一个属性，即位置的 ID，这个 ID 可以是字符串或字符串数组。我们使用它通过 ID 查找位置。第二种类型是，我们将使用它查找在。

中间件是将我们稍后创建的前端连接到后端容器中现有的 MongoDB 实例的软件粘合剂。在本章中，我们将设置 Mongoose，连接到我们的数据库，然后为应用程序创建一个 Mongoose 模型。在下一章中，我们将通过编写 GraphQL API 来完成中间件。这个中间件是的一部分，因此我们将在应用程序容器中工作。但是，由于 Docker 守护进程确保本地应用程序目录中的文件可以在应用程序容器内的工作目录中即时访问，我们可以使用本地代码编辑器或 IDE 在本地机器上修改文件。

我们已经用 Docker 容器设置了本地开发环境。通过本章中创建的文件，我们将应用程序开发与本地主机系统解耦。现在我们可以切换主机系统，同时确保 Food Finder 应用程序始终使用相同的Node.js版本运行。此外，我们添加了一个运行 MongoDB 服务器的容器，我们将在下一章中实现应用程序的中间件时连接到它。

使用 Docker 容器化平台可以轻松部署应用程序并使用微服务架构。本章介绍了 Docker 生态系统的构建块：主机、Docker 守护进程、Dockerfile、镜像和容器。使用 Docker Compose 和 Docker 卷，你可以将应用程序拆分为单一的、自包含的服务。要充分发挥 Docker 的潜力，请阅读官方教程：https://docs.docker.com/get-started/ 或 https://docker-curriculum.com。

专业的全栈开发人员经常使用 Docker，更广泛地说是使用容器。Docker 是一个开源的容器化平台，可以解决三个常见问题。首先，它允许我们为每个项目运行特定版本的软件，例如 Node.js。其次，它将开发环境与本地机器解耦，创建一种可重复的方式来运行应用程序。第三，与传统的虚拟机不同，Docker 容器运行在共享主机上。因此，它们的大小更小，消耗的内存比模拟完整系统并且通常是特定于硬件的经典虚拟机要少。结果，基于容器的应用程序轻量且易于扩展。这些优势使 Docker 成为近年来最受欢迎的开发平台。

身份验证涉及使用凭据授权访问，而授权定义和授予访问权限。本章介绍了使用 OAuth2 协议实现授权。你熟悉了授权授予流，这是全栈 Web 应用程序中最常见的 OAuth 流，并学习了如何创建 JWT。然后你练习了手动处理 OAuth，获取和使用 JWT Bearer 令牌，并从总体上将 OAuth 流应用于你的应用程序。你可以在查找其他资源、教程和规范。下一章介绍 Docker，一个将你的开发环境与本地计算机解耦的容器化平台。

例如，我们可以为我们虚构的天气服务的 OAuth JWT 定义一个私有声明，以指定我们正在使用的服务类型。在此期间之后，授权服务器将拒绝该令牌，你需要请求一个新的过期声明的值是一个数字，其日期定义为“自 Unix 纪元以来的秒数”，这是时间戳的一种常见格式。我们虚构的天气服务的 OAuth JWT 的公共声明可能包括 ZIP 代码，以直接提供每个站点的位置数据。为了获得 JWT 字符串，我们创建一个数组，包含来自头部和负载对象的 Base64 编码字符串，以及 Base64 编码的签名。

某些应用程序在登录工作流中会存储用户的数据。有很多种方法可以实现这种身份验证和授权，但最简单的方法之一是使用 OAuth2 来借用知名公司的现有账户。OAuth2，或简称 OAuth，是一种开放的访问委托标准，如果你曾使用过某个应用程序的“用 Facebook、GitHub 或 Google 账户登录”功能，你可能已经遇到过它。OAuth 协议本质上允许我们的 Web 应用程序访问另一个应用程序的登录数据，而无需第三方与我们共享用户的凭据。

让我们定义两个测试用例并为每个用例创建输入值。我们的输入参数将特定于每个测试用例，因此我们将它们声明在测试用例内部，而不是使用beforeEach或beforeAll钩子。使用以下代码更新文件：typescript});});});示例 8-4：包含安排步骤的测试套件describe函数创建了我们的测试套件，它包含两个对test函数的调用，每个调用都是一个测试用例。对于这两个调用，传递的第一个参数是我们在测试运行器报告中看到的描述。我们每个测试都评估sum函数的结果。

为了验证数据的完整性，我们必须创建一个基于模式的 Mongoose 模型，该模型作为数据库中 MongoDB 集合的直接接口。与数据库的所有交互都将通过该模型进行。然而，在创建模型之前，我们需要先创建模式（schema）本身，它定义了数据库数据的结构，并将 Mongoose 实例映射到集合中的文档。我们的 Mongoose 模式将匹配第 6 章为 GraphQL API 创建的模式。

本章探讨了RESTful和GraphQL Web API及其在全栈开发中的作用。虽然我们在前几章中使用了REST设计，但现在你应该已经熟悉了无状态服务器的概念以及用于在REST中执行CRUD操作的五种HTTP方法。你还练习了使用公共REST API读取和更新数据，然后评估其请求和响应。虽然GraphQL API的实现需要更多的工作，但它们减少了REST中常见的过度获取和不足获取问题。你学会了使用schema定义API合同，并通过解析器实现其功能。然后，你查询了API并在请求中定义了要返回的数据集。