简体中文
  • netlify
  • auth solution
  • secure netlify functions

在 Netlify 上使用 Logto 的全栈身份验证解决方案：保护 Web 应用和无服务器功能

展示如何使用 Logto 身份验证保护 Netlify Web 应用和无服务器功能，并提供源代码示例和在线演示预览。

Yijun
Yijun
Developer

不要在用户认证上浪费数周时间
使用 Logto 更快地发布安全应用。几分钟内集成用户认证，专注于您的核心产品。
立即开始
Product screenshot

Netlify 是一个强大的平台，用于部署和托管现代 Web 项目，提供无缝的 Git 集成、自动构建以及无服务器功能，实现快速且可扩展的开发工作流。

在这份全面的指南中，你将学习如何：

  • 使用 Logto 在 Netlify 上实现单页应用程序 (SPA) 的身份验证，使用 Vite + React 示例演示
  • 使用 Logto 身份验证保护你的 Netlify 无服务器功能
  • 使用我们的参考实现 example-vite-react-logto 部署一个生产就绪的应用程序

查看在线演示预览。

前提条件

在开始本教程之前你需要设置的内容：

使用 Vite 创建 React 应用

按照 Vite 的入门指南创建一个 React 应用。

根据创建指南选择你需要的技术栈。在本文中，我们将选择 React + TypeScript。

然后进入项目根目录，根据指南安装依赖并运行应用。

使用 Netlify 部署应用

按照 Netlify 入门指南部署你的应用。

一旦你成功部署应用后，可以在 https://<your-site-name>.netlify.app 查看在线网站。

记下这个 URL，稍后配置 Logto 时将会用到。

将 Logto 集成到你的应用中

要开始使用 Logto 身份验证：

  1. 在 Logto 控制台中导航到“应用程序”页面
  2. 创建一个新应用
    • 选择你的前端框架（我们的示例中是 React）
    • 注意：你可以根据需要创建任何单页应用程序（SPA）或本机应用
  3. 按照内置指南或官方 React 身份验证集成指南 进行集成
  4. 从“应用程序详细信息”页面记录下：
    • 你的应用程序 ID
    • Logto 端点（可以在“端点和凭据”部分找到，通常格式是 https://<your-instance>.logto.app/） 这些凭据将在后续步骤中需要。

在我们的演示中，我们使用 /callback 路由来处理 Logto 的登录重定向。Logto 中的重定向 URI 需要配置为 https://<your-site-name>.netlify.app/callback。 当用户注销后，我们返回到主页，因此我们将注销后重定向 URI 设置为 https://<your-site-name>.netlify.app。

然后在 Netlify 的环境变量中设置我们创建的 Logto 应用的信息（你的网站 -> 站点配置 -> 环境变量）：

然后我们在前端项目中使用这些配置：

你可以在这里查看最终集成代码：example-vite-react-logto。

注意，当我们部署到 Netlify 并通过 Logto 登录时，我们的 URL 不会自动重定向到我们的 Callback 页面。这是因为 Netlify 默认不支持单页应用程序 (SPA) 的客户端路由。

当你访问像 /callback 这样的路径时，Netlify 会尝试在服务器上查找相应的文件，而不是将请求转发到你的 React 应用程序。

此时，我们需要在你的 Netlify 项目的 public 目录中创建一个 _redirects 文件，告诉 Netlify 将所有请求重定向到你的 index.html：

或者，你可以在项目根目录下创建一个 netlify.toml 文件：

现在我们的路由应该可以正常工作了。

使用 Netlify 函数创建后端 API

Netlify Functions 提供了一种简单而强大的方式来构建后端 API。使用 Netlify Functions，我们可以编写服务器端逻辑，而无需担心传统的服务器配置和维护。

这些功能是版本控制的，构建和部署与您的网站一起，使前端和后端之间的开发和部署过程无缝。

让我们开始使用 Netlify Functions 构建我们的后端 API。

首先，我们需要在项目的 netlify 目录下创建一个 functions 目录，然后创建一个 hello.ts 文件：

当我们访问 https://<your-site-name>.netlify.app/.netlify/functions/hello 时，这个功能将被调用并返回“Hello world!”。

如果你觉得路径 /.netlify/functions/hello 有点奇怪，可以通过在 public/_redirects 文件中添加一个重定向规则来设置重定向以调用该功能：

这样，当我们访问 https://<your-site-name>.netlify.app/api/hello 时，它将调用我们的功能并返回“Hello world!”。这实际上是使用 Netlify 函数构建 API 的常用方式。

我们可以在前端项目中使用 fetch 访问这个 API：

使用 Logto 保护你的 Netlify 函数

既然我们有了后端 API，我们需要确保只有经过身份验证的用户才能访问它。我们将使用 Logto 的身份验证机制保护我们的 Netlify 函数。

要保护我们的 API 端点：

  1. 在 Logto 控制台中创建一个 API 资源来表示我们的后端 API：
  • 进入 Logto 控制台中的“API 资源”，创建一个新的 API
  • 设置名称和 API 标识符（例如，https://api.backend.com）
  • 记下 API 资源详细信息页面上的 API 标识符，因为稍后将需要它
  1. 通过将标识符添加到 Netlify 环境变量来配置你的应用以使用这个 API 资源：
  1. 更新你的 Logto 配置以包含这个 API 资源：
  1. 在访问受保护的端点时，你的前端需要包含一个有效的访问令牌。以下是如何请求和使用它：

现在，让我们在后端实现令牌验证，以确保只有带有有效访问令牌的请求才能被处理。

首先，我们需要安装 jose 依赖来帮助我们验证 JWT 令牌：

然后，我们可以在后端实现令牌验证：

现在，让我们更新我们的 Netlify 函数以使用 verifyLogtoToken 函数：

就是这样！现在，我们的 Netlify 函数已被 Logto 保护，只有具有有效访问令牌的请求才能被处理。

测试我们的演示

现在，将你的应用部署到 Netlify 并测试一下！你可以在这里查看在线演示预览。

  1. 访问实时网站 https://<your-site-name>.netlify.app
  2. 点击导航栏中的“登录”按钮
  3. 使用 Logto 用户账户登录，你将看到已登录状态。
  4. 点击导航栏中的“受保护资源”选项卡，你将被重定向到受保护的页面。
  5. 点击“查看受保护资源”按钮，你将看到来自 api/hello 端点的响应数据。
  6. 点击导航栏中的“注销”按钮，你将被重定向到主页。

结论

本指南演示了如何在部署在 Netlify 上的 Web 应用中集成 Logto 身份验证。

通过配置 Logto 应用和 API 资源，我们实现了前端身份验证并保护了 Netlify 函数端点。

为了更精细的访问控制，你可以利用 Logto 的 RBAC (基于角色的访问控制) 功能，通过在 Logto 控制台中定义角色和权限，并在 Netlify 函数中验证用户角色。