跳至主要內容

社交登入 (Social sign-in)

社交登入是一種廣泛使用的驗證 (Authentication) 方法,允許使用者利用現有的社群媒體帳號(如 Google、Facebook、Twitter、LinkedIn)進行登入與註冊。

社交登入的好處:

  • 簡化導入流程:社交登入讓使用者只需點擊一次即可註冊或登入,無需建立新帳號或記住另一組密碼,降低摩擦並提升使用者參與度。
  • 提升信任與安全性:藉由利用 Google 或 Facebook 等知名且受信任的平台,使用者對你的應用程式更有信心。
  • 豐富使用者資料:社交登入可讓你從社群平台獲取更多使用者資料,例如姓名、電子郵件地址、大頭貼等。

實作社交登入

  1. 設定你的社交連接器 (Social connectors)
    前往 Console > Connectors > Social connectors。點擊「新增社交連接器」按鈕,找到你想新增的社交連接器(如 Google 或 Github)。詳細步驟請參考 社交連接器

  2. 新增社交登入按鈕
    預設情況下,你新加的社交連接器不會顯示在終端使用者的登入頁面。若要在登入頁面新增社交登入按鈕,需在登入體驗設定中啟用該社交連接器。

    前往 Console > Sign-in experience > Sign-up and sign-in。點擊「新增社交連接器」按鈕,即可在註冊與登入頁面整合社交登入按鈕,並可拖曳調整其在 UI 上的順序。

  3. 設定帳號連結選項
    對於使用 社交身分 (Social identities) 註冊的新使用者,Logto 支援將其社交帳號與 Logto 系統中現有的電子郵件或手機號碼帳號連結。預設情況下,社交註冊過程會顯示相關的 帳號連結 頁面,讓使用者選擇將社交帳號連結至現有帳號或建立新帳號。

    若要簡化流程,可在登入體驗設定中啟用 自動帳號連結 (Automatic account linking) 選項。若電子郵件或手機號碼相符,系統會自動將社交帳號連結至現有帳號。

  4. 儲存變更
    仔細檢查你的設定並儲存,以套用配置。

社交登入的使用者體驗

透過社交登入,Logto 的註冊與登入流程對使用者來說更加流暢。

  1. 以社交登入:使用者在登入頁面點擊社交登入按鈕。
  2. 導向:使用者被導向至社交身分提供者的驗證頁面。
  3. 社交驗證:使用者輸入社交帳號憑證並通過驗證。若已登入社交提供者,可能自動驗證。若偵測到多個登入會話,使用者可能需選擇正確帳號(如多個 Google 帳號)。
    備註:

    Google 的「prompt」參數可在 Google 連接器中設定,讓你自訂 Google 登入時的帳號選擇與使用者授權頁面 (Consent screen) 體驗。

  4. 返回 Logto:驗證成功後,社交提供者將使用者導回 Logto 登入頁,並帶回驗證資料。
  5. 社交身分驗證:Logto 驗證社交資料與使用者身分。若無對應帳號,將自動建立新帳號。
  6. 使用者驗證:Logto 完成使用者驗證並導回用戶端應用程式,完成驗證流程。

帳號連結 (Account linking)

如上所述,Logto 允許使用者將社交帳號與 Logto 系統中現有的電子郵件或手機號碼帳號連結。這對於維持跨不同驗證 (Authentication) 方法與身分提供者 (IdP) 的統一使用者帳號至關重要。

  • 新帳號建立: 當使用者以 社交身分 (Social identity) 登入且該身分在 Logto 系統中不存在,且提供的電子郵件或手機號碼未與任何現有帳號相符時,Logto 會直接建立新帳號。

  • 現有帳號連結: 若社交身分提供的電子郵件或手機號碼已與 Logto 中現有帳號關聯,系統會提供彈性的帳號連結流程。

    • 自動帳號連結 (Automatic account linking):若在 登入體驗 設定中啟用「自動帳號連結」,Logto 會根據相符的電子郵件或手機號碼自動將社交帳號連結至現有帳號。使用者不會被提示連結帳號,並會直接登入現有帳號。社交帳號將被連結,未來可用任一方式登入。

    • 手動帳號連結 (Manual account linking):若未啟用「自動帳號連結」,使用者在登入過程中會被提示將社交帳號連結至現有帳號,或選擇建立新帳號。

      Social account linking
