使用 Server Actions 将 Logto 身份验证添加到你的 Next.js 应用程序中

服务器操作 提供了一种无需传统 REST API 即可构建强大 web 应用程序的新方法。我们之前在我们的文章中讨论过这个。

今天，我们很高兴地宣布对我们 Next.js SDK 的服务器操作提供官方支持，尽管它是一个实验性功能。

欲快速了解，请查看这个示例并按照我们的指南详细了解如何将 Logto 与 Server Actions 集成。

先决条件#

要开始，请确保你具备以下条件：

• 一个正在运行的 Logto 实例或 Logto Cloud 账户的访问权限。
• 启用了 Server Actions 功能的 Next.js 项目。

配置 Logto#

如果你正在自托管 Logto，请参考 Logto 的“入门”文档来设置你的 Logto 实例。

如果你使用的是 Logto Cloud，请通过输入 URL https://cloud.logto.io/ 打开 Logto 控制台，或输入你为自托管设置的端点。

接下来，导航到“应用程序”选项卡并点击“创建应用”。

在出现的模式中，选择“Next.js (App Router)”并提供一个应用名称，例如“Next.js App”。然后点击“创建应用”。

你将被定向到 Logto 的教程页面。点击“完成”以继续到应用程序详情页面。

在“Redirect URIs”部分，输入以下值：

例如，如果你在 http://localhost:3000 上托管 Next.js，值应为：

点击底部的“保存更改”按钮。操作成功后，保持此页面打开，因为它将对 Next.js 配置有所帮助。

设置 Next.js 应用程序#

确保你已有最新版本的 Next.js 项目。如果还没有，请参照官方安装指南创建一个项目。

在撰写本指南时，该功能为实验性，需要在 next.config.js 中激活

定义 Logto 库#

首先使用 npm 安装 @logto/next 模块：

你也可以使用 yarn 或 pnpm。

然后让我们将一些函数创建为“服务器操作”，创建新文件 libraries/logto.ts:

在此文件中，我们导出四个函数用于身份验证。请注意第一行，"use server" 表示文件中的代码只能在服务器端运行。我们使用 "next/headers" 来管理基于 cookie 的会话。

• "user server" 参考： https://react.dev/reference/react/use-server
• 使用 "next/headers" 管理 cookie 的参考：https://nextjs.org/docs/api-reference/next/headers

我们导出的上述函数可以直接从客户端 React 组件中调用。这是使用服务器操作的主要优势。让我们进入下一章来了解如何使用这些函数。

实现登录和退出按钮#

有了身份验证功能，我们来构建页面。我们将创建两个客户端组件以启动登录和退出操作。

登录#

/app/sign-in.tsx：

在这里，我们导入了上一章中定义的 signIn 函数。尽管代码在服务器端执行，但在用户点击登录按钮时，此函数仍可以由 <button> 组件直接调用。通过这样做，我们消除了编写任何 REST API 以处理登录过程的需要。事实上，Next.js 为我们处理 "POST" 请求调度详细信息。在接收到 redirectUrl 后，我们可以调用 router.push 重定向到 Logto 登录页面。

退出#

/app/sign-out.tsx：

登出过程与登录过程类似。

准备一个回调页面#

作为标准 OIDC 身份提供者，Logto 在身份验证后将用户重定向到回调 URL。因此，我们必须准备一个回调页面来处理登录结果。

/app/callback/page.tsx

在这里，我们使用一个具有 useEffect 的客户端组件，使其易于显示“加载中”页面以提升用户体验。

显示用户上下文和安全页面#

现在，让我们构建一个简约的主页来展示 Logto SDK 的实用性。如果需要的话，可通过检查 isAuthenticated 值保护任何资源不被未知用户访问，并重定向到登录页面或显示错误消息。

app/page.tsx

如你所见，这是一个 服务器组件，无需 useEffect 和管理复杂的状态变化。

结论#

与依赖 REST API 的传统 Next.js 应用程序相比，服务器操作提供了一种简化而直接的实现身份认证的方式。

完整的代码示例可以在这个仓库中找到：https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample

为什么不试一下 Logto Cloud，体验它的便捷？