社交登入 (Social sign-in)
社交登入是一種廣泛使用的驗證 (Authentication) 方法,允許使用者利用現有的社群媒體帳號(如 Google、Facebook、Twitter、LinkedIn)進行登入與註冊。
社交登入的優點:
- 簡化註冊流程:社交登入讓使用者只需一鍵即可註冊或登入,無需建立新帳號或記住另一組密碼,降低摩擦並提升使用者參與度。
- 提升信任與安全性:透過 Google 或 Facebook 等知名且受信任的平台,讓使用者對你的應用程式更有信心。
- 豐富使用者資料:社交登入可讓你從社群平台獲取更多個人資料,如姓名、電子郵件地址、大頭貼等。
實作社交登入
-
設定你的社交連接器 (Social connectors):
前往 主控台 > 連接器 > 社交連接器。點擊「新增社交連接器」按鈕,找到你想新增的社交連接器(如 Google 或 Github)。詳細步驟請參考 社交連接器。 -
新增社交登入按鈕:
預設情況下,你新加入的社交連接器不會顯示在終端使用者的登入頁面。若要在登入頁面新增社交登入按鈕,需在登入體驗設定中啟用該社交連接器。前往 主控台 > 登入與帳號 > 註冊與登入。點擊「新增社交連接器」按鈕,即可將社交登入按鈕整合到註冊與登入頁面。可拖曳調整按鈕在 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 既有帳號綁定,則會啟動彈性的帳號連結流程。
-
自動帳號連結:若在 登入體驗 設定中啟用「自動帳號連結」,Logto 會根據電子郵件或手機號碼自動將社交帳號連結到既有帳號。使用者不會被提示連結帳號,並會直接登入既有帳號。社交帳號將被連結,未來可用任一方式登入。
-
手動帳號連結:若未啟用「自動帳號連結」,使用者在登入流程中會被提示是否將社交帳號連結到既有帳號,或選擇建立新帳號。
-
若在社交註冊流程中,電子郵件或手機號碼與既有帳號相符但使用者選擇不連結,該電子郵件或手機號碼將不會同步到 Logto 新帳號,確保所有帳號的電子郵件與手機號碼唯一。
若電子郵件或手機號碼為必填註冊識別項,系統會要求使用者於註冊流程中提供其他電子郵件或手機號碼。詳見 收集額外使用者資料。
收集額外使用者資料
收集註冊識別項
在社交註冊流程中,根據你設定的必填註冊識別項(電子郵件地址、手機號碼、使用者名稱),使用者可能需在通過社交驗證後,補充額外驗證資訊以完成註冊或登入流程。
例如,若設定 電子郵件地址 與 使用者名稱 為必填註冊識別項:
-
社交身分提供已驗證電子郵件地址註冊
若社交身分提供已驗證的電子郵件地址,該地址會同步到使用者資料,並提示使用者輸入使用者名稱以完成註冊。
-
社交身分未提供已驗證電子郵件地址註冊
若社交身分未提供已驗證電子郵件地址,註冊流程會提示使用者輸入電子郵件,並需輸入驗證碼完成驗證。
-
社交身分提供已註冊電子郵件地址註冊
若社交身分提供的電子郵件已在 Logto 系統註冊,系統會提示使用者連結社交帳號或建立新帳號。若選擇建立新帳號,需輸入新電子郵件並驗證。
收集其他使用者資料
除了必填註冊識別項外,你也可在社交註冊流程中收集其他個人資料,如姓名、生日或自訂欄位。
選項一:收集使用者資料
直接在註冊流程中加入 Logto 預設的「告訴我們你的資訊」步驟。使用者需填寫所有必填欄位才能完成註冊。此方式無需寫程式,快速整合。
透過 主控台 > 登入與帳號 > 收集使用者資料 設定,可選擇預設欄位或自訂欄位並彈性驗證。詳見:收集使用者資料
收集註冊識別項(電子郵件、手機、使用者名稱)與收集其他個人資料在社交登入時有所不同:
- 註冊識別項:新舊使用者皆需填寫,因為這些資訊對身分識別與通知至關重要。
- 其他個人資料(如姓名、生日):僅於新使用者註冊時收集,非識別必要資訊,可日後透過 Account API 補充。
選項二:自建導引流程
在註冊成功後導向你自訂的導引流程,彈性收集各種資料。此方式讓你完全掌控使用者體驗,並可設計複雜的多步驟導引。
可透過 Account API 程式化管理使用者資料。
Google One-tap
Logto 亦支援 Google 連接器的 Google One-tap 登入方式,讓使用者一鍵登入。此功能進一步簡化登入流程,無需重導向至 Google 驗證頁面。
啟用 Google One-tap,請依 Google 連接器 設定說明操作。啟用後,使用者進入登入頁時會看到「以 Google 登入」彈窗,點擊即可自動驗證並導回應用程式。
連結或解除連結社交帳號
首次社交登入後,使用者可在帳號設定中管理已連結的社交帳號。這讓使用者可將更多社交帳號連結到現有個人資料,或移除不再使用的社交連結。
使用者可透過自助帳號中心進行:
- 連結新社交帳號:將更多社交提供者連結到同一個人資料
- 解除既有社交帳號:移除社交連結,仍可用其他方式登入
- 檢視已連結帳號:查看所有已連結的社交身分
詳見 帳號設定 文件,了解如何實作帳號管理功能。
儲存權杖並呼叫第三方 API
你可選擇為支援的社交連接器啟用第三方權杖儲存,當使用者驗證並授權後,提供者發出的存取權杖 (Access token) 與重新整理權杖 (Refresh token) 會安全儲存在 Logto 的秘密保管庫。你的應用程式(透過 Account API)可後續擷取並用於呼叫提供者 API(例如讓你的應用程式幫使用者新增 Google 行事曆事件),無需再次社交驗證。詳見 第三方權杖儲存 設定說明。
常見問題
為什麼用社交註冊後電子郵件或手機號碼沒有同步?
在 Logto 中,電子郵件與手機號碼可作為登入識別項,用於唯一識別使用者。僅接受已驗證的電子郵件與手機號碼作為識別項。若社交身分未提供 email_verified 或 phone_number_verified 宣告 (Claim),該電子郵件或手機號碼不會同步到使用者資料,但你仍可在使用者資料的社交身分欄位找到這些資訊。
支援未驗證電子郵件或手機號碼作為使用者資料的功能即將推出。
相關資源
社交登入體驗6 個設定提升 Google 登入轉換率