備註:

若在社交註冊過程中,找到與現有帳號相符的電子郵件或手機號碼,但使用者選擇不連結帳號,該電子郵件或手機號碼將不會同步至 Logto 的新帳號。這確保所有使用者帳號的電子郵件與手機號碼皆唯一。

若電子郵件或手機號碼為必填註冊識別項,使用者將被要求於註冊過程中提供其他電子郵件或手機號碼。詳見 收集額外使用者資料

收集額外使用者資料

在社交註冊過程中,根據你設定的必填註冊識別項(電子郵件地址手機號碼使用者名稱),使用者可能需於通過社交驗證後,補充額外驗證資訊以完成註冊或登入流程。

例如,若設定 電子郵件地址使用者名稱 為必填註冊識別項:

  1. 以提供驗證過的電子郵件的社交身分註冊

    若社交身分提供驗證過的電子郵件,該電子郵件將同步至使用者資料,並提示使用者輸入使用者名稱以完成註冊。

  2. 以未提供驗證過電子郵件的社交身分註冊

    若社交身分未提供驗證過的電子郵件,註冊過程會提示使用者輸入電子郵件,並需輸入驗證碼完成驗證。

  3. 以提供已註冊電子郵件的社交身分註冊

    若社交身分提供的電子郵件已在 Logto 系統註冊,系統會提示使用者連結社交帳號至現有帳號或建立新帳號。若選擇建立新帳號,需輸入新電子郵件並驗證。

Google One-tap

Logto 也支援 Google One-tap 登入方式,讓使用者只需點擊一次即可登入 Google。此功能進一步簡化登入流程,無需將使用者導向 Google 驗證頁面。

啟用 Google One-tap,請依 Google 連接器 設定說明操作。啟用後,使用者進入登入頁時會看到「以 Google 登入」彈窗,點擊即可自動以 Google 帳號驗證並導回應用程式。

在登入體驗中啟用 Google One Tab

首次社交登入後,使用者可在帳號設定中管理已連結的社交帳號。這讓使用者能將更多社交帳號連結至現有資料,或移除不再使用的社交連結。

使用者可透過自助帳號中心進行:

  • 連結新社交帳號:將更多社交提供者連結至同一使用者資料
  • 解除現有社交帳號連結:移除社交連結,同時保留其他登入方式
  • 檢視已連結帳號:查看目前所有已連結的社交身分

更多帳號管理功能,請參閱 帳號設定 文件。

儲存權杖並呼叫第三方 API

你可選擇為支援的社交連接器啟用第三方權杖儲存,讓使用者驗證並授權後,提供者發出的存取權杖 (Access token) 與重新整理權杖 (Refresh token) 會安全儲存在 Logto 的秘密保管庫。你的應用程式(透過 Account API)可後續擷取並用於呼叫提供者 API(例如讓你的應用程式幫使用者新增 Google 行事曆事件),無需再次社交驗證。詳見 第三方權杖儲存 設定說明。

常見問題

如何在我的網站新增社交登入按鈕並直接以社交登入?

Logto 允許你在網站上新增社交登入按鈕,並可直接啟動社交登入流程而不顯示預設登入表單。詳見 直接登入 (Direct sign-in) 指南。

為什麼我用社交註冊後,電子郵件或手機號碼沒有同步?

在 Logto 中,電子郵件與手機號碼可作為登入識別項以唯一識別使用者。僅接受已驗證的電子郵件與手機號碼作為識別項。若社交身分未提供 email_verifiedphone_number_verified 宣告 (Claim),該電子郵件或手機號碼將不會同步至使用者資料,但你仍可在使用者資料的社交身分資料中找到。

支援未驗證電子郵件或手機號碼作為使用者資料的功能即將推出。

社交登入體驗

6 個設定提升 Google 登入轉換率