إزاي OAuth بيشتغل؟

OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر بوستات عندك على تويتر.

🔐 يعني إيه OAuth؟

يعني تقدر تدي إذن لتطبيق يستخدم بياناتك زي الإيميل أو البروفايل من غير ما يعرف الباسورد. المستخدم بيوافق، والتطبيق بياخد صلاحيات محددة.

🔁 الخطوة ١: طلب التفويض

بتبعت المستخدم على صفحة موافقة:

const params = {
  response_type: 'code',
  client_id: 'client-id-بتاعك',
  redirect_uri: 'https://app.com/callback',
  scope: 'email profile',
  state: 'كود-عشوائي'
};
const url = 'https://auth.example.com/oauth/authorize?' + new URLSearchParams(params);
// location.href = url;

🔁 الخطوة ٢: استلام الكود

بعد الموافقة، المستخدم بيرجع للتطبيق ومعاه كود مؤقت في الرابط.

🛠️ الخطوة ٣: تبادل الكود بتوكن

const response = await fetch('https://auth.example.com/oauth/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: 'الكود',
    redirect_uri: 'https://app.com/callback',
    client_id: 'العميل-id',
    client_secret: 'السر'
  })
});
const data = await response.json();
const accessToken = data.access_token;

💡 إيه هو PKCE؟

PKCE هو طريقة لحماية التطبيقات اللي مش قادرة تحفظ أسرار، زي تطبيقات الموبايل.

// في الواجهة
const codeVerifier = generateRandomString();
const codeChallenge = await sha256(codeVerifier);
sessionStorage.setItem('verifier', codeVerifier);

const params = {
  response_type: 'code',
  code_challenge_method: 'S256',
  code_challenge: codeChallenge
};

📢 ملخص

• OAuth بيوفر طريقة آمنة للتفويض بدون كلمة سر.
• اتأكد من قيمة state عشان تمنع الاختراق.
• PKCE لازم لتطبيقات الموبايل والـSPA.