跳到主要内容
给我们的新朋友:

Logto 是一个为现代应用和 SaaS 产品设计的 Auth0 替代方案。它提供 Cloud 和 开源 服务，帮助你快速启动身份和管理 (IAM) 系统。享受认证 (Authentication)、授权 (Authorization) 和多租户管理 一体化。

我们建议从 Logto Cloud 上的免费开发租户开始。这可以让你轻松探索所有功能。

在本文中，我们将介绍使用 Next.js (Pages Router) 和 Logto 快速构建 Apple 登录体验（用户认证 (Authentication)）的步骤。

先决条件

在 Logto 中创建一个应用程序​

Logto 基于 OpenID Connect (OIDC) 认证 (Authentication) 和 OAuth 2.0 授权 (Authorization)。它支持跨多个应用程序的联合身份管理，通常称为单点登录 (SSO)。

要创建你的 传统网页 应用程序，只需按照以下步骤操作：

  1. 打开 Logto Console。在“开始使用”部分，点击“查看全部”链接以打开应用程序框架列表。或者，你可以导航到 Logto Console > Applications，然后点击“创建应用程序”按钮。 开始使用
  2. 在打开的模态窗口中，点击“传统网页”部分，或使用左侧的快速过滤复选框过滤所有可用的“传统网页”框架。点击 "Next.js" 框架卡片以开始创建你的应用程序。 框架
  3. 输入应用程序名称，例如“Bookstore”，然后点击“创建应用程序”。

🎉 太棒了！你刚刚在 Logto 中创建了你的第一个应用程序。你将看到一个祝贺页面，其中包含详细的集成指南。按照指南查看你的应用程序中的体验将会是什么样的。

集成 Next.js SDK​

提示:

安装​

通过你喜欢的包管理器安装 Logto SDK：

npm i @logto/next

集成​

初始化 LogtoClient​

导入并初始化 LogtoClient：

libraries/logto.ts
import LogtoClient from '@logto/next';

export const logtoClient = new LogtoClient({
  appId: '<your-application-id>',
  appSecret: '<your-app-secret-copied-from-console>',
  endpoint: '<your-logto-endpoint>', // 例如 http://localhost:3001
  baseUrl: 'http://localhost:3000',
  cookieSecret: 'complex_password_at_least_32_characters_long',
  cookieSecure: process.env.NODE_ENV === 'production',
});

配置重定向 URI​

在我们深入细节之前，这里是终端用户体验的快速概述。登录过程可以简化如下：

  1. 你的应用调用登录方法。
  2. 用户被重定向到 Logto 登录页面。对于原生应用，将打开系统浏览器。
  3. 用户登录并被重定向回你的应用（配置为重定向 URI）。

关于基于重定向的登录​

  1. 此认证 (Authentication) 过程遵循 OpenID Connect (OIDC) 协议，Logto 强制执行严格的安全措施以保护用户登录。
  2. 如果你有多个应用程序，可以使用相同的身份提供商 (IdP)（日志 (Logto)）。一旦用户登录到一个应用程序，当用户访问另一个应用程序时，Logto 将自动完成登录过程。

要了解有关基于重定向的登录的原理和好处的更多信息，请参阅 Logto 登录体验解释。

备注:

在以下代码片段中，我们假设你的应用程序运行在 http://localhost:3000/。

配置重定向 URI​

切换到 Logto Console 的应用详情页面。添加一个重定向 URI http://localhost:3000/api/logto/sign-in-callback。

Logto Console 中的重定向 URI

就像登录一样，用户应该被重定向到 Logto 以注销共享会话。完成后，最好将用户重定向回你的网站。例如，添加 http://localhost:3000/ 作为注销后重定向 URI 部分。

然后点击“保存”以保存更改。

准备 API 路由​

准备 API 路由 以连接 Logto。

返回到你的 IDE /编辑器，使用以下代码首先实现 API 路由：

pages/api/logto/[action].ts
import { logtoClient } from '../../../libraries/logto';

export default logtoClient.handleAuthRoutes();

这将自动创建 4 个路由：

  1. /api/logto/sign-in: 使用 Logto 登录。
  2. /api/logto/sign-in-callback: 处理登录回调。
  3. /api/logto/sign-out: 使用 Logto 登出。
  4. /api/logto/user: 检查用户是否通过 Logto 认证，如果是，返回用户信息。

实现登录和登出​

我们已经准备好了 API 路由，现在让我们在你的主页上实现登录和登出按钮。我们需要在需要时将用户重定向到登录或登出路由。为此，使用 useSWR 从 /api/logto/user 获取认证状态。

查看 此指南 以了解有关 useSWR 的更多信息。

/pages/index.tsx
import { type LogtoContext } from '@logto/next';
import useSWR from 'swr';

const Home = () => {
  const { data } = useSWR<LogtoContext>('/api/logto/user');

  return (
    <nav>
      {data?.isAuthenticated ? (
        <p>
          你好, {data.claims?.sub},
          <button
            onClick={() => {
              window.location.assign('/api/logto/sign-out');
            }}
          >
            登出
          </button>
        </p>
      ) : (
        <p>
          <button
            onClick={() => {
              window.location.assign('/api/logto/sign-in');
            }}
          >
            登录
          </button>
        </p>
      )}
    </nav>
  );
};

