إزاي 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.
المدونة
يوليو 20, 2025
دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...
يوليو 01, 2025
🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...
سبتمبر 13, 2025
لو محتاج تبعت إشعارات Push من تطبيق Laravel سواء للموبايل أو للويب، فالحل الأسرع والأبسط هو إنك تستخدم Notifire اللي بيربط Laravel مباشرةً مع Fireba...
يوليو 01, 2025
مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...
يونيو 17, 2025
React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...
يوليو 01, 2025
حلل كود Laravel باستخدام Laravel Introspect لو بتعمل Refactor كبير أو بتبني أدوات Dev، Laravel Introspect بيسمحلك تستعلم عن الكود: فيوز، مودلز، رو...