OAuth-Client für TypeScript: Integration der Autorisierung in Webanwendungen

OAuth-Client für TypeScript: Vollständige Anleitung zur Implementierung der Autorisierung

In der modernen Webentwicklung ist die sichere Authentifizierung von Benutzern eine der zentralen Aufgaben. OAuth 2.0 ist ein offenes Autorisierungsprotokoll, das es Anwendungen ermöglicht, eingeschränkten Zugriff auf Benutzerressourcen zu erhalten, ohne Login und Passwort zu übertragen. In diesem Artikel werden wir erläutern, wie man einen OAuth-Client in TypeScript erstellt, der in jeder Webanwendung verwendet werden kann. Die Bibliothek eignet sich für die Integration mit Google, GitHub, Facebook und anderen Anbietern.

Was ist ein OAuth-Client in TypeScript?

Ein OAuth-Client ist eine Sammlung von Funktionen und Klassen, die den Autorisierungsablauf (Authorization Code Flow) auf Client- oder Serverseite implementieren. In TypeScript gewährleistet ein solcher Client eine strenge Typisierung, was die Anzahl der Fehler reduziert und die Code-Wartung vereinfacht. Die Hauptaufgaben des Clients sind:

• Generierung einer URL zur Weiterleitung des Benutzers auf die Seite des Anbieters.
• Austausch eines temporären Codes gegen ein access token und refresh token.
• Speicherung und Aktualisierung von Token.
• Validierung von Anfrageparametern (state, nonce).

Architektur der Bibliothek

Die Bibliothek besteht aus mehreren Modulen:

• OAuthClient – die Hauptklasse, die alle Phasen verwaltet.
• TokenStore – ein Interface zur Speicherung von Token (kann im Speicher, localStorage oder einer Datenbank implementiert werden).
• ProviderConfig – Konfiguration für einen bestimmten Anbieter (clientId, redirectUri, endpoints).
• AuthError – eine Klasse zur Behandlung von Autorisierungsfehlern.

Implementierungsbeispiel in TypeScript

Nachfolgend finden Sie ein grundlegendes Beispiel eines OAuth-Clients für TypeScript. Zuerst definieren wir die Typen und Interfaces:

// types.tsexport interface TokenResponse {    access_token: string;    token_type: string;    expires_in: number;    refresh_token?: string;    scope?: string;}

export interface ProviderConfig {    authorizationEndpoint: string;    tokenEndpoint: string;    clientId: string;    redirectUri: string;    scope: string;}

export interface TokenStore {    getToken(): Promise<string | null>;    setToken(token: TokenResponse): Promise<void>;    clearToken(): Promise<void>;}

Jetzt erstellen wir die Hauptklasse OAuthClient:

// OAuthClient.tsimport { TokenResponse, ProviderConfig, TokenStore } from './types';import { AuthError } from './AuthError';

export class OAuthClient {    private config: ProviderConfig;    private store: TokenStore;

    constructor(config: ProviderConfig, store: TokenStore) {        this.config = config;        this.store = store;    }

    // Generierung der URL für die Autorisierung    getAuthorizationUrl(state: string): string {        const params = new URLSearchParams({            client_id: this.config.clientId,            redirect_uri: this.config.redirectUri,            response_type: 'code',            scope: this.config.scope,            state: state,        });        return `${this.config.authorizationEndpoint}?${params.toString()}`;    }

    // Austausch des Codes gegen ein Token    async exchangeCodeForToken(code: string, state: string, expectedState: string): Promise<TokenResponse> {        if (state !== expectedState) {            throw new AuthError('State mismatch. Possible CSRF attack.');        }

        const body = new URLSearchParams({            grant_type: 'authorization_code',            code: code,            redirect_uri: this.config.redirectUri,            client_id: this.config.clientId,        });

        const response = await fetch(this.config.tokenEndpoint, {            method: 'POST',            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },            body: body,        });

        if (!response.ok)