export default Home;

检查点：测试你的应用程序​

现在，你可以测试你的应用程序：

  1. 运行你的应用程序，你将看到登录按钮。
  2. 点击登录按钮，SDK 将初始化登录过程并将你重定向到 Logto 登录页面。
  3. 登录后，你将被重定向回你的应用程序，并看到登出按钮。
  4. 点击登出按钮以清除令牌存储并登出。

添加 Apple 连接器​

要实现快速登录并提高用户转化率，请将 Next.js 作为身份提供商 (IdP) 进行连接。Logto 社交连接器可以帮助你在几分钟内通过允许输入多个参数来建立此连接。

要添加社交连接器，只需按照以下步骤操作：

  1. 导航到 Console > Connectors > Social Connectors。
  2. 点击“添加社交连接器”并选择“Apple”。
  3. 按照 README 指南完成必填字段并自定义设置。

Connector tab

备注:

如果你正在按照现场连接器指南进行操作，可以跳过下一部分。

设置 Apple Sign-in​

备注:

如果你的应用中有其他社交登录方法，AppStore 要求必须提供 Apple 登录。如果你也提供 Android 应用，在 Android 设备上支持 Apple 登录也是很好的选择。

在继续之前，你需要注册 Apple Developer Program。

为你的应用启用 Apple 登录​

警告:

即使你只想在 web 应用上实现 Apple 登录，你仍然需要拥有一个现有的应用来融入 AppStore 生态系统（即拥有一个有效的 App ID）。

你可以通过 Xcode -> 项目设置 -> 签名和功能，或者访问 Certificates, Identifiers & Profiles 来完成。

Enable Sign in with Apple

有关更多信息，请参阅 Apple 官方文档中的“启用 App ID”部分。

创建标识符​

  1. 访问 Certificates, Identifiers & Profiles，然后点击“Identifier”旁边的“+”按钮。
  2. 在“注册新标识符”页面，选择“Services IDs”并点击“Continue”。
  3. 填写“Description”和“Identifier”（例如，Logto Test 和 io.logto.test），然后点击“Continue”。
  4. 仔细检查信息并点击“Register”。

为你的标识符启用 Apple 登录​

点击你刚创建的标识符。在详情页面勾选“Sign in with Apple”并点击“Configure”。

Enable Sign in with Apple

在打开的模态框中，选择你刚刚启用 Apple 登录的 App ID。

输入你的 Logto 实例的域名，不带协议和端口，例如，your.logto.domain；然后输入“Return URL”（即重定向 URI），这是带有 /callback/${connector_id} 的 Logto URL，例如，https://your.logto.domain/callback/apple-universal。你可以在 Admin Console 中创建 Apple 连接器后获取随机生成的 connector_id。

domain-and-url

点击“Next”，然后点击“Done”关闭模态框。点击右上角的“Continue”，然后点击“Save”保存你的配置。

警告:

Apple 不允许使用 HTTP 协议和 localhost 域名的 Return URL。

如果你想在本地测试，你需要编辑 /etc/hosts 文件，将 localhost 映射到自定义域名，并设置本地 HTTPS 环境。mkcert 可以帮助你设置本地 HTTPS。

配置权限​

要从 Apple 获取用户的电子邮件，你需要将权限配置为包含 email。对于电子邮件和姓名，你可以使用 name email 作为权限。有关更多信息，请参阅 Apple 官方文档。

备注:

用户可能会选择隐藏他们的电子邮件地址。在这种情况下，你将无法获取真实的电子邮件地址，而是会返回类似 [email protected] 的电子邮件地址。

保存你的配置​

仔细检查你是否在 Logto 连接器配置区域填写了必要的值。点击“保存并完成”（或“保存更改”），Apple 连接器现在应该可用了。

在登录体验中启用 Apple 连接器​

一旦你成功创建了一个社交连接器，你可以在登录体验中将其启用为“继续使用 Apple”按钮。

  1. 导航到 Console > 登录体验 > 注册和登录。
  2. （可选）如果只需要社交登录，选择“无”作为注册标识符。
  3. 将配置好的 Apple 连接器添加到“社交登录”部分。

登录体验选项卡

测试和验证​

返回到你的 Next.js (Pages Router) 应用。你现在应该可以使用 Apple 登录了。享受吧！

拓展阅读​

终端用户流程：Logto 提供开箱即用的认证 (Authentication) 流程，包括多因素认证 (MFA) 和企业单点登录 (SSO)，以及强大的 API，用于灵活实现账户设置、安全验证和多租户体验。

授权 (Authorization)：授权 (Authorization) 定义了用户在被认证 (Authentication) 后可以执行的操作或访问的资源。探索如何保护你的 API 以用于原生和单页应用程序，并实现基于角色的访问控制 (RBAC)。

组织 (Organizations)：在多租户 SaaS 和 B2B 应用中特别有效，组织功能支持租户创建、成员管理、组织级 RBAC 和即时供应。

客户 IAM 系列：我们关于客户（或消费者）身份和访问管理的系列博客文章，从 101 到高级主题及更深入的内容。