Bluesky OAuthlient, mit Vanilla JavaScript

Dieser Beitrag beschreibt die Integration der Bluesky-Authentifizierung (OAuth DPoP) in eine serverlose Clientanwendung, die nur Vanilla-JavaScript verwendet. Es handelt sich um eine konzeptionelle Illustration und aufgrund des Ablaufs des Tokens nicht um ein voll funktionsfähiges Beispiel.

Einführung

Wir werden untersuchen, wie man die Bluesky-Authentifizierung in einer JavaScript-Anwendung implementiert, ohne auf externe Frameworks angewiesen zu sein.

Haftungsausschluss

Dies ist ein Tutorial, das den Prozess demonstriert. Aufgrund der kurzlebigen Natur von Authentifizierungstokens wird es nicht als eigenständiges, ständig funktionierendes Beispiel funktionieren. Bitte melden Sie etwaige Fehler.

OAuth-Authentifizierung

Für eine serverlose Anwendung, die eine Benutzerauthentifizierung erfordert, können wir eine Drittanbieter-Autorität wie Bluesky nutzen. Dabei wird das OAuth 2.0-Protokoll verwendet. Weitere Details zur OAuth-Implementierung von Bluesky finden Sie in der Dokumentation zum OAuth-AT-Protokoll.

Client-Metadaten

Um die Bluesky-Authentifizierung nutzen zu können, muss unsere Anwendung von den Authentifizierungsservern von Bluesky erkannt werden. Dies wird über eine Client-Metadatendatei (z. B. client-metadata.json) erreicht, die Anwendungsinformationen enthält. Dies ermöglicht eine automatisierte Client-Registrierung und macht eine manuelle Server-Registrierung überflüssig. Die Metadatendatei muss über HTTPS erreichbar sein.

Eine Beispiel-Metadatendatei (zugänglich unter 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/"
}

Diese Datei beschreibt unsere Anwendung auf die Bluesky-Authentifizierungsserver.

Kernauthentifizierungsanforderungen

Um einen Benutzer zu authentifizieren, benötigen wir mindestens seinen Bluesky-Handle. Das Handle ist der Teil der Bluesky-Profil-URL nach https://bsky.app/profile/.

Benutzerdaten abrufen

1. DID abrufen: Anhand des Handles eines Benutzers können wir dessen Decentralized Identifier (DID) mithilfe eines API-Aufrufs abrufen (z. B. https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=<handle>).

2. DID-Dokument abrufen: Mithilfe der DID rufen wir das DID-Dokument von der SPS-API ab (https://plc.directory/<did>). Dieses Dokument enthält die PDS-URL (Personal Data Server) des Benutzers.

3. PDS-Metadaten abrufen: Die PDS-URL (serviceEndpoint im DID-Dokument) wird verwendet, um die PDS-Metadaten von /.well-known/oauth-protected-resource abzurufen. Diese Metadaten stellen die URL des Autorisierungsservers bereit.

4. Erkennung des Autorisierungsservers: Die URL des Autorisierungsservers wird verwendet, um seine Metadaten von /.well-known/oauth-authorization-server abzurufen. Diese Metadaten enthalten wichtige Endpunkte wie den Autorisierungsendpunkt, den Token-Endpunkt und den PAR-Endpunkt (Pushed Authorization Request).

Die folgenden Schritte umfassen die Verwendung der erkannten Endpunkte und PKCE (Proof Key for Code Exchange), um das Zugriffstoken des Benutzers zu erhalten, einen Prozess mit PAR-Anfragen, DPoP (Demonstrate Proof of Possession) für erhöhte Sicherheit und die Handhabung von Weiterleitungen. Der detaillierte Javascript-Code für diese Schritte wird zwar der Kürze halber weggelassen, würde aber das Durchführen mehrerer API-Aufrufe und die Verarbeitung der Antworten erfordern. Der offizielle Bluesky TypeScript-Client ist eine robustere und empfohlene Alternative für Produktionsanwendungen.

Das obige ist der detaillierte Inhalt vonBluesky OAuthlient, mit Vanilla JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!