简体中文
  • react
  • react-native
  • expo
  • 教程
  • 认证
  • 身份验证
  • oauth
  • oidc
  • 身份

使用 Logto 构建 Expo (React Native) 认证

学习如何通过集成 Logto SDK 构建 Expo (React Native) 的用户认证流程。

Gao
Gao
Founder

开始

介绍

  • Logto 是一个开源的 Auth0 替代品，用于构建身份基础设施。它支持多种登录方式，包括用户名、电子邮件、电话号码以及 Google 和 GitHub 等流行的社交登录。
  • Expo (React Native) 是一个帮助你使用 React 创建运行在 Android、iOS 和 Web 上的通用原生应用的工具生态系统。

在本教程中，我们将向你展示如何通过集成 Logto SDK 使用 Expo (React Native) 构建用户身份验证流程。本教程使用 TypeScript 作为编程语言。

先决条件

在开始之前，请确保你具备以下条件：

  • 一个 Logto 账户。如果你还没有，可以 免费注册。
  • An Expo (React Native) 开发环境和一个项目。

创建一个 Logto 应用

要开始，创建一个 "Native" 类型的 Logto 应用。按照以下步骤创建一个 Logto 应用：

  1. 登录 Logto 控制台。
  2. 在左侧导航栏中，点击 应用。
  3. 点击 创建应用。
  4. 在打开的页面中，找到 "Native" 部分并找到 "Expo (React Native)" 卡片。
  5. 点击 开始构建，并输入你的应用名称。
  6. 点击 创建。

然后你应该会看到一个互动指南，引导你完成将 Logto SDK 集成到你的 Expo (React Native) 应用中的过程。以下内容可以作为未来使用的参考。

试试 Logto Cloud 的互动指南

集成 Logto SDK

安装

通过你喜欢的包管理器安装 Logto SDK 和对等依赖：

@logto/rn 包是 Logto 的 SDK。其余的包是其对等依赖。它们不能被列为直接依赖，因为 Expo CLI 要求所有原生模块的依赖都要直接安装在项目根目录的 package.json 中。

初始化 Logto 提供器

导入并使用 LogtoProvider 以提供 Logto 上下文：

实现登录和登出

切换到 Logto 控制台的应用程序详情页面。添加一个原生重定向 URI（例如，io.logto://callback），然后点击“保存”。

  • 对于 iOS，重定向 URI 方案实际上无关紧要，因为 ASWebAuthenticationSession 类将监听重定向 URI，无论它是否被注册。

  • 对于 Android，重定向 URI 方案必须在 Expo 的 app.json 文件中填写，例如：

现在回到你的应用程序，你可以使用 useLogto 钩子进行登录和登出：

显示用户信息

要显示用户信息，可以使用 getIdTokenClaims() 方法：

检查点：运行应用程序

现在你可以运行应用并尝试使用 Logto 登录/退出：

  1. 在浏览器中打开应用，你应该会看到 "登录" 按钮。
  2. 点击 "登录" 按钮，你应该会被重定向到 Logto 登录页面。
  3. 登录后，你应该会被重定向回应用，并且你应该会看到用户数据和 "退出" 按钮。
  4. 点击 "退出" 按钮，你应该会被重定向到 Logto 退出页面，然后重定向回应用，处于未登录状态。

如果你在集成过程中遇到任何问题，请不要犹豫，加入我们的 Discord 服务器 与社区和 Logto 团队聊天！

进一步阅读

今日试用 Logto