為 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 雲用戶使用。

總結#

為 Logto 創建一個自定義社交連接器並沒有你想像中那麼難。在 Logto 連接器套件和良好的代碼示例的幫助下，你可以輕鬆地在幾個步驟內創建一個連接器。

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