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

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

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

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

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

嵌入式登录与重定向登录是否冲突？— 完全没有。它们在身份验证流中相辅相成。

嵌入式登录的用例#

以下是几个例子说明如何安全实施嵌入式登录：

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

许多网站在主页上显眼地显示一个简单的电子邮件输入和注册按钮（例如，“注册”，“开始使用”或“免费试用”）。在提交他们的电子邮件后，用户将被重定向到一个新页面继续注册过程。

例子：

• Stripe: “立即使用电子邮件地址开始”

• Coinbase: “用电子邮件注册”

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

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

例子：

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

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

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

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

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

直接登录#

在你的网站上显示社交登录按钮（例如，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，要么到 Logto 作为你的一方 IdP。

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

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

在 Logto 文档的第一个屏幕部分了解更多信息。

登录提示#

如前所述，你不能在自己的网站上直接收集用户的密码或电子邮件/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 参数，你可以轻松地在你的网站上嵌入注册和登录表单，确保安全友好的用户体验，同时最大化用户转化。