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

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

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

在本文中,我们将介绍使用 PHPLogto 快速构建 Google 登录体验(用户认证 (Authentication))的步骤。

先决条件

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

在 Logto 中创建一个应用程序

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

要创建你的 传统 Web 应用程序,只需按照以下步骤操作:

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

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

集成 Laravel SDK

本指南将向你展示如何将 Logto 集成到你的 PHP Web 应用中。

提示:
  • 示例 使用了 Laravel,但对于其他框架,概念是相同的。

安装

composer require logto/sdk

初始化 LogtoClient

首先,创建一个 Logto 配置:

index.php
use Logto\Sdk\LogtoClient;
use Logto\Sdk\LogtoConfig;

$client = new LogtoClient(
new LogtoConfig(
endpoint: "https://you-logto-endpoint.app",
appId: "replace-with-your-app-id",
appSecret: "replace-with-your-app-secret",
),
);
提示:

你可以在管理控制台的应用详情页面找到并复制“应用密钥”:

App Secret

默认情况下,SDK 使用内置的 PHP 会话来存储 Logto 数据。如果你想使用其他存储,可以将自定义存储对象作为第二个参数传递:

index.php
$client = new LogtoClient(
new LogtoConfig(
// ...
),
new YourCustomStorage(),
);

查看 Storage 了解更多详情。

配置重定向 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 会将用户重定向到你在 Logto 控制台中设置的回调 URL。在此示例中,我们使用 /callback 作为回调 URL:

Route::get('/callback', function () {
try {
$client->handleSignInCallback(); // 处理很多事情
} catch (\Throwable $exception) {
return $exception; // 将此更改为你的错误处理逻辑
}
return redirect('/'); // 成功登录后将用户重定向到主页
});

实现登录路由

在你的 Web 应用中,添加一个路由以正确处理用户的登录请求。例如:

Route::get('/sign-in', function () {
return redirect($client->signIn('http://localhost:3000/callback'));
});

http://localhost:3000/callback 替换为你在 Logto Console 中为此应用设置的回调 URL。

如果你想在第一个屏幕显示注册页面,可以将 interactionMode 设置为 signUp

Route::get('/sign-in', function () {
return redirect($client->signIn('http://localhost:3000/callback', InteractionMode::signUp));
});

现在,每当你的用户访问 http://localhost:3000/sign-in 时,它将启动一个新的登录尝试并将用户重定向到 Logto 登录页面。

注意 创建一个登录路由并不是启动登录尝试的唯一方法。你始终可以使用 signIn 方法获取登录 URL 并将用户重定向到该 URL。

实现登出路由

用户发起注销请求后,Logto 将清除会话中的所有用户认证 (Authentication) 信息。

要清理 PHP 会话和 Logto 会话,可以实现一个注销路由,如下所示:

Route::get('/sign-out', function () {
return redirect(
// Redirect the user to the home page after a successful sign-out
$client->signOut('http://localhost:3000/')
);
});

postLogoutRedirectUri 是可选的,如果未提供,用户将在成功退出后被重定向到 Logto 默认页面(不会重定向回你的应用程序)。

注意 名称 postLogoutRedirectUri 来自 OpenID Connect RP-Initiated Logout 规范。虽然 Logto 使用“sign-out”而不是“logout”,但概念是相同的。

处理认证 (Authentication) 状态

在 Logto SDK 中,我们可以使用 $client->isAuthenticated() 来检查认证 (Authentication) 状态,如果用户已登录,值将为 true,否则,值将为 false。

我们还需要实现一个主页用于演示:

  • 如果用户未登录,显示一个登录按钮;
  • 如果用户已登录,显示一个登出按钮。
Route::get('/', function () {
if ($client->isAuthenticated() === false) {
return "未认证 <a href='/sign-in'>登录</a>";
}

return "<a href='/sign-out'>登出</a>";
});

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

现在,你可以测试你的应用程序:

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

添加 Google 连接器

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

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

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

Connector tab

备注:

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

设置 Google OAuth 应用

在 Google API Console 中设置项目

  • 访问 Google API Console 并使用你的 Google 账户登录。
  • 点击顶部菜单栏的 选择项目 按钮,然后点击 新建项目 按钮创建一个项目。
  • 在你新创建的项目中,点击 API 和服务 进入 API 和服务 菜单。

