TypeScript OAuth क्लाइंट: GitHub, Google और अन्य प्रदाताओं से प्रमाणीकरण

TypeScript OAuth क्लाइंट: शैक्षिक वेबसाइट पर प्रमाणीकरण लागू करना

आधुनिक वेब डेवलपमेंट में, OAuth (Open Authorization) तीसरे पक्ष की सेवाओं के माध्यम से उपयोगकर्ताओं को प्रमाणित करने का मानक बन गया है। शैक्षिक वेबसाइट pythonlib.ru के लिए, हमने TypeScript में एक सार्वभौमिक OAuth क्लाइंट तैयार किया है जो GitHub, Google और अन्य लोकप्रिय प्रदाताओं के माध्यम से लॉगिन की सुविधा देता है।

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

OAuth क्लाइंट एक सॉफ्टवेयर घटक है जो किसी तीसरे पक्ष की सेवा पर उपयोगकर्ता के डेटा तक पहुँचने के लिए अनुमति प्राप्त करने की प्रक्रिया को प्रबंधित करता है। TypeScript के संदर्भ में, ऐसा क्लाइंट आमतौर पर OAuth 2.0 प्रोटोकॉल लागू करता है और इसमें शामिल है:

• प्रमाणीकरण प्रक्रिया शुरू करना
• कॉलबैक अनुरोधों को संभालना
• authorization code को access token में बदलना
• टोकन को रिफ्रेश करना (refresh token)
• सत्र की स्थिति के साथ काम करना

TypeScript में OAuth क्लाइंट की संरचना

हमारा क्लाइंट मॉड्यूलरिटी और टाइप सुरक्षा के सिद्धांतों पर बनाया गया है। मुख्य घटक इस प्रकार हैं:

1. प्रदाता कॉन्फ़िगरेशन

interface OAuthProviderConfig {
  clientId: string;
  clientSecret: string;
  redirectUri: string;
  authorizationEndpoint: string;
  tokenEndpoint: string;
  scopes: string[];
}

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

2. प्रमाणीकरण URL जनरेट करना

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

3. कोड को टोकन में बदलना

async function exchangeCodeForToken(
  config: OAuthProviderConfig,
  code: string
): Promise<OAuthTokenResponse> {
  const response = await fetch(config.tokenEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      client_id: config.clientId,
      client_secret: config.clientSecret,
      code: code,
      redirect_uri: config.redirectUri
    })
  });

  if (!response.ok) {
    throw new Error(`Token exchange failed: ${response.statusText}`);
  }

  return response.json();
}

टोकन के साथ काम करना

टोकन प्राप्त करने के बाद, उन्हें सुरक्षित रूप से संग्रहीत और अपडेट करना आवश्यक है। httpOnly cookies या सर्वर-साइड सत्र भंडारण का उपयोग करने की सलाह दी जाती है।

Access token को रिफ्रेश करना

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

  return response.json();
}

GitHub OAuth के लिए पूर्ण उदाहरण

import { randomBytes } from 'crypto';

class GitHubOAuthClient {
  private config: OAuthProviderConfig;
  private stateStore: Map<string, string> = new Map();

  constructor() {
    this.config = {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
      redirectUri: 'https://pythonlib.ru/auth/callback/github',
      authorizationEndpoint: 'https://github.com/login/oauth/authorize',
      tokenEndpoint: 'https://github.com/login/oauth/access_token',
      scopes: ['read:user', 'user:email']
    };
  }

  // प्रमाणीकरण URL जनरेट करें
  getAuthorizationUrl(): string {
    const state = randomBytes(16).toString('hex');
    this.stateStore.set(state, 'valid');
    return generateAuthUrl(this.config, state);
  }

  // कॉलबैक संभालें और टोकन प्राप्त करें
  async handleCallback(code: string, state: string): Promise<OAuthTokenResponse> {
    if (!this.stateStore.has(state)) {
      throw new Error('अमान्य state पैरामीटर');
    }
    this.stateStore.delete(state);
    return exchangeCodeForToken(this.config, code);
  }
}