简体中文
在 Netlify 上使用 Logto 的全栈身份验证解决方案：保护 Web 应用和无服务器功能
展示如何使用 Logto 身份验证保护 Netlify Web 应用和无服务器功能，并提供源代码示例和在线演示预览。
Yijun
Developer
Developer
展示如何使用 Logto 身份验证保护 Netlify Web 应用和无服务器功能，并提供源代码示例和在线演示预览。
Netlify 是一个强大的平台，用于部署和托管现代 Web 项目，提供无缝的 Git 集成、自动构建以及无服务器功能，实现快速且可扩展的开发工作流。
在这份全面的指南中，你将学习如何：
查看在线演示预览。
在开始本教程之前你需要设置的内容：
按照 Vite 的入门指南创建一个 React 应用。
根据创建指南选择你需要的技术栈。在本文中，我们将选择 React + TypeScript。
然后进入项目根目录，根据指南安装依赖并运行应用。
按照 Netlify 入门指南部署你的应用。
一旦你成功部署应用后，可以在 https://<your-site-name>.netlify.app 查看在线网站。
记下这个 URL，稍后配置 Logto 时将会用到。
要开始使用 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 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：
既然我们有了后端 API，我们需要确保只有经过身份验证的用户才能访问它。我们将使用 Logto 的身份验证机制保护我们的 Netlify 函数。
要保护我们的 API 端点：
https://api.backend.com）现在，让我们在后端实现令牌验证，以确保只有带有有效访问令牌的请求才能被处理。
首先，我们需要安装 jose 依赖来帮助我们验证 JWT 令牌：
然后，我们可以在后端实现令牌验证：
现在，让我们更新我们的 Netlify 函数以使用 verifyLogtoToken 函数：
就是这样！现在，我们的 Netlify 函数已被 Logto 保护，只有具有有效访问令牌的请求才能被处理。
现在，将你的应用部署到 Netlify 并测试一下！你可以在这里查看在线演示预览。
https://<your-site-name>.netlify.appapi/hello 端点的响应数据。本指南演示了如何在部署在 Netlify 上的 Web 应用中集成 Logto 身份验证。
通过配置 Logto 应用和 API 资源，我们实现了前端身份验证并保护了 Netlify 函数端点。
为了更精细的访问控制，你可以利用 Logto 的 RBAC (基于角色的访问控制) 功能，通过在 Logto 控制台中定义角色和权限，并在 Netlify 函数中验证用户角色。