How to build Okta enterprise SSO with Expo (React Native)

给我们的新朋友:

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

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

在本文中，我们将介绍使用 Expo (React Native) 和 Logto 快速构建 Okta enterprise SSO 登录体验（用户认证 (Authentication)）的步骤。

先决条件

一个正在运行的 Logto 实例。查看介绍页面以开始。
Expo (React Native) 的基本知识。
一个可用的 Okta enterprise SSO 账户。

Create an application in Logto

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

要创建你的 Native app 应用程序，只需按照以下步骤操作：

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

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

Integrate Expo SDK

提示:

以下演示基于 Expo ~50.0.6。
示例项目可在我们的 SDK 仓库中找到。

安装

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

npm
Yarn
pnpm

npm i @logto/rn
npm i expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

yarn add @logto/rn
yarn add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

pnpm add @logto/rn
pnpm add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

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

备注:

如果你在 bare React Native app 中安装此软件包，还应遵循这些额外的安装说明。

初始化 Logto 提供者

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

App.tsx
import { LogtoProvider, LogtoConfig } from '@logto/rn';

const config: LogtoConfig = {
  endpoint: '<your-logto-endpoint>',
  appId: '<your-application-id>',
};

const App = () => (
  <LogtoProvider config={config}>
    <YourAppContent />
  </LogtoProvider>
);

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

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

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

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

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

对于 iOS，重定向 URI 方案并不重要，因为 ASWebAuthenticationSession 类会监听重定向 URI，无论它是否已注册。
对于 Android，重定向 URI 方案必须填写在 Expo 的 app.json 文件中，例如：
app.json
```
{
  "expo": {
    "scheme": "io.logto"
  }
}
```

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

App.tsx
import { useLogto } from '@logto/rn';
import { Button } from 'react-native';

const Content = () => {
  const { signIn, signOut, isAuthenticated } = useLogto();

  return (
    <div>
      {isAuthenticated ? (
        <Button title="Sign out" onPress={async () => signOut()} />
      ) : (
        // 将重定向 URI 替换为你自己的
        <Button title="Sign in" onPress={async () => signIn('io.logto://callback')} />
      )}
    </div>
  );
};

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

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

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

Add Okta enterprise SSO connector

To simplify access management and gain enterprise-level safeguards for your big clients, connect with Expo as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

Navigate to Logto console > Enterprise SSO.

SSO page

Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
Provide a unique name (e.g., SSO sign-in for Acme Company).

Select your SSO provider

Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

SSO connection

Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

SSO experience

Save changes.

Set up Okta 管理门户上的 OIDC 应用程序

步骤 1：在 Okta 管理门户上创建一个 OIDC 应用程序 {#step-1-create-an-oidc-application-on-okta-admin-portal}

访问 Okta 管理门户并以管理员身份登录。
使用侧边菜单导航到 Applications/Applications 页面。
点击 Create App Integration 按钮以创建一个新的 OIDC 应用程序。
选择 OIDC - OpenID Connect 选项作为 Sign-in method。
选择 Web Application 选项作为 Application type。

Okta create application.webp

点击 Next 按钮继续。

步骤 2：配置应用程序设置

提供一个 App integration name。它将用作你的 OIDC 应用程序的标识符。
使用 Logto SSO 连接器的回调 URL 添加一个新的 Sign-in redirect URIs。

这是 Okta 在成功认证 (Authentication) 后将用户浏览器重定向到的 URI。当用户成功通过 IdP 认证 (Authentication) 后，IdP 会将用户的浏览器重定向回这个指定的 URI，并附带一个授权 (Authorization) 代码。Logto 将根据从此 URI 接收到的授权 (Authorization) 代码完成认证 (Authentication) 过程。

Okta application settings.webp

将用户分配给应用程序。

根据 Assignments 设置，你可以选择将应用程序分配给所有用户或特定用户/组。

Okta assign users.webp

点击 Save 按钮以保存应用程序设置。

步骤 3：使用客户端凭据设置 Logto 连接器

成功创建 OIDC 应用程序后，你将被重定向到应用程序详情页面。

Okta client credentials.webp

复制 client ID 和 client secret，并填写到 Logto SSO 连接器 Connection 标签中的相应字段。

使用你的 Okta 域作为 发行者 (Issuer)。例如：https://dev-12345678.okta.com。一旦你填写完所有字段，点击 Save 按钮保存连接器设置。

如果你提供的 发行者 (Issuer) 链接有效，你将会看到在 发行者 (Issuer) 字段下方显示的解析后的 Okta IdP 配置完整列表。

步骤 4：附加权限 (Scopes)（可选）

使用 Scope 字段向你的 OAuth 请求添加额外的权限 (Scopes)。这将允许你从 Okta OAuth 服务器请求更多信息。有关可用权限 (Scopes) 的更多详细信息，请参考 Okta 文档。

无论自定义权限 (Scope) 设置如何，Logto 始终会向 IdP 发送 openid、profile 和 email 权限 (Scopes)。这是为了确保 Logto 能够正确检索用户的身份信息和电子邮件地址。

步骤 5：设置电子邮件域并启用 SSO 连接器

在 Logto 的连接器 SSO 体验 标签上提供你组织的 电子邮件域。这将启用 SSO 连接器作为这些用户的认证 (Authentication) 方法。

具有指定域电子邮件地址的用户将被重定向，以使用你的 SSO 连接器作为他们唯一的认证 (Authentication) 方法。

有关与 Okta 创建 OIDC 集成的更多详细信息，请查看创建 OIDC 应用集成。

Save your configuration

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

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

Navigate to: Console > Sign-in experience > Sign-up and sign-in.
Enable the "Enterprise SSO" toggle.
Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

Auto detect SSO sign-in via email domain

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation

返回到你的 Expo (React Native) 应用。你现在应该可以使用 Okta enterprise SSO 登录了。享受吧！

Create an application in Logto​

Integrate Expo SDK​

安装​

初始化 Logto 提供者​

实现登录和登出​

关于基于重定向的登录​

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

Add Okta enterprise SSO connector​

Set up Okta 管理门户上的 OIDC 应用程序​

步骤 2：配置应用程序设置​

步骤 3：使用客户端凭据设置 Logto 连接器​

步骤 4：附加权限 (Scopes)（可选）​

步骤 5：设置电子邮件域并启用 SSO 连接器​

Save your configuration​

Enable Okta enterprise SSO connector in Sign-in Experience​

Testing and Validation​

Further readings​