TypeScript के लिए OAuth क्लाइंट: वेब अनुप्रयोगों में प्राधिकरण एकीकरण

TypeScript के लिए OAuth क्लाइंट: प्राधिकरण कार्यान्वयन की पूर्ण मार्गदर्शिका

आधुनिक वेब विकास में, उपयोगकर्ताओं का सुरक्षित प्रमाणीकरण प्रमुख कार्यों में से एक है। OAuth 2.0 एक खुला प्राधिकरण प्रोटोकॉल है जो अनुप्रयोगों को लॉगिन और पासवर्ड साझा किए बिना उपयोगकर्ता के संसाधनों तक सीमित पहुँच प्राप्त करने की अनुमति देता है। इस लेख में, हम TypeScript पर OAuth क्लाइंट बनाने का तरीका समझेंगे, जिसका उपयोग किसी भी वेब अनुप्रयोग में किया जा सकता है। यह लाइब्रेरी Google, GitHub, Facebook और अन्य प्रदाताओं के साथ एकीकरण के लिए उपयुक्त है।

TypeScript पर OAuth क्लाइंट क्या है?

OAuth क्लाइंट फ़ंक्शन और क्लासेस का एक सेट है जो क्लाइंट या सर्वर पक्ष पर प्राधिकरण प्रवाह (Authorization Code Flow) को लागू करता है। TypeScript पर ऐसा क्लाइंट सख्त टाइपिंग सुनिश्चित करता है, जिससे त्रुटियों की संख्या कम होती है और कोड रखरखाव सरल होता है। क्लाइंट के मुख्य कार्य:

• उपयोगकर्ता को प्रदाता के पृष्ठ पर पुनर्निर्देशित करने के लिए URL उत्पन्न करना।
• अस्थायी कोड को access token और refresh token में बदलना।
• टोकन का भंडारण और अद्यतन करना।
• अनुरोध पैरामीटर (state, nonce) का सत्यापन करना।

लाइब्रेरी की संरचना

लाइब्रेरी कई मॉड्यूल से बनी है:

• OAuthClient — मुख्य क्लास जो सभी चरणों का प्रबंधन करता है।
• TokenStore — टोकन भंडारण के लिए इंटरफ़ेस (मेमोरी, localStorage या डेटाबेस में लागू किया जा सकता है)।
• ProviderConfig — विशिष्ट प्रदाता के लिए कॉन्फ़िगरेशन (clientId, redirectUri, endpoints)।
• AuthError — प्राधिकरण त्रुटियों को संभालने के लिए क्लास।

TypeScript पर कार्यान्वयन का उदाहरण

नीचे TypeScript के लिए OAuth क्लाइंट का मूल उदाहरण दिया गया है। पहले प्रकार और इंटरफ़ेस परिभाषित करें:

// 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>;}

अब मुख्य क्लास 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;    }

    // प्राधिकरण के लिए URL उत्पन्न करना    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()}`;    }

    // कोड को टोकन में बदलना    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)