使用 Logto 构建 CapacitorJS 认证
在本教程中，我们将演示如何在 Capacitor 中使用 Logto 构建认证流程。这将帮助你轻松创建跨平台的登录和注册流程。
Founder
介绍
- Logto 是一个现代的 Auth0 替代方案，用于以最小的努力构建客户身份基础设施。它支持多种登录方式，包括用户名、电子邮箱、电话号码，以及 Google 和 GitHub 等流行社交登录。
- Capacitor 是一个开源的原生运行时，用于构建 Web Native 应用程序。
在本教程中，我们将演示如何在 Capacitor 中使用 Logto 构建认证流程。这将帮助你轻松创建跨平台的登录和注册流程。
准备工作
在开始之前，请确保你具备以下条件：
创建一个 Logto 应用程序
首先，创建一个“Native”类型的 Logto 应用程序。Logto 应用程序在 OAuth 2.0 和 OpenID Connect (OIDC) 流程中充当客户端应用程序。按照以下步骤创建 Logto 应用程序：
- 登录到 Logto Cloud Console。
- 在左侧导航栏中，点击 Applications。
- 点击 Create application。
- 选择 Native 作为应用程序类型并输入应用程序名称。
- 点击 Create。
创建 Logto 应用程序后，配置重定向 URI。重定向 URI 用于在认证流程后将用户重定向回你的应用程序。
确保 URI 重定向到 Capacitor 应用程序，例如，com.example.app://callback。值可能会根据你的 Capacitor 应用配置而有所不同。更多详情，请参阅 Capacitor Deep Links。
记得在更新重定向 URI 后点击 Save Changes。
如果你不确定重定向 URI，可以暂时留空并稍后更新。
设置 Capacitor
假设你已经有一个 Capacitor 项目，本教程是框架无关的，因此你可以使用任何你喜欢的 UI 框架并相应地更新代码。
安装依赖
初始化 Logto 客户端
endpoint是 Logto API 端点。你可以在内置指南或租户设置的 Domains 部分找到。appId是 Logto 应用程序 ID。你可以在应用程序详情页面找到。
实现登录按钮
将以下代码添加到登录按钮的 onClick 处理程序中：
将 com.example.app://callback 替换为你在 Logto 应用程序中配置的重定向 URI。
检查点：触发认证 流程
运行 Capacitor 应用程序并点击登录按钮。一个浏览器窗口将打开，重定向到 Logto 登录页面。
登出
由于 Capacitor 在 iOS 上利用 Safari View Controller，在 Android 上利用 Chrome Custom Tabs，认证状态可以保持一段时间。然而，有时用户可能希望立即退出应用程序。在这种情况下，我们可以使用 signOut 方法来签出用户：
signOut 方法有一个可选参数用于退出后的重定向 URI。如果没有提供，用户将被重定向到 Logto 退出页面：
用户需要点击“完成”以关闭 Web 视图并返回到 Capacitor 应用程序。如果你想自动重定向用户回 Capacitor 应用程序，可以提供退出后的重定向 URI：
确保退出后的重定向 URI 重定向到 Capacitor 应用程序，并记得将退出后的重定向 URI 添加到 Logto 控制台：
检查点：完成认证流程
再次运行 Capacitor 应用程序并点击登录按钮。如果一切顺利，当认证流程完成时，Capacitor 应用程序将接收登录结果并在控制台中打印用户声明。
然后点击退出按钮，Capacitor 应用程序将被重定向到 Logto 退出页面。如果配置了退出后的重定向 URI，它将自动重定向回 Capacitor 应用程序。
现在，你可以在 Logto Cloud Console 中配置认证流程，而无需编写复杂的代码。该配置将应用于所有客户端应用程序，确保一致的用户体验。
如果在集成过程中遇到任何问题，请随时通过 [email protected] 与我们联系或加入我们的 Discord 服务器！