配置并注册你的应用程序

  • 在左侧 API 和服务 菜单中,点击 OAuth 用户授权页面 按钮。
  • 选择你想要的 用户类型,然后点击 创建 按钮。(注意:如果你选择 外部 作为你的 用户类型,你将需要稍后添加测试用户。)

现在你将进入 编辑应用注册 页面。

编辑应用注册

  • 按照说明填写 OAuth 用户授权页面 表单。
  • 点击 保存并继续 以继续。

配置权限

  • 点击 添加或移除权限 并在弹出抽屉中选择 ../auth/userinfo.email../auth/userinfo.profileopenid,然后点击 更新 完成。建议你考虑添加所有可能使用的权限,否则某些你在配置中添加的权限可能无法正常工作。
  • 根据需要填写表单。
  • 点击 保存并继续 以继续。

添加测试用户(仅限外部用户类型)

  • 点击 添加用户 并添加测试用户,以允许这些用户在测试时访问你的应用程序。
  • 点击 保存并继续 以继续。

现在你应该已经配置好了 Google OAuth 2.0 用户授权页面。

获取 OAuth 2.0 凭据

  • 在左侧 API 和服务 菜单中,点击 凭据 按钮。
  • 凭据 页面,点击顶部菜单栏的 + 创建凭据 按钮,并选择 OAuth 客户端 ID
  • 创建 OAuth 客户端 ID 页面,选择 Web 应用程序 作为应用程序类型。
  • 填写你的应用程序的基本信息。
  • 点击 + 添加 URI 以在 授权的 JavaScript 来源 部分添加一个授权域名。这是你的 Logto 授权页面将从中提供服务的域名。在我们的例子中,这将是 ${your_logto_origin}。例如 https://logto.dev
  • 点击 + 添加 URI 在 **授权重定向 URI** 部分设置 **授权重定向 URI**,它将在用户登录后将其重定向到应用程序。在我们的例子中,这将是 ${your_logto_endpoint}/callback/${connector_id}。例如 https://logto.dev/callback/${connector_id}connector_id 可以在 Logto 管理控制台连接器详情页面的顶部栏找到。
  • 点击 创建 完成,然后你将获得 客户端 ID客户端密钥

配置你的连接器

使用你在前一节中从 OAuth 应用详情页面获得的 客户端 ID客户端密钥 填写 clientIdclientSecret 字段。

scope 是一个以空格分隔的 权限 列表。如果未提供,权限默认为 openid profile email

prompts 是一个字符串数组,指定所需的用户交互类型。字符串可以是以下值之一:

  • none:授权服务器不显示任何认证或用户授权页面;如果用户尚未认证并且未预先配置请求权限的授权,它将返回错误。你可以使用 none 来检查现有的认证和/或授权。
  • consent:授权服务器在向客户端返回信息之前提示用户进行授权。
  • select_account:授权服务器提示用户选择一个用户账户。这允许拥有多个账户的用户在授权服务器上选择他们可能有当前会话的多个账户之一。

配置类型

名称类型
clientIdstring
clientSecretstring
scopestring
promptsstring[]

启用 Google One Tap

Google One Tap 是一种安全且简单的方法,让用户使用他们的 Google 账户登录到你的网站或应用程序。

一旦你设置好了 Google 连接器,你将在连接器详情页面看到一个 Google One Tap 卡片。你可以通过切换开关在注册和登录页面启用 Google One Tap。

启用 Google One Tap 后,你可以配置以下选项:

  • 如果可能,自动选择凭据:如果满足 某些条件,自动使用 Google 账户登录用户。
  • 如果用户点击/点击外部,取消提示:如果用户点击或点击提示外部,关闭 Google One Tap 提示。如果禁用,用户必须点击关闭按钮以关闭提示。
  • 在 ITP 浏览器上启用升级的 One Tap UX:在智能跟踪预防 (ITP) 浏览器上启用升级的 Google One Tap 用户体验。请参考 此页面 了解更多信息。
备注:

要在你的网站上启用 Google One Tap(超出 Logto 登录体验),此功能正在开发中。请关注更新。

保存你的配置

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

在登录体验中启用 Google 连接器

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

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

登录体验选项卡

测试和验证

返回到你的 PHP 应用。你现在应该可以使用 Google 登录了。享受吧!

拓展阅读

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

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

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

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