OAuth-Client für TypeScript: Authentifizierung über GitHub, Google und andere Anbieter

OAuth-Client für TypeScript: Implementierung der Authentifizierung auf einer Bildungswebsite

In der modernen Webentwicklung ist OAuth (Open Authorization) zum De-facto-Standard für die Authentifizierung von Benutzern über Drittanbieterdienste geworden. Für die Bildungswebsite pythonlib.ru haben wir eine Beschreibung eines universellen OAuth-Clients in TypeScript vorbereitet, der die Anmeldung über GitHub, Google und andere gängige Anbieter ermöglicht.

Was ist ein OAuth-Client?

Ein OAuth-Client ist eine Softwarekomponente, die den Prozess der Einholung von Berechtigungen eines Benutzers für den Zugriff auf seine Daten bei einem Drittanbieterdienst verwaltet. Im Kontext von TypeScript implementiert ein solcher Client in der Regel das OAuth 2.0-Protokoll und umfasst:

\n
• Initialisierung des Autorisierungsprozesses
\n
• Verarbeitung von Callback-Anfragen
\n
• Austausch des Autorisierungscodes gegen ein Access Token
\n
• Aktualisierung von Token (Refresh Token)
\n
• Arbeit mit dem Sitzungszustand
\n

Architektur des OAuth-Clients in TypeScript

Unser Client basiert auf den Prinzipien der Modularität und Typsicherheit. Die Hauptkomponenten:

1. Konfiguration des Anbieters

interface OAuthProviderConfig {\n  clientId: string;\n  clientSecret: string;\n  redirectUri: string;\n  authorizationEndpoint: string;\n  tokenEndpoint: string;\n  scopes: string[];\n}\n\nconst githubConfig: OAuthProviderConfig = {\n  clientId: process.env.GITHUB_CLIENT_ID!,\n  clientSecret: process.env.GITHUB_CLIENT_SECRET!,\n  redirectUri: 'https://pythonlib.ru/auth/callback/github',\n  authorizationEndpoint: 'https://github.com/login/oauth/authorize',\n  tokenEndpoint: 'https://github.com/login/oauth/access_token',\n  scopes: ['read:user', 'user:email']\n};

2. Generierung der Autorisierungs-URL

function generateAuthUrl(config: OAuthProviderConfig, state: string): string {\n  const params = new URLSearchParams({\n    client_id: config.clientId,\n    redirect_uri: config.redirectUri,\n    scope: config.scopes.join(' '),\n    state: state,\n    response_type: 'code'\n  });\n  \n  return `${config.authorizationEndpoint}?${params.toString()}`;\n}

3. Austausch des Codes gegen ein Token

async function exchangeCodeForToken(\n  config: OAuthProviderConfig,\n  code: string\n): Promise<OAuthTokenResponse> {\n  const response = await fetch(config.tokenEndpoint, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      'Accept': 'application/json'\n    },\n    body: JSON.stringify({\n      client_id: config.clientId,\n      client_secret: config.clientSecret,\n      code: code,\n      redirect_uri: config.redirectUri\n    })\n  });\n\n  if (!response.ok) {\n    throw new Error(`Token exchange failed: ${response.statusText}`);\n  }\n\n  return response.json();\n}

Arbeit mit Token

Nach Erhalt der Token muss deren sichere Speicherung und Aktualisierung gewährleistet werden. Es wird empfohlen, httpOnly-Cookies oder serverseitige Sitzungsspeicher zu verwenden.

Aktualisierung des Access Token

async function refreshAccessToken(\n  config: OAuthProviderConfig,\n  refreshToken: string\n): Promise<OAuthTokenResponse> {\n  const response = await fetch(config.tokenEndpoint, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json'\n    },\n    body: JSON.stringify({\n      client_id: config.clientId,\n      client_secret: config.clientSecret,\n      refresh_token: refreshToken,\n      grant_type: 'refresh_token'\n    })\n  });\n\n  return response.json();\n}

Vollständiges Implementierungsbeispiel für GitHub OAuth

import { randomBytes } from 'crypto';\n\nclass GitHubOAuthClient {\n  private config: OAuthProviderConfig;\n  private stateStore: Map<string, string> = new Map();\n\n  constructor() {\n    this.config = {\n      clientId: process.env.GITHUB_CLIENT_ID!,\n      clientSecret: process.env.GITHUB_CLIENT_SECRET!,\n      redirec