Client OAuth pour TypeScript : intégration de l'authentification dans les applications web

Client OAuth pour TypeScript : guide complet d'implémentation de l'authentification

Dans le développement web moderne, l'authentification sécurisée des utilisateurs est l'une des tâches clés. OAuth 2.0 est un protocole d'autorisation ouvert qui permet aux applications d'obtenir un accès limité aux ressources d'un utilisateur sans transmettre d'identifiant ni de mot de passe. Dans cet article, nous allons voir comment créer un client OAuth en TypeScript, utilisable dans toute application web. La bibliothèque est adaptée à l'intégration avec Google, GitHub, Facebook et d'autres fournisseurs.

Qu'est-ce qu'un client OAuth en TypeScript ?

Un client OAuth est un ensemble de fonctions et de classes qui implémentent le flux d'autorisation (Authorization Code Flow) côté client ou serveur. En TypeScript, un tel client assure un typage strict, ce qui réduit le nombre d'erreurs et simplifie la maintenance du code. Les tâches principales du client sont :

• Génération de l'URL pour rediriger l'utilisateur vers la page du fournisseur.
• Échange du code temporaire contre un access token et un refresh token.
• Stockage et renouvellement des jetons.
• Validation des paramètres de requête (state, nonce).

Architecture de la bibliothèque

La bibliothèque se compose de plusieurs modules :

• OAuthClient — la classe principale qui gère toutes les étapes.
• TokenStore — une interface pour le stockage des jetons (peut être implémentée en mémoire, dans localStorage ou une base de données).
• ProviderConfig — la configuration pour un fournisseur spécifique (clientId, redirectUri, endpoints).
• AuthError — une classe pour la gestion des erreurs d'authentification.

Exemple d'implémentation en TypeScript

Voici un exemple de base d'un client OAuth pour TypeScript. Commençons par définir les types et les 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>;}

Créons maintenant la classe principale 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;    }

    // Génération de l'URL d'authentification    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()}`;    }

    // Échange du code contre un jeton    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)