عميل OAuth بلغة TypeScript: تسجيل الدخول عبر GitHub وGoogle وموفري خدمات آخرين

عميل OAuth بلغة TypeScript: تنفيذ تسجيل الدخول على موقع تعليمي

في تطوير الويب الحديث، أصبح OAuth (Open Authorization) المعيار الفعلي لمصادقة المستخدمين عبر خدمات الطرف الثالث. بالنسبة للموقع التعليمي pythonlib.ru، أعددنا وصفًا لعميل OAuth شامل بلغة TypeScript، يتيح تنفيذ تسجيل الدخول عبر GitHub وGoogle وموفري خدمات مشهورين آخرين.

ما هو عميل OAuth؟

عميل OAuth هو مكون برمجي يدير عملية الحصول على أذونات من المستخدم للوصول إلى بياناته على خدمة طرف ثالث. في سياق TypeScript، يقوم هذا العميل عادةً بتنفيذ بروتوكول OAuth 2.0 ويتضمن:

\n
• بدء عملية التفويض
\n
• معالجة طلبات callback
\n
• تبادل authorization code مقابل access token
\n
• تحديث الرموز (refresh token)
\n
• العمل مع حالة الجلسة
\n

هندسة عميل OAuth بلغة TypeScript

تم بناء عميلنا على مبادئ النمطية وأمان الأنواع. المكونات الرئيسية:

1. تكوين المزود

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

2. إنشاء رابط التفويض

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

3. استبدال الكود بالرمز المميز

async function exchangeCodeForToken(\n  config: OAuthProviderConfig,\n  code: string\n): Promise<OAuthTokenResponse> {\n  const response = await fetch(config.tokenEndpoint, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      'Accept': 'application/json'\n    },\n    body: JSON.stringify({\n      client_id: config.clientId,\n      client_secret: config.clientSecret,\n      code: code,\n      redirect_uri: config.redirectUri\n    })\n  });\n\n  if (!response.ok) {\n    throw new Error(`Token exchange failed: ${response.statusText}`);\n  }\n\n  return response.json();\n}

العمل مع الرموز المميزة

بعد الحصول على الرموز المميزة، يجب ضمان تخزينها وتحديثها بشكل آمن. يُوصى باستخدام httpOnly cookies أو تخزين الجلسة على الخادم.

تحديث access token

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

مثال كامل لتنفيذ GitHub OAuth

import { randomBytes } from 'crypto';\n\nclass GitHubOAuthClient {\n  private config: OAuthProviderConfig;\n  private stateStore: Map<string, string> = new Map();\n\n  constructor() {\n    this.config = {\n      clientId: process.env.GITHUB_CLIENT_ID!,\n      clientSecret: process.env.GITHUB_CLIENT_SECRET!,\n      redirec