為 Logto 打造一個社交連接器

背景#

社交登入對現代應用來說是必需的。它簡化了用戶註冊流程，提升用戶體驗，並增加用戶參與度和轉換率。 在 Logto，我們使用社交連接器來與第三方社交身份提供者進行登入。

什麼是 "連接器"？#

連接器是一個將 Logto 與第三方服務連接的小程序。它負責處理登入流程、交換令牌，並從第三方服務獲取用戶信息。

Logto 提供了一套豐富的官方連接器，旨在簡化各種社交平台的整合。 截至今天，總共有超過 30 個連接器，其中有超過 10 個是由我們的開源社群貢獻的。我們期望這個數字在未來能快速增長。

然而，我們理解仍有許多其它平台目前尚未有 Logto 的官方支援。 所幸，作為一個開源平台，你可以輕易地創建自定義連接器。 所以在這篇文章中，我們將指引你如何在幾個步驟內為 Logto 創建一個自定義的社交連接器。

登入流程#

在開始之前，讓我們瞭解一下在 Logto 中社交登入流程是如何運作的。

現在讓我們開始吧#

最快的開始方式是複製一個現有的官方連接器代碼並修改以符合你的需求。我們以 GitHub 連接器為例。

步驟 1：克隆現有的連接器包#

在連接器源文件夾中，你會找到以下文件：

• index.ts：連接器的主入口文件。
• constant.ts：連接器中使用的常量。
• types.ts：連接器中使用的 TypeScript 類型。
• index.test.ts：連接器的測試案例。
• mock.ts：連接器測試案例中使用的模擬數據。

除了這些文件，你還需要提供一個 README.md 文件來描述連接器，一個 logo.svg（可選擇提供 logo-dark.svg 以提升深色模式用戶體驗），以及一個 package.json 文件來定義 npm 包信息。

步驟 2：修改主入口文件（index.ts）#

在 index.ts 文件中，你會找到大多數的連接器邏輯。通常需要實作 4 個函數：

• getAuthorizationUri：生成第三方社交平台的授權 URI。對於 GitHub，它將是：https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}。參考所屬社交平台的開發者文檔以獲取正確的 URI。
• authorizationCallbackHandler：保護授權回呼 URI 中返回的參數值，提取授權 code 並處理潛在的錯誤。
• getAccessToken：使用授權 code 交換訪問令牌。
• getUserInfo：使用訪問令牌從第三方社交平台獲取用戶信息。

其他大部分通用邏輯已在 Logto 連接器工具包中處理，使你的工作更輕鬆。

最後，在文件末尾，你只需導出連接器對象，遵循與 GitHub 連接器相同的代碼結構。

步驟 3：測試連接器#

單元測試#

首先，寫一些單元測試案例，確保基本功能按預期工作。

本地測試#

• 在你的本地環境中設置 Logto：Logto 提供多種方式在本地運行，你可以使用 CLI 或 docker，甚至從源代碼構建。查看文檔了解更多細節。

• 將你的自定義連接器鏈接到 Logto 實例：使用 CLI 創建你的連接器到 Logto 實例的符號鏈接。更多細節。

• 連接後，你應該能在 <logto-root-path>/packages/core/connectors 文件夾中看到它。

• 重啟你的 Logto 實例，進入 Logto 管理主控台，你應該能在社交連接器列表中看到它。

• 在 "登入體驗" -> "註冊和登入" -> "社交登入" 中配置你的連接器。並嘗試在我們的演示應用中使用 "即時預覽" 功能。

  

步驟 4（可選）：發布連接器#

你可以將你的連接器發布到 NPM，並分享給社群。或者甚至提交一個 PR，並貢獻到 Logto 官方 GitHub 倉庫，讓它成為官方支援的連接器。官方連接器將由 Logto 開發團隊維護，並提供給開源和 Logto Cloud 用戶。

總結#

為 Logto 創建自定義的社交連接器並不像你想像的那麼難。在 Logto 連接器工具包的幫助下，及良好的代碼範例，你可以在幾個步驟內輕鬆創建一個連接器。

通過貢獻你的連接器，你可以幫助更多用戶享受你帶入 Logto 家族的社交平台。