Cliente OAuth para TypeScript: integração de autorização em aplicações web

Cliente OAuth para TypeScript: guia completo de implementação de autorização

No desenvolvimento web moderno, a autenticação segura de usuários é uma das tarefas principais. O OAuth 2.0 é um protocolo aberto de autorização que permite que aplicações obtenham acesso limitado aos recursos do usuário sem transmitir login e senha. Neste artigo, vamos analisar como criar um cliente OAuth em TypeScript que pode ser usado em qualquer aplicação web. A biblioteca é adequada para integração com Google, GitHub, Facebook e outros provedores.

O que é um cliente OAuth em TypeScript?

Um cliente OAuth é um conjunto de funções e classes que implementam o fluxo de autorização (Authorization Code Flow) no lado do cliente ou servidor. Em TypeScript, esse cliente fornece tipagem estrita, o que reduz o número de erros e simplifica a manutenção do código. As principais tarefas do cliente:

• Geração de URL para redirecionar o usuário para a página do provedor.
• Troca do código temporário por access token e refresh token.
• Armazenamento e atualização de tokens.
• Validação de parâmetros de requisição (state, nonce).

Arquitetura da biblioteca

A biblioteca consiste em vários módulos:

• OAuthClient — classe principal que gerencia todas as etapas.
• TokenStore — interface para armazenamento de tokens (pode ser implementada em memória, localStorage ou banco de dados).
• ProviderConfig — configuração para um provedor específico (clientId, redirectUri, endpoints).
• AuthError — classe para tratamento de erros de autorização.

Exemplo de implementação em TypeScript

Abaixo está um exemplo básico de cliente OAuth para TypeScript. Primeiro, definimos os tipos e 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>;}

Agora criamos a classe principal 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;    }

    // Geração de URL para autorização    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()}`;    }

    // Troca do código por 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)