在几分钟内为 Logto 制作一个网页 SDK

Logto，一个开源的身份验证平台，提供了大量的官方 SDK，旨在简化各种框架和平台的集成。然而，仍有许多平台没有官方的 SDK。

为了弥补这个空白，Logto 提供了基础包 @logto/browser，旨在帮助开发者制作符合特定需求的自定义 SDK。这个包实现了 Logto 的核心功能，不依赖任何特定的框架或平台，只要它支持 JavaScript 并在浏览器环境中运行。

在这篇指南中，我们将指导你如何使用 @logto/browser 创建一个 React SDK，这个 SDK 将实现登录流程。你可以按照相同的步骤为在浏览器中运行的任何其他基于 JavaScript 平台创建 SDK。

登录流程#

在我们开始前，让我们理解一下 Logto 的登录流程。登录流程包括以下步骤：

1. 重定向到 Logto：用户被重定向到 Logto 的登录页面。
2. 验证：用户输入他们的凭据并与 Logto 进行身份验证。
3. 重定向回你的应用：在成功验证后，用户会带着授权码重定向回你的应用。
4. 代码交换：你的应用将授权码交换成令牌。

@logto/browser 的简要介绍#

@logto/browser 包提供了一个 LogtoClient 类，提供了 Logto 的核心功能，包含登录流程的方法：

1. signIn()：生成 OIDC 授权URL，然后重定向到它。
2. handleSignInCallback()：检查和解析回调 URL，提取授权码，然后通过调用令牌端点来交换令牌。
3. isAuthenticated()：检查用户是否已经被验证。

制作 React SDK#

在 SDK 中，我们将提供 2 个钩子：useLogto 和 useHandleSignInCallback，以及一个 LogtoProvider 组件：

1. useLogto：一个钩子，提供 signIn方法来触发登录流程，以及 isAuthenticated状态来检查用户是否已经被验证。
2. useHandleSignInCallback：一个处理回调URL，并且完成授权码对令牌的交换，完成登录流程。

要使用 SDK，你可以简单地用 LogtoProvider 组件包裹你的应用，并使用钩子来检查身份验证状态，登录和处理回调。

步骤 1：安装包#

首先，使用 npm 或其他包管理器安装 @logto/browser包：

步骤 2：定义 React 的上下文#

定义提供者的上下文，包含 3 部分：

1. 将在提供者中初始化，并在钩子中使用的底层 LogtoClient 实例。
2. 认证状态。
3. 设置认证状态的方法。

创建一个新文件 context.tsx，并写下以下代码：

步骤 3：实现提供者#

有了上下文，让我们实现提供者。提供者将初始化 LogtoClient 实例，检查用户是否已经被验证，并将上下文提供给其子项。

创建一个新的 provider.tsx 文件：

步骤 4：实现钩子#

现在，让我们实现钩子。

• useLogto：在这个钩子中，我们使用上下文获取 LogtoClient 实例，并提供 signIn 方法和 isAuthenticated 状态。你可以继续向这个钩子添加更多方法。
• useHandleSignInCallback：这个钩子会从浏览器读取回调 URL，提取授权码，然后交换为令牌。在用户被验证后，它还会将身份验证状态设置为 true。

创建一个新的 hooks.ts 文件，然后写下以下代码：

检查点：使用 SDK#

现在，你已经为 Logto 制作了 React SDK。你可以通过用 LogtoProvider 组件包裹应用，并使用钩子来检查身份验证状态，登录，并处理回调来在你的应用中使用它。你可以在这里查看官方的 React 示例项目。

结论#

在这篇指南中，我们已经向你讲解了如何为 Logto 创建一个实现基础身份验证流程的 React SDK。这里提供的 SDK 是一个基本示例。你可以通过增加更多的方法和功能来扩展它以满足你的应用的需求。

你可以按照同样的步骤为任何在浏览器中运行的其他基于 JavaScript 的平台创建 SDK。

资源：

1. Logto 浏览器 SDK
2. Logto React SDK