跳至主要內容

設定 X 社交登入

Logto 的官方 X(前稱 Twitter)社交登入連接器。

提示:

本指南假設你已對 Logto 連接器 (Connectors) 有基本了解。若不熟悉,請參閱 連接器 (Connectors) 指南以開始使用。

開始使用

X(Twitter)連接器讓終端使用者可以透過 X OAuth 2.0 驗證協議,使用他們自己的 X(Twitter)帳戶登入你的應用程式。

在 X 開發者入口網站創建應用程式

前往 X 開發者入口網站 並使用你的 X 帳戶登入。如果你沒有帳戶,可以註冊一個。

然後,創建一個應用程式。

步驟 1: 導航至應用程式創建區域。

登入後,前往「Projects & Apps」區域,然後點擊 「Create App」(或 「New App」,取決於介面)。

步驟 2: 填寫應用程式詳細資訊。

完成表單,填入以下資訊:

  • App Name: 為你的應用程式提供一個唯一且具描述性的名稱。
  • Application Description:(可選)添加應用程式功能的簡短描述。
  • Website URL: 輸入應用程式首頁的 URL。
  • Callback URL / Redirect URI: 在我們的情況下,這將是 ${your_logto_endpoint}/callback/${connector_id}。例如 https://foo.logto.app/callback/${connector_id}connector_id 可以在 Logto 管理控制台連接器詳細資訊頁面的頂部欄找到。

步驟 3: 選擇權限和權限範圍 (Scopes)。

選擇應用程式所需的權限。對於通過 X 的社交登入,請確保啟用必要的權限範圍 tweet.readusers.read

步驟 4: 儲存你的應用程式。

點擊 「Create」「Save」 來註冊你的應用程式。

創建後,導航至應用程式的 「Keys and tokens」 區域以獲取你的 OAuth 2.0 Client ID 和 Client Secret

配置你的連接器

在你的 Logto 連接器配置中,使用從應用程式的「Keys and tokens」頁面的「OAuth 2.0 Client ID 和 Client Secret」部分獲得的值填寫以下欄位:

  • clientId: 你的應用程式的 Client ID。
  • clientSecret: 你的應用程式的 Client Secret。

scope 是一個以空格分隔的 權限範圍 (Scopes) 列表。如果未提供,預設權限範圍是 tweet.read users.read

配置類型

名稱類型
clientIdstring
clientSecretstring
scopestring

測試 X(Twitter)連接器

就是這樣。X(Twitter)連接器現在應該可以使用了。別忘了 在登入體驗中啟用社交連接器

參考資料

X 開發者文件

X OAuth 2.0 授權碼流程與 PKCE