跳到主要内容
给我们的新朋友:

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

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

在本文中，我们将介绍使用 Vanilla JS 和 Logto 快速构建 GitHub 登录体验（用户认证 (Authentication)）的步骤。

先决条件

  • 一个正在运行的 Logto 实例。查看 介绍页面 以开始。
  • Vanilla JS 的基本知识。
  • 一个可用的 GitHub 账户。

在 Logto 中创建一个应用程序​

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

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

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

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

集成 Vanilla JS SDK​

提示:
  • vanilla-js SDK 是 framework-agnostic 的，你可以通过编写一个包装器来适配它，以在任何前端框架中使用。
  • 示例项目可在我们的 SDK 仓库 中找到。

安装​

选择你喜欢的包管理器或使用 CDN 来安装 Logto Browser SDK。

npm i @logto/browser

初始化 LogtoClient​

通过传递配置导入并初始化一个 LogtoClient 实例：

index.js
import LogtoClient from '@logto/browser';

const logtoClient = new LogtoClient({
  endpoint: '<your-logto-endpoint>',
  appId: '<your-application-id>',
});

endpoint 和 appId 可以在 Logto Console 的应用详情页面中找到。

实现登录和登出​

配置重定向 URI​

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

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

关于基于重定向的登录​

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

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

备注:

在以下代码片段中，我们假设你的应用程序运行在 http://localhost:3000/。

配置重定向 URI​

切换到 Logto Console 的应用详情页面。添加一个重定向 URI http://localhost:3000/callback。

Logto Console 中的重定向 URI

就像登录一样，用户应该被重定向到 Logto 以注销共享会话。完成后，最好将用户重定向回你的网站。例如，添加 http://localhost:3000/ 作为注销后重定向 URI 部分。

然后点击“保存”以保存更改。

处理重定向​

用户从 Logto 重定向回你的应用后，还有一些事情需要处理。让我们妥善处理它。

pages/Callback.js
const callbackHandler = async (logtoClient) => {
  await logtoClient.handleSignInCallback(window.location.href);

  if (!logtoClient.isAuthenticated) {
    // 处理登录失败
    alert('登录失败');
    return;
  }

  // 处理登录成功
  window.location.assign('/');
};

实现登录和登出​

logtoClient 提供了 signIn 和 signOut 方法，帮助你轻松管理认证 (Authentication) 流程。

备注:

在调用 .signIn() 之前，请确保你已在管理控制台中正确配置了重定向 URI。

pages/Home.js
const isAuthenticated = await logtoClient.isAuthenticated();

const onClickSignIn = () => {
  logtoClient.signIn('http://localhost:3000/callback');
};
const onClickSignOut = () => {
  logtoClient.signOut('http://localhost:3000');
};

const button = document.createElement('button');
button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);

document.body.appendChild(button);

调用 .signOut() 将清除内存和 localStorage 中所有的 Logto 数据（如果存在）。

处理认证 (Authentication) 状态​

在 Logto SDK 中，我们通常可以使用 logtoClient.isAuthenticated 来检查认证 (Authentication) 状态，如果用户已登录，值将为 true，否则，值将为 false。

在你的原生 JS 应用中，你可以使用 isAuthenticated 状态以编程方式显示和隐藏登录和登出按钮。让我们看看如何做到这一点。

const redirectUrl = 'http://localhost:3000/callback';
const baseUrl = 'http://localhost:3000';

// 条件渲染登录和登出按钮
const render = async (logtoClient) => {
  const isAuthenticated = await logtoClient.isAuthenticated();
  const container = document.querySelector('#container');

  const onClickSignIn = () => logtoClient.signIn(redirectUrl);
  const onClickSignOut = () => logtoClient.signOut(baseUrl);

  const button = document.createElement('button');
  button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
  button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);

  container.append(button);
};

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

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

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

添加 GitHub 连接器​

要实现快速登录并提高用户转化率，请将 Vanilla JS 作为身份提供商 (IdP) 进行连接。Logto 社交连接器可以帮助你在几分钟内通过允许输入多个参数来建立此连接。

要添加社交连接器，只需按照以下步骤操作：

  1. 导航到 Console > Connectors > Social Connectors。
  2. 点击“添加社交连接器”并选择“GitHub”。
  3. 按照 README 指南完成必填字段并自定义设置。

Connector tab

备注:

如果你正在按照现场连接器指南进行操作，可以跳过下一部分。

设置 GitHub OAuth 应用​

使用 GitHub 账户登录​

访问 GitHub 网站并使用你的 GitHub 账户登录。如果你没有账户，可以注册一个新账户。

创建和配置 OAuth 应用​

按照创建 OAuth 应用指南，注册一个新应用。

在 Application name 中为你的新 OAuth 应用命名，并填写应用的 Homepage URL。你可以将 Application description 字段留空，并将 Authorization callback URL 自定义为 ${your_logto_origin}/callback/${connector_id}。connector_id 可以在 Logto 管理控制台连接器详情页面的顶部栏找到。

备注:

如果在登录时遇到错误信息“重定向 URI 必须与此应用程序注册的回调 URL 匹配。”，请尝试对齐 GitHub OAuth 应用的授权回调 URL 和 Logto 应用的重定向 URL（当然，包括协议）以解决问题。

我们建议不要勾选 Enable Device Flow 前的框，否则在移动设备上使用 GitHub 登录的用户必须在 GitHub 应用中确认初始登录操作。许多 GitHub 用户没有在手机上安装 GitHub 移动应用，这可能会阻碍登录流程。如果你希望终端用户确认他们的登录流程，请忽略我们的建议。查看 设备流 的详细信息。

管理 OAuth 应用​

访问 OAuth 应用页面，你可以添加、编辑或删除现有的 OAuth 应用。 你还可以在 OAuth 应用详情页面找到 Client ID 并生成 Client secrets。

配置你的连接器​

在 clientId 和 clientSecret 字段中填写你从上一节提到的 OAuth 应用详情页面获得的 Client ID 和 Client Secret。

scope 是一个以空格分隔的权限 (Scopes)列表。如果未提供，权限 (Scope) 默认为 read:user。

配置类型​

名称类型
clientIdstring
clientSecretstring
scopestring

保存你的配置​

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

在登录体验中启用 GitHub 连接器​

一旦你成功创建了一个社交连接器，你可以在登录体验中将其启用为“继续使用 GitHub”按钮。

  1. 导航到 Console > 登录体验 > 注册和登录。
  2. （可选）如果只需要社交登录，选择“无”作为注册标识符。
  3. 将配置好的 GitHub 连接器添加到“社交登录”部分。

登录体验选项卡

测试和验证​

返回到你的 Vanilla JS 应用。你现在应该可以使用 GitHub 登录了。享受吧！

拓展阅读​

终端用户流程：Logto 提供开箱即用的认证 (Authentication) 流程，包括多因素认证 (MFA) 和企业单点登录 (SSO)，以及强大的 API，用于灵活实现账户设置、安全验证和多租户体验。

授权 (Authorization)：授权 (Authorization) 定义了用户在被认证 (Authentication) 后可以执行的操作或访问的资源。探索如何保护你的 API 以用于原生和单页应用程序，并实现基于角色的访问控制 (RBAC)。

组织 (Organizations)：在多租户 SaaS 和 B2B 应用中特别有效，组织功能支持租户创建、成员管理、组织级 RBAC 和即时供应。

客户 IAM 系列：我们关于客户（或消费者）身份和访问管理的系列博客文章，从 101 到高级主题及更深入的内容。