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访问）：

<code class="language-json">{
  "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/"
}</code>

此文件描述了我们在 Bluesky 身份验证服务器上的应用程序。

核心身份验证要求

要对用户进行身份验证，我们至少需要他们的 Bluesky 句柄。 该句柄是 Bluesky 个人资料 URL 中 https://bsky.app/profile/.

之后的部分

检索用户数据

1. 检索 DID：给定用户的句柄，我们可以使用 API 调用（例如 https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=<handle>）获取他们的去中心化标识符 (DID)。

2. 检索 DID 文档： 使用 DID，我们从 PLC API (https://plc.directory/<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中文网其他相关文章！