安全地在你的網站嵌入登入或註冊表單

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

OpenID Connect 基金會: 在 OpenID Connect (OIDC) 中，瀏覽器重定向到身份提供者（IdP）是身份驗證過程中的關鍵部分。這是因為依賴方（RP）將用戶身份驗證委託給 IdP。當用戶向 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 的 authentication parameters 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 Docs 的直接登入部分中了解更多。

第一屏幕#

除了略過跳轉到第三方身份提供者（例如，Google 或 Facebook 登入），其他認證方法必須重定向到 Logto 的登入畫面以繼續。本質上，所有認證流程都需要重定向 — 要么到第三方 IdP，要么到 Logto 作為你的第一方 IdP。

這個 first_screen 參數允許你在用戶開始身份驗證過程時自定義他們看到的第一屏幕。此參數的值可以是：

• sign_in: 允許用戶直接訪問登入頁面。
• register: 允許用戶直接訪問註冊頁面。
• single_sign_on: 允許用戶直接訪問單一登入 (SSO) 頁面。
• identifier:sign_in: 允許用戶直接訪問只顯示特定識別符登入方法的頁面。
• identifier:register: 允許用戶直接訪問只顯示特定識別符註冊方法的頁面。
• reset_password: 允許用戶直接訪問密碼重置頁面。

在 Logto Docs 的第一屏幕部分中了解更多。

登入提示#

如前所述，你不能直接在你網站上收集用戶的密碼或電子郵件/SMS 驗證碼。這些必須由 IdP 處理和驗證。

但是，你可以收集用戶的電子郵件地址或電話號碼作為識別符，並在重定向到相應的第一屏幕（例如，register 或 identifier:register）時傳送它們。為此，使用 login_hint 參數將識別符從你的網站傳送到 Logto 的登入畫面。網址可能會看起來像這樣：https://auth.example.com/identifier:[email protected]。

欲了解更多詳情，請參考 OIDC 規範的身份驗證請求。

結論#

通過利用 Logto 的 direct_sign_in、first_screen 和 login_hint 參數，你可以輕鬆地在網站上嵌入註冊和登入表單，確保安全、友好的用戶體驗，同時最大化用戶轉化。