Logto 是一个为现代应用和 SaaS 产品设计的 Auth0 替代方案。它提供 Cloud 和 开源 服务,帮助你快速启动身份和管理 (IAM) 系统。享受认证 (Authentication)、授权 (Authorization) 和多租户管理 一体化。
我们建议从 Logto Cloud 上的免费开发租户开始。这可以让你轻松探索所有功能。
在本文中,我们将介绍使用 Vue 和 Logto 快速构建 Okta enterprise SSO 登录体验(用户认证 (Authentication))的步骤。
先决条件
Create an application in Logto
Logto 基于 OpenID Connect (OIDC) 认证 (Authentication) 和 OAuth 2.0 授权 (Authorization)。它支持跨多个应用程序的联合身份管理,通常称为单点登录 (SSO)。
要创建你的 单页应用 应用程序,只需按照以下步骤操作:
- 打开 Logto Console。在“开始使用”部分,点击“查看全部”链接以打开应用程序框架列表。或者,你可以导航到 Logto Console > Applications,然后点击“创建应用程序”按钮。
- 在打开的模态窗口中,点击“单页应用”部分,或使用左侧的快速过滤复选框过滤所有可用的“单页应用”框架。点击 "Vue" 框架卡片以开始创建你的应用程序。
- 输入应用程序名称,例如“Bookstore”,然后点击“创建应用程序”。
🎉 太棒了!你刚刚在 Logto 中创建了你的第一个应用程序。你将看到一个祝贺页面,其中包含详细的集成指南。按照指南查看你的应用程序中的体验将会是什么样的。
Integrate Vue SDK
- Logto Vue SDK 是使用组合式 API 构建的,并利用了可组合函数,因此它仅兼容 Vue 3。
- 教程视频可在我们的 YouTube 频道 上观看。
- 完整的示例项目可在我们的 SDK 仓库 中找到。
安装
- npm
- pnpm
- yarn
npm i @logto/vue
pnpm add @logto/vue
yarn add @logto/vue
初始化 LogtoClient
导入并使用 createLogto
来安装 Logto 插件:
import { createLogto, LogtoConfig } from '@logto/vue';
import { createApp } from 'vue';
import App from './App.vue';
const config: LogtoConfig = {
endpoint: '<your-logto-endpoint>',
appId: '<your-application-id>',
};
const app = createApp(App);
app.use(createLogto, config);
app.mount('#app');
配置重定向 URI
在我们深入细节之前,这里是终端用户体验的快速概述。登录过程可以简化如下:
- 你的应用调用登录方法。
- 用户被重定向到 Logto 登录页面。对于原生应用,将打开系统浏览器。
- 用户登录并被重定向回你的应用(配置为重定向 URI)。
关于基于重定向的登录
- 此认证 (Authentication) 过程遵循 OpenID Connect (OIDC) 协议,Logto 强制执行严格的安全措施以保护用户登录。
- 如果你有多个应用程序,可以使用相同的身份提供商 (IdP)(日志 (Logto))。一旦用户登录到一个应用程序,当用户访问另一个应用程序时,Logto 将自动完成登录过程。
要了解有关基于重定向的登录的原理和好处的更多信息,请参阅 Logto 登录体验解释。
在以下代码片段中,我们假设你的应用程序运行在 http://localhost:3000/
。
配置重定向 URI
切换到 Logto Console 的应用详情页面。添加一个重定向 URI http://localhost:3000/callback
。
就像登录一样,用户应该被重定向到 Logto 以注销共享会话。完成后,最好将用户重定向回你的网站。例如,添加 http://localhost:3000/
作为注销后重定向 URI 部分。
然后点击“保存”以保存更改。
处理重定向
用户从 Logto 重定向回你的应用后,还有一些事情需要处理。让我们妥善处理它。
首先,让我们创建一个回调页面:
import { useHandleSignInCallback } from '@logto/vue';
import router from '@/router';
const { isLoading } = useHandleSignInCallback(() => {
// 完成后执行某些操作,例如重定向到主页
});
<template>
<!-- 当正在处理中 -->
<p v-if="isLoading">正在重定向...</p>
</template>
将以下代码插入到不需要认证 (Authentication) 的 /callback
路由中:
// 假设使用 vue-router
const router = createRouter({
routes: [
{
path: '/callback',
name: 'callback',
component: CallbackView,
},
],
});
实现登录和登出
我们提供了两个组合式函数 useHandleSignInCallback()
和 useLogto()
,可以帮助你轻松管理认证 (Authentication) 流程。
在调用 .signIn()
之前,请确保你已在管理控制台中正确配置了重定向 URI。
import { useLogto } from '@logto/vue';
const { signIn, signOut, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('http://localhost:3000/callback');
const onClickSignOut = () => signOut('http://localhost:3000');
<template>
<button v-if="!isAuthenticated" @click="onClickSignIn">登录</button>
<button v-else @click="onClickSignOut">登出</button>
</template>
调用 .signOut()
将清除内存和 localStorage 中所有的 Logto 数据(如果存在)。
检查点:测试你的应用程序
现在,你可以测试你的应用程序:
- 运行你的应用程序,你将看到登录按钮。
- 点击登录按钮,SDK 将初始化登录过程并将你重定向到 Logto 登录页面。
- 登录后,你将被重定向回你的应用程序,并看到登出按钮。
- 点击登出按钮以清除令牌存储并登出。
Add Okta enterprise SSO connector
To simplify access management and gain enterprise-level safeguards for your big clients, connect with Vue 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.
- 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).
- Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.
- 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.
- 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
。
点击 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) 过程。
- 将用户分配给应用程序。
根据 Assignments
设置,你可以选择将应用程序分配给所有用户或特定用户/组。
点击 Save
按钮以保存应用程序设置。
步骤 3:使用客户端凭据设置 Logto 连接器
成功创建 OIDC 应用程序后,你将被重定向到应用程序详情页面。
复制 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 连接器现在应该可用了。
Enable Okta enterprise SSO connector in Sign-in Experience
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).
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
返回到你的 Vue 应用。你现在应该可以使用 Okta enterprise SSO 登录了。享受吧!
Further readings
终端用户流程:Logto 提供开箱即用的认证 (Authentication) 流程,包括多因素认证 (MFA) 和企业单点登录 (SSO),以及强大的 API,用于灵活实现账户设置、安全验证和多租户体验。
授权 (Authorization):授权 (Authorization) 定义了用户在被认证 (Authentication) 后可以执行的操作或访问的资源。探索如何保护你的 API 以用于原生和单页应用程序,并实现基于角色的访问控制 (RBAC)。
组织 (Organizations):在多租户 SaaS 和 B2B 应用中特别有效,组织功能支持租户创建、成员管理、组织级 RBAC 和即时供应。
客户 IAM 系列:我们关于客户(或消费者)身份和访问管理的系列博客文章,从 101 到高级主题及更深入的内容。