Bluesky OAuthlient，使用 Vanilla JavaScript

這篇文章詳細介紹了僅使用 Vanilla JavaScript 將 Bluesky Authentication (OAuth DPoP) 整合到無伺服器客戶端應用程式中。 由於令牌過期，這是一個概念圖，而不是一個功能齊全的範例。

簡介

我們將探索如何在 JavaScript 應用程式中實作 Bluesky 身份驗證，而不依賴外部框架。

免責聲明

這是一個示範該過程的教學。 由於身份驗證令牌的短暫性，它不能作為獨立、永久工作的範例。 請報告任何錯誤。

OAuth 驗證

對於需要用戶身份驗證的無伺服器應用程序，我們可以利用 Bluesky 等第三方權威機構。 這使用 OAuth 2.0 協定。 有關 Bluesky OAuth 實現的更多詳細信息，請參閱 OAuth - AT 協議文件。

客戶端元資料

要使用 Bluesky 驗證，我們的應用程式需要被 Bluesky 的身份驗證伺服器識別。這是透過包含應用程式資訊的客戶端元資料檔案（例如 client-metadata.json）來實現的。 這允許自動客戶端註冊，無需手動伺服器註冊。 元資料檔案必須可透過 HTTPS 存取。

範例元資料檔（可在https://www.php.cn/link/db817217c5d9b196aa39cfeb0ce889e4存取）：

{
  "client_id":"https://www.php.cn/link/db817217c5d9b196aa39cfeb0ce889e4",
  "application_type":"web",
  "grant_types":[
    "authorization_code",
    "refresh_token"
  ],
  "scope":"atproto transition:generic transition:chat.bsky",
  "response_types":[
    "code id_token",
    "code"
  ],
  "redirect_uris":[
    "https://madrilenyer.neocities.org/bsky/oauth/callback/"
  ],
  "dpop_bound_access_tokens":true,
  "token_endpoint_auth_method":"none",
  "client_name":"Madrilenyer Example Browser App",
  "client_uri":"https://madrilenyer.neocities.org/bsky/"
}

此檔案描述了我們在 Bluesky 驗證伺服器上的應用程式。

核心驗證要求

要對使用者進行身份驗證，我們至少需要他們的 Bluesky 句柄。 該句柄是 Bluesky 個人資料 URL 中 https://bsky.app/profile/.

之後的部分

檢索使用者資料

1. 檢索 DID：給定使用者的句柄，我們可以使用 API 呼叫（例如 https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=<handle></handle>）來取得他們的去中心化識別碼 (DID)。

2. 檢索 DID 文件： 使用 DID，我們從 PLC API (https://plc.directory/<did></did>) 檢索 DID 文件。 此文件包含使用者的 PDS（個人資料伺服器）URL。

3. 檢索 PDS 元資料： PDS URL（DID 文件中的 serviceEndpoint）用於從 /.well-known/oauth-protected-resource 取得 PDS 元資料。此元資料提供授權伺服器 URL。

4. 授權伺服器發現： 授權伺服器 URL 用於從​​ /.well-known/oauth-authorization-server 檢索其元資料。 此元資料包含關鍵端點，例如授權端點、令牌端點和推送授權請求 (PAR) 端點。

後續步驟涉及使用發現的端點和 PKCE（代碼交換證明金鑰）獲取使用者的存取權杖、涉及 PAR 請求的過程、用於增強安全性的 DPoP（演示所有權證明）以及處理重定向。 雖然為簡潔起見而省略了這些步驟的詳細 Javascript 程式碼，但它們將涉及進行多個 API 呼叫並處理回應。 官方 Bluesky TypeScript 用戶端是生產應用程式的更強大且推薦的替代方案。

以上是Bluesky OAuthlient，使用 Vanilla JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！