إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي 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.

المدونة

دليل للأنيميشن المتحركة بالسكّول بس بـ CSS

يونيو 26, 2025

دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت. 1. التلات مكونات بتوع...

الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 06, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...

شرح مفصل لكل هوك في React

يوليو 01, 2025

🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...

إزاي تستخدم Web Components ببساطة وذكاء

يوليو 06, 2025

إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...

توليد تقارير بكفاءة مع كاش وزمن ثابت واستخدام الـ Job Queues

يوليو 07, 2025

إزاي نعمل كاش لتقارير بفترة زمنية ثابتة إزاي نولّد تقارير ضخمة في الخلفية باستخدام الـ Job Queues 1. 🧠 كاش للتقارير بفترة زمنية ثابتة لو ع...

لارافيل 12.16.0 - مميزات جديدة للمطورين

يونيو 03, 2025

لارافيل 12.16.0 - مميزات جديدة للمطورين 1. قاعدات تحقق جديدة: in_array_keys دلوقتي تقدر تتحقق إن الأراي فيه على الأقل مفتاح واحد من اللي انت محددهم...

The Ultimate Managed Hosting Platform