Bluesky OAuthlient, avec Vanilla JavaScript

Cet article détaille l'intégration de Bluesky Authentication (OAuth DPoP) dans une application client sans serveur utilisant uniquement Vanilla JavaScript. Il s'agit d'une illustration conceptuelle, pas d'un exemple entièrement fonctionnel en raison de l'expiration du jeton.

Présentation

Nous explorerons comment implémenter l'authentification Bluesky dans une application JavaScript sans recourir à des frameworks externes.

Avis de non-responsabilité

Ceci est un tutoriel démontrant le processus. En raison de la nature éphémère des jetons d’authentification, ils ne fonctionneront pas comme un exemple autonome et perpétuellement fonctionnel. Veuillez signaler toute erreur.

Authentification OAuth

Pour une application sans serveur nécessitant une authentification des utilisateurs, nous pouvons tirer parti d'une autorité tierce comme Bluesky. Celui-ci utilise le protocole OAuth 2.0. Plus de détails sur la mise en œuvre OAuth de Bluesky peuvent être trouvés dans la documentation OAuth - AT Protocol.

Métadonnées client

Pour utiliser l'authentification Bluesky, notre application doit être reconnue par les serveurs d'authentification de Bluesky. Ceci est réalisé via un fichier de métadonnées client (par exemple, client-metadata.json) contenant des informations sur l'application. Cela permet l’enregistrement automatisé des clients, éliminant ainsi le besoin d’un enregistrement manuel du serveur. Le fichier de métadonnées doit être accessible via HTTPS.

Un exemple de fichier de métadonnées (accessible sur 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>

Ce fichier décrit notre application aux serveurs d'authentification Bluesky.

Exigences d'authentification de base

Pour authentifier un utilisateur, nous avons au minimum besoin de son identifiant Bluesky. Le handle est la partie de l'URL du profil Bluesky après https://bsky.app/profile/.

Récupération des données utilisateur

1. Récupérer le DID : Étant donné le pseudo d'un utilisateur, nous pouvons récupérer son identifiant décentralisé (DID) à l'aide d'un appel API (par exemple, https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=<handle>).

2. Récupérer le document DID : À l'aide du DID, nous récupérons le document DID à partir de l'API PLC (https://plc.directory/<did>). Ce document contient l'URL PDS (Personal Data Server) de l'utilisateur.

3. Récupérer les métadonnées PDS : L'URL PDS (serviceEndpoint dans le document DID) est utilisée pour récupérer les métadonnées PDS de /.well-known/oauth-protected-resource. Ces métadonnées fournissent l'URL du serveur d'autorisation.

4. Découverte du serveur d'autorisation : L'URL du serveur d'autorisation est utilisée pour récupérer ses métadonnées depuis /.well-known/oauth-authorization-server. Ces métadonnées contiennent des points de terminaison cruciaux tels que le point de terminaison d'autorisation, le point de terminaison de jeton et le point de terminaison de demande d'autorisation poussée (PAR).

Les étapes suivantes impliquent l'utilisation des points de terminaison découverts et PKCE (Proof Key for Code Exchange) pour obtenir le jeton d'accès de l'utilisateur, un processus impliquant des requêtes PAR, DPoP (Demonstrate Proof of Possession) pour une sécurité renforcée et la gestion des redirections. Le code Javascript détaillé de ces étapes, bien qu'omis par souci de concision, impliquerait d'effectuer plusieurs appels API et de gérer les réponses. Le client officiel Bluesky TypeScript est une alternative plus robuste et recommandée pour les applications de production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!