社交登入 (Social sign-in)
社交登入是一種廣泛使用的驗證 (Authentication) 方法,允許使用者利用現有的社群媒體帳號(如 Google、Facebook、Twitter、LinkedIn)進行登入與註冊。
社交登入的好處:
- 簡化導入流程:社交登入讓使用者只需點擊一次即可註冊或登入,無需建立新帳號或記住另一組密碼,降低摩擦並提升使用者參與度。
- 提升信任與安全性:藉由利用 Google 或 Facebook 等知名且受信任的平台,使用者對你的應用程式更有信心。
- 豐富使用者資料:社交登入可讓你從社群平台獲取更多使用者資料,例如姓名、電子郵件地址、大頭貼等。
實作社交登入
-
設定你的社交連接器 (Social connectors):
前往 Console > Connectors > Social connectors。點擊「新增社交連接器」按鈕,找到你想新增的社交連接器(如 Google 或 Github)。詳細步驟請參考 社交連接器。 -
新增社交登入按鈕:
預設情況下,你新加的社交連接器不會顯示在終端使用者的登入頁面。若要在登入頁面新增社交登入按鈕,需在登入體驗設定中啟用該社交連接器。前往 Console > Sign-in experience > Sign-up and sign-in。點擊「新增社交連接器」按鈕,即可在註冊與登入頁面整合社交登入按鈕,並可拖曳調整其在 UI 上的順序。
-
設定帳號連結選項:
對於使用 社交身分 (Social identities) 註冊的新使用者,Logto 支援將其社交帳號與 Logto 系統中現有的電子郵件或手機號碼帳號連結。預設情況下,社交註冊過程會顯示相關的 帳號連結 頁面,讓使用者選擇將社交帳號連結至現有帳號或建立新帳號。若要簡化流程,可在登入體驗設定中啟用 自動帳號連結 (Automatic account linking) 選項。若電子郵件或手機號碼相符,系統會自動將社交帳號連結至現有帳號。
-
儲存變更:
仔細檢查你的設定並儲存,以套用配置。
社交登入的使用者體驗
透過社交登入,Logto 的註冊與登入流程對使用者來說更加流暢。
- 以社交登入:使用者在登入頁面點擊社交登入按鈕。
- 導向:使用者被導向至社交身分提供者的驗證頁面。
- 社交驗證:使用者輸入社交帳號憑證並通過驗證。若已登入社交提供者,可能自動驗證。若偵測到多個登入會話,使用者可能需選擇正確帳號(如多個 Google 帳號)。
備註:
Google 的「prompt」參數可在 Google 連接器中設定,讓你自訂 Google 登入時的帳號選擇與使用者授權頁面 (Consent screen) 體驗。
- 返回 Logto:驗證成功後,社交提供者將使用者導回 Logto 登入頁,並帶回驗證資料。
- 社交身分驗證:Logto 驗證社交資料與使用者身分。若無對應帳號,將自動建立新帳號。
- 使用者驗證:Logto 完成使用者驗證並導回用戶端應用程式,完成驗證流程。
帳號連結 (Account linking)
如上所述,Logto 允許使用者將社交帳號與 Logto 系統中現有的電子郵件或手機號碼帳號連結。這對於維持跨不同驗證 (Authentication) 方法與身分提供者 (IdP) 的統一使用者帳號至關重要。
-
新帳號建立: 當使用者以 社交身分 (Social identity) 登入且該身分在 Logto 系統中不存在,且提供的電子郵件或手機號碼未與任何現有帳號相符時,Logto 會直接建立新帳號。
-
現有帳號連結: 若社交身分提供的電子郵件或手機號碼已與 Logto 中現有帳號關聯,系統會提供彈性的帳號連結流程。
-
自動帳號連結 (Automatic account linking):若在 登入體驗 設定中啟用「自動帳號連結」,Logto 會根據相符的電子郵件或手機號碼自動將社交帳號連結至現有帳號。使用者不會被提示連結帳號,並會直接登入現有帳號。社交帳號將被連結,未來可用任一方式登入。
-
手動帳號連結 (Manual account linking):若未啟用「自動帳號連結」,使用者在登入過程中會被提示將社交帳號連結至現有帳號,或選擇建立新帳號。
-
若在社交註冊過程中,找到與現有帳號相符的電子郵件或手機號碼,但使用者選擇不連結帳號,該電子郵件或手機號碼將不會同步至 Logto 的新帳號。這確保所有使用者帳號的電子郵件與手機號碼皆唯一。
若電子郵件或手機號碼為必填註冊識別項,使用者將被要求於註冊過程中提供其他電子郵件或手機號碼。詳見 收集額外使用者資料。
收集額外使用者資料
在社交註冊過程中,根據你設定的必填註冊識別項(電子郵件地址、手機號碼、使用者名稱),使用者可能需於通過社交驗證後,補充額外驗證資訊以完成註冊或登入流程。
例如,若設定 電子郵件地址 與 使用者名稱 為必填註冊識別項:
-
以提供驗證過的電子郵件的社交身分註冊
若社交身分提供驗證過的電子郵件,該電子郵件將同步至使用者資料,並提示使用者輸入使用者名稱以完成註冊。
-
以未提供驗證過電子郵件的社交身分註冊
若社交身分未提供驗證過的電子郵件,註冊過程會提示使用者輸入電子郵件,並需輸入驗證碼完成驗證。
-
以提供已註冊電子郵件的社交身分註冊
若社交身分提供的電子郵件已在 Logto 系統註冊,系統會提示使用者連結社交帳號至現有帳號或建立新帳號。若選擇建立新帳號,需輸入新電子郵件並驗證。
Google One-tap
Logto 也支援 Google One-tap 登入方式,讓使用者只需點擊一次即可登入 Google。此功能進一步簡化登入流程,無需將使用者導向 Google 驗證頁面。
啟用 Google One-tap,請依 Google 連接器 設定說明操作。啟用後,使用者進入登入頁時會看到「以 Google 登入」彈窗,點擊即可自動以 Google 帳號驗證並導回應用程式。
連結或解除連結社交帳號
首次社交登入後,使用者可在帳號設定中管理已連結的社交帳號。這讓使用者能將更多社交帳號連結至現有資料,或移除不再使用的社交連結。
使用者可透過自助帳號中心進行:
- 連結新社交帳號:將更多社交提供者連結至同一使用者資料
- 解除現有社交帳號連結:移除社交連結,同時保留其他登入方式
- 檢視已連結帳號:查看目前所有已連結的社交身分
更多帳號管理功能,請參閱 帳號設定 文件。
儲存權杖並呼叫第三方 API
你可選擇為支援的社交連接器啟用第三方權杖儲存,讓使用者驗證並授權後,提供者發出的存取權杖 (Access token) 與重新整理權杖 (Refresh token) 會安全儲存在 Logto 的秘密保管庫。你的應用程式(透過 Account API)可後續擷取並用於呼叫提供者 API(例如讓你的應用程式幫使用者新增 Google 行事曆事件),無需再次社交驗證。詳見 第三方權杖儲存 設定說明。
常見問題
如何在我的網站新增社交登入按鈕並直接以社交登入?
Logto 允許你在網站上新增社交登入按鈕,並可直接啟動社交登入流程而不顯示預設登入表單。詳見 直接登入 (Direct sign-in) 指南。
為什麼我用社交註冊後,電子郵件或手機號碼沒有同步?
在 Logto 中,電子郵件與手機號碼可作為登入識別項以唯一識別使用者。僅接受已驗證的電子郵件與手機號碼作為識別項。若社交身分未提供 email_verified 或 phone_number_verified 宣告 (Claim),該電子郵件或手機號碼將不會同步至使用者資料,但你仍可在使用者資料的社交身分資料中找到。
支援未驗證電子郵件或手機號碼作為使用者資料的功能即將推出。
相關資源
社交登入體驗6 個設定提升 Google 登入轉換率