简体中文

嵌入式登录
直接登录
首屏
登录体验
认证参数

在你的网站上安全嵌入登录或注册表单

使用 Logto 认证参数，在你的网站上直接嵌入注册或登录表单或按钮。适当地将认证集成到你的产品上下文中，同时保持强大的安全标准，从而提高注册转化率。

Ran

Product & Design

10/8/2024

不要在用户认证上浪费数周时间

使用 Logto 更快地发布安全应用。几分钟内集成用户认证，专注于您的核心产品。

立即开始

重定向 vs. 非重定向 vs. 嵌入式登录

OpenID Connect 基金会: 在 OpenID Connect (OIDC) 中，浏览器重定向到身份提供者 (IdP) 是认证过程中的一个关键部分。这是因为服务提供者 (RP) 将用户认证外包给了 IdP。一旦用户向 IdP 提供凭证，它会通过浏览器将令牌（如 ID 和访问令牌）返回给 RP。这个重定向机制确保了敏感用户凭证仅由 IdP 处理，而不是 RP。

根据 OIDC 的标准，用户必须被重定向到身份提供者 (IdP) 以安全地完成认证。这确保了敏感凭证由 IdP 处理，而不是应用程序 (RP)。非重定向登录可能会暴露用户凭证，使其容易受到如凭证盗窃、网络钓鱼或会话劫持等攻击。

当使用基于 OIDC 的 Logto 时，用户被重定向到一个安全的、经过验证的 Logto 域以完成登录过程。然而，许多客户希望在他们的网站上直接嵌入登录或注册小部件，称为“嵌入式登录”。这是一种通过将电子邮件注册表单或社交登录按钮融合到网站上下文中来增强用户转化的常见做法。

嵌入式登录和重定向登录是否冲突？ — 完全不冲突。它们在认证流程中相辅相成。

嵌入式登录的使用案例

以下是一些例子来说明如何安全地实施嵌入式登录：

例 1：在主页上嵌入电子邮件注册字段

许多网站在主页上显著显示一个简单的电子邮件输入和注册按钮 (如“注册”，“立即开始”或“免费试用”)。提交电子邮件后，用户被重定向到一个新页面以继续注册过程。

例子：

Stripe: “用电子邮件地址现在开始”

Stripe 嵌入式登录.png

Coinbase: “用电子邮件注册”

Coinbase 嵌入式登录.png

例 2：在内容旁边嵌入所有注册选项

对于博客或内容网站，匿名用户可以浏览一些内容，但被鼓励登录以获得完全访问权限。注册表单通常出现在内容旁边或下方。

例子：

Medium: 在用户想阅读完整文章时显示注册提示。

Medium 嵌入式登录.png

X (Twitter): 提示用户注册以访问个性化时间线和功能。

Twitter 嵌入式登录.png

在这些例子中，只有初始注册选项（电子邮件输入或社交登录按钮）是嵌入的。然后用户被重定向到 IdP 进行安全认证。由于 Medium 和 X 都作为自己的 IdP，通过模式而不是重定向来处理认证，在这两种情况下提供了类似的用户体验。

如何在你的网站上嵌入注册选项？

使用 Logto 的认证参数direct_sign_in、first_screen和login_hint来实施嵌入式注册或登录。以下是两个最佳实践：

嵌入式登录的认证参数.png

直接登录

在你的网站上显示社交登录按钮（如 Google、Facebook、Apple）或企业登录按钮（如 Google Workspace、Azure AD、Okta），并将用户直接重定向到相关的提供者。支持的格式包括：

当前支持的格式是：

social:<idp-name>（使用指定 IdP 名称的社交连接器，例如 social:google）
sso:<connector-id>（使用指定的企业 SSO 连接器，例如 sso:123456）

在 Logto 文档的直接登录部分中了解更多信息。

首屏

除了跳过到第三方身份提供者（例如 Google 或 Facebook 登录），其他认证方法必须重定向到 Logto 的登录屏幕才能继续。基本上，所有认证流程都需要重定向——要么到第三方 IdP，要么作为第一方 IdP 重定向到 Logto。

这个 first_screen 参数允许你自定义用户在开始认证过程时看到的第一个屏幕。此参数的值可以是：

sign_in: 允许用户直接访问登录页面。
register: 允许用户直接访问注册页面。
single_sign_on: 允许用户直接访问单点登录 (SSO) 页面。
identifier:sign_in: 允许用户直接访问仅显示特定标识符的登录方法的页面。
identifier:register: 允许用户直接访问仅显示特定标识符的注册方法的页面。
reset_password: 允许用户直接访问密码重置页面。

在 Logto 文档的首屏部分中了解更多信息。

Logto 登录首屏.png

登录提示

如前所述，你不能在你的网站上直接收集用户的密码或电子邮件/SMS 验证码。这些必须由 IdP 处理和验证。

但是，你可以收集用户的电子邮件地址或电话号码作为标识符，并在重定向到适当的首屏（例如 register 或 identifier:register）时传递它们。要实现这一点，请使用 login_hint 参数将标识符从你的网站发送到 Logto 的登录屏幕。URL 可能如下所示：https://auth.example.com/identifier:[email protected]。

有关更多详细信息，请参阅 OIDC 规范的认证请求。

结论

通过利用 Logto 的 direct_sign_in、first_screen 和 login_hint 参数，你可以轻松地在你的网站上嵌入注册和登录表单，确保安全、友好的用户体验，同时最大化用户转化率。

免费试用 Logto 云

重定向 vs. 非重定向 vs. 嵌入式登录#

嵌入式登录的使用案例#

例 1：在主页上嵌入电子邮件注册字段#

例 2：在内容旁边嵌入所有注册选项#

如何在你的网站上嵌入注册选项？#

直接登录#

首屏#

登录提示#

结论#

重定向 vs. 非重定向 vs. 嵌入式登录#

嵌入式登录的使用案例#

例 1：在主页上嵌入电子邮件注册字段#

例 2：在内容旁边嵌入所有注册选项#

如何在你的网站上嵌入注册选项？#

直接登录#

首屏#

登录提示#

结论#

重定向 vs. 非重定向 vs. 嵌入式登录

嵌入式登录的使用案例

例 1：在主页上嵌入电子邮件注册字段

例 2：在内容旁边嵌入所有注册选项

如何在你的网站上嵌入注册选项？

直接登录

首屏

登录提示

结论

重定向 vs. 非重定向 vs. 嵌入式登录

嵌入式登录的使用案例

例 1：在主页上嵌入电子邮件注册字段

例 2：在内容旁边嵌入所有注册选项

如何在你的网站上嵌入注册选项？

直接登录

首屏

登录提示

结论