Bluesky OAuthlient、バニラ JavaScript を使用

この投稿では、Vanilla JavaScript のみを使用して Bluesky 認証 (OAuth DPoP) をサーバーレス クライアント アプリケーションに統合する方法について詳しく説明します。 これは概念図であり、トークンの有効期限があるため完全に機能する例ではありません。

はじめに

外部フレームワークに依存せずに、JavaScript アプリケーションに Bluesky 認証を実装する方法を検討します。

免責事項

これはプロセスを説明するチュートリアルです。 認証トークンの一時的な性質により、スタンドアロンの永続的に動作するサンプルとしては機能しません。 エラーがあれば報告してください。

OAuth 認証

ユーザー認証を必要とするサーバーレス アプリケーションの場合は、Bluesky のようなサードパーティ機関を利用できます。 これは OAuth 2.0 プロトコルを使用します。 Bluesky の OAuth 実装の詳細については、OAuth - AT Protocol のドキュメントを参照してください。

クライアントメタデータ

Bluesky 認証を利用するには、アプリケーションが Bluesky の認証サーバーによって認識される必要があります。これは、アプリケーション情報を含むクライアント メタデータ ファイル (例: client-metadata.json) を介して実現されます。 これにより、クライアント登録が自動化され、手動でサーバーを登録する必要がなくなります。 メタデータ ファイルは HTTPS 経由でアクセスできる必要があります。

メタデータ ファイルの例 (//m.sbmmt.com/link/db817217c5d9b196aa39cfeb0ce889e4 からアクセス可能):

<code class="language-json">{
  "client_id":"//m.sbmmt.com/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 (Personal Data Server) 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、バニラ JavaScript を使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。