使用身份验证构建站点

许多网站需要用户进行身份验证才能保护私有数据。

理解客户端和服务器之间的身份验证

在许多现代网站中，客户端 — 或称为前端 — 与后端是分离的。Gatsby 就是通过这种模式，结合来自众多后端的数据来构建前端。

为了提供身份验证功能，还需要利用并连接另一个服务与 Gatsby。有许多开源技术可以提供此功能。例如：

• 使用 Passport.js 的 Node.js 应用
• 使用 Devise 的 Ruby on Rails API

另一个选择是第三方技术，例如：

• Firebase
• Auth0
• AWS Amplify
• Netlify Identity

这些工具遵循一个流程，以便在客户端根据身份验证服务来验证用户。该服务会返回一个令牌，客户端可以使用该令牌来访问受保护的数据。此图展示了该过程：

1. 首先，Gatsby 站点（客户端）向身份验证服务发出请求，执行诸如注册新用户或登录之类的操作。

2. 如果客户端提供的凭据（如用户名和密码）与身份验证服务中的用户匹配，则会返回一个令牌（如 JSON Web Token，简称 JWT），以便用户可以拥有一个证明其身份的密钥。返回的用户数据可以通过 Gatsby 的 wrapRootElement API 使用 React Context API 的 Provider 组件传递给组件，从而存储在 Gatsby 应用中。

3. 使用密钥，客户端可以向外部数据源（如 API（服务器））发出请求，其中存储了受保护的数据。密钥对于特定用户是唯一的，并允许客户端访问其特定数据。

4. 服务器将数据返回给客户端，客户端可以使用这些数据将信息传递到组件中。

注意：与其他使用 React 构建的站点（如 Create React App）一样，它们也需要遵循相同的模式。

在 Gatsby 站点中实现身份验证

由于 Gatsby 构建页面和渲染具有动态功能静态资源的方式很独特，因此在 Gatsby 站点中实现身份验证时，有几点需要注意。

设置仅客户端路由

使用 Gatsby，您可以通过仅客户端路由在您的应用中创建受限区域。

Gatsby 在路由和页面的创建方式上与传统的 React 应用略有不同。由于 Gatsby 生成的静态 HTML 文件位于文件服务器上，因此您无法以编程方式控制对这些文件的访问（例如：用户可以猜测或键入 URL 并直接导航到页面）。正如“添加应用和网站功能”概述页面中的部分内容所示，可以创建仅客户端路由，以便使用基于 React 的路由器在页面之间进行路由，而不是在服务器上的不同静态 HTML 文件之间导航。

利用这种客户端路由，您可以保护或自定义您的路由。使用 Gatsby 随附安装的 @reach/router 库，您可以在页面上设置一个路由器，并控制在调用特定路由时加载哪个组件，以及在提供内容之前检查诸如身份验证状态之类的变量是否存在。

在“仅客户端路由和用户身份验证”指南中概述了更具体的此模式的代码示例。

在构建过程中保护代码免受对浏览器全局对象的访问

在浏览器中可访问的全局对象（如 localStorage）在 Gatsby 站点构建过程中不可用，因为构建在 Node.js 环境中运行。

然而，一些第三方服务可能会尝试使用内部方法访问 localStorage 或 window 对象。为了防止这些代码片段破坏构建，应该将这些调用包装在检查中或使用 useEffect 钩子来验证代码是否在浏览器中运行，并在构建过程中跳过它们。

有关构建相关错误的更多信息，请参阅“调试 HTML 构建”指南。

真实示例：Gatsby 商店

Gatsby 商店（Gatsby store）是一个使用 Gatsby 构建的实时应用程序，它实现了使用 Auth0 进行身份验证。

Gatsby 商店 repo 中的工具函数利用 Auth0 的 API 通过 GitHub 验证用户，并包装 Auth0 的 API 来检查部分 Auth0 代码仅在浏览器中运行。

为了使用私有路由保护已认证的内容，在<PrivateRoute />组件中实现了一个<Router />，它会检查用户是否已通过身份验证，否则将其重定向到/login。

此私有路由模式也在“制作带身份验证的站点”教程中进行了介绍。

深入阅读

如果您想了解更多关于 Gatsby 中身份验证区域的信息，以下（非详尽）列表可能有所帮助：

• 制作带用户身份验证的站点，一个高级 Gatsby 教程
• Gatsby repo “简单身份验证”示例
• “简单身份验证”示例的实时版本
• 一个 Gatsby 邮件应用程序，使用 React Context API 处理身份验证
• 使用 Auth0 为您的 Gatsby 应用添加身份验证（与 Jason Lengstorf 的直播）
• 使用 Okta 为您的 Gatsby 应用添加身份验证
• Gatsby 博客上其他与身份验证相关的帖子