ماهو json web token وماهو OAuth

عند تسجيل الدخول في المواقع العادية تعودنا على استعمال جلسة session تربط السرفر بالمتصفح وهده الطريقة تسمح بابقاء المستخدم متصل بحسابهaccount مع السرفر 
ولكن هده الطريقة غير ممكنة عندما نفكر بانشاء تطبيق اندرويد او تطبيق سطح مكتب مبرمج بالجافا او السي شارب مثلا  لان هده التطبيقات اساسا لاتعتمد على جلسات sessions الدي يفهمها المتصفح
.ففي هدا النوع من التطبيقات سنحتاج الى شيء اخر غير الجلسات المربوطة في عملية تسجيل الدخول  أو استخدام صلاحيات المستخدم (ادمن .يوزر . مشريف..) سنحتاج لاستخدام مفهوم جديد  اسمه الـ token او مايسمى بالرمز السري هدا الرمز يقوم السرفر بتوليده عند كل عملية تسجيل دخول المستخدم ثم ارساله الى التطبيق سواء تطبيق اندرويد او تطبيق سطح مكتب او اي شيء.. وهدا التطبيق يقوم بحفظه بداكرته الداخلية  وسيحتاج لاعادة ارساله الى السرفر  عند كل عملية سرية تحتاج لصلاحيات (مثل الاطلاع على بيانات المستخدم او تعديل بيانات المستخدم...) فهده العمليات  تتطلب هدا ال token  والدي يقوم السرفر من فك تشفيره وينظر هل هو صحيح؟ هل مازالت مدته صالحة ؟  فادا وجد السرفر ان هدا الكود المرسل من التطبيق صحيح  سيسمح للتطبيق بالوصول الى البيانات السرية.. اما ادا  وجد ان الكود خطأ او انه لم يرسل اليه سيقوم مباشرة بالرد الى التطبيق انه لايسمح له بالدخول للصفحة الفلانية ....
يجب ان نفهم الفرق بين  session وبين token ..  فالsession تستخدم بين المتصفح (المستخدم) وبين الخادم (server)  اما token فهو كود مشفر يحتوي على بيبانات المستخدم يتبادله المستخدم (التطبيق ايا كان نوعه) وبين السرفر للتعرف على بعضهما البعض ..
فمهمة الجلسات والرموز السرية هي نفسها ولكن تختلف مواضع استخدامها حسب نوع التطبيق 
سوف نستخدم في دروسنا اداة jwt وهي اداة شهيرة دات مقاييس عالمية او يمكنك ان تقول مكتبة تسمح لك بتشفير ال token وفك تشفيره بالسرفر واعطاء مدة صلاحية زمنية محددة سنحددها كما نشاء

في السابق ، تعلمنا كيفية استخدام REST API  في PHP. وأخدنا امثلة عن تعاملها مع  قاعدة البيانات مثل قراءتها وتحديثها وحذفها (عمليات CRUD) المهمة جدا لمشاريعنا.
اليوم سوف نتعلم كيفية مصادقة المستخدم باستخدام REST API وبين مايسمى بالـ JSON Web Token أو JWT. وعندما نقول مصادقة فنحن نقصدauthentication 
في الدروس المقبلة سنقوم بتغطية نموذج تسجيل الدخول مع عمليات تسجيل الدخول والخروج ، وتحديث حساب المستخدم 
وقبل دلك سوف نمر على بعض الأمور المهمة والتي هي :
سنتعرف على JWT مع امثلة بسيطة
سنتعرف على البرتوكول OAuth  وعن الفرق بينه وبين JWT
من الناحية التقنية  يعتبر JSON Web Token أو JWT معيار مفتوح يحمل رمز RFC 7519 يحدد طريقة  مكتفية ذاتيًا لنقل المعلومات بأمان بين الأطراف (client/server) ككائن من نوع JSON.
يمكن التحقق من هذه المعلومات وموثوقيتها لأنها تحمل توقيع رقمي حيث يمكن توقيع JWTs باستخدام  خوارزمية (HMAC) أو باستخدام مايسمى بثنائي المفاتيح private/ public  باستخدام RSA أو ECDSA. (وهي انواع تشفيرات تستخدم في نقل البيانات بين العميل والسرفر)
على سبيل المثال ، يمكن أن ينشئ الخادم رمز Token يحتوي على تصريح "بتسجيل الدخول كمشرف" وتقديم ذلك للعميل. يمكن للعميل بعد ذلك استخدام هدا الرمز لإثبات أنه تم تسجيل الدخول كمسؤول.
يتألف رمز token الخاص بالـ jwt  من سلسلة حرفية طويلة مقسمة الى ثلاثة أقسام التي تفصلها نقاط .اليك مثال 
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwOlwvXC9leGFtcGxlLm9yZyIsImF1ZCI6Imh0dHA6XC9cL2V4YW1wbGUuY29tIiwiaWF0IjoxMzU2OTk5NTI0LCJuYmYiOjEzNTcwMDAwMDAsImRhdGEiOnsiaWQiOiI5IiwiZmlyc3RuYW1lIjoiTWlrZSIsImxhc3RuYW1lIjoiRGFsaXNheSIsImVtYWlsIjoibWlrZUBjb2Rlb2ZhbmluamEuY29tIn19.o_Q4gJ3epcpwdwNCNCYxtiKdXsN34W9I44PyhlsAs4
//  header القسم الاول من الكود يسمى  
//  payload القسم الثاني من الكود
//   signature القسم الثالث من الكود
تتمثل  ترجمة هدا النمودج على ثلاثة شفرات هي header.payload.signature  حيث تفصل كل قطعة من الكود بنقطة كما هو مبين فوق بشكل السلسلة
1. header : يحتوي كود الـ header على معلومات تخص البيانات الوصفية للـ token ويحتوي أيضا على نوعية التوقيع وخوارزمية التشفير. وعندما نقول توقيع فنحن نقصد المقطع الثالث من الكود المسمى signature . 
نوعية تشفير الخوارزمية والتي عادة نرمز اليها بـ “alg”: “HS256”
مثال عن تعريف الـ header 
{
  "alg": "HS256",
  "typ": "JWT"
}
هدا ال header  يعبر عن كائن مشفر غن طريق خوارزمية موقعة تحت علامة HMAC SHA-256  ونوعه  JSON Web Token.
سيعطينا هدا المقطع من الشفرة الثلاثية السابقة وهو المقطع الأول منها
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
2. payload :  هو المقطع الثاني من الكود وهو الدي يركب البيانات الفعلية التي نحتاج اليها أي بمعنى أوضح هي البيانات المشفرة التي نريد ارسالها . يمكن أن يكون معلومات المستخدم مثل معرف المستخدم username والاسم والبريد الإلكتروني ...الخ (باختصار الـ payload هو كود البيانات التي نرسلها او نستقبلها)
يحتوي على
  • iss: The issuer of the token
  • sub: The subject of the token
  • aud: The audience of the token
  • exp: Token expiration time defined in Unix time
  • nbf: “Not before” time that identifies the time before which the JWT must not be accepted for processing
  • iat: “Issued at” time, in Unix time, at which the token was issued
  • jti: JWT ID claim provides a unique identifier for the JWT
عند التشفير وفك التشفير ليس شرط ان نتعرض الى كل هده القيم وانما سنحتاج لما نريده فقط
مثال
{
  "iss": "exportdeveloper.com",
  "exp": 1426420800,
  "company": "export developer",
  "awesome": true
}

3. signature :  أو التوقيع . يتم إنشاؤه من خلال الجمع بين Header المشفر و Payload المشفر وتوقيعه باستخدام خوارزمية تشفير قوية ، مثلHMAC SHA-256. يحتفظ الخادم (server) بالمفتاح السري الخاص بالتوقيع بحيث يتمكن من التحقق من الرموز المميزة الحالية وتوقيع رموز جديدة.

صورة توضح كيفية التخاطب بين المتصفح والسرفر بوضيفة تسجيل الدخول عن طريق session عادي

شرح مختصر لما يحدث بالصورة : 
-يقوم المتصفح بإجراء طلب POST على الخادم الذي يحتوي على هوية المستخدم وكلمة المرور. يستجيب الخادم بملف تعريف الارتباط cookie ، والذي ينبغي ان يتم تعيينه على متصفح المستخدم ، ويتضمن معرف جلسة لتعريف المستخدم.
-في كل طلب لاحق من طرف المستخدم (المتصفح) ، يحتاج الخادم إلى تلك الجلسة وإلغاء تسلسلها ، لأنه يتم تخزين بيانات المستخدم على الخادم.

صورة توضح كيفية التعامل بين الخادم والمستخدم عن طريق التخاطب بالـ Token

 

المصادقة المستندة إلى الرمز token تكون بدون الحاجة الى هوية ، لذلك لا توجد حاجة لتخزين معلومات المستخدم في الجلسة (session). هذا يعطينا القدرة على توسيع نطاق تطبيقنا .
يقوم المتصفح أو الجوال بتقديم طلب "تسجيل الدخول" إلى الخادم الذي يحتوي على معلومات تسجيل دخول المستخدم.حيث ينشئ خادم المصادقة على شكل jwt  والتي تسمح بوصول الدخول 
ومن ثم يعيده إلى العميل (العميل هو المتصفح او الجوال...). 
يقوم العميل بالاحتفاظ برمز الوصول token وهكدى بعد كل طلب يرسل العميل هدا الرمز للوصول في سلسلة الاستعلام أو رأس التخويل المخفي "بيانات الـ headers".
يقوم الخادم بعد ذلك بالتحقق من صحة الرمز المميز ، وإذا كان صحيحًا  فسيرجع له البيانات اللازمة إلى العميل. وادا كان خطأ يرجع له رسالة خطأ تفيد بعدم امكانية الوصول للصفحة او البيانات المطلوبة

البرتوكول OAuth 
يتم استخدام OAuth كطريقة لمستخدمي الإنترنت لمنح مواقع الويب أو التطبيقات (تطبيق سطح مكتب او تطبيق android ..) حق الوصول إلى معلوماتهم على مواقع ويب أخرى ولكن دون منحهم كلمات المرور  مثل ماهو منتشر حاليا بمايعرف (التسجيل عن طريق facebook..) هده الميزات تستخدم برتوكول Oauth من اجل اعطاء تصريح لتطبيقك بالدخول للبيانات عن طريق جسر ثالث (Facebook أو Gmail...)
مايعني أنه بتسجيلك عن طريق جسر ثالث في موقع معين فسوف يمنحك التطبيق الوصول الى بيانات لكن دون ان يمنحه الجسر الثالث كلة سر الفيسبوك مثلا وانما يعطي للتطبيق بيانات معينة مثل اسم المعرف والاسم والايميل ...ليسمح لهدا الموقع أو التطبيق . باستخدامها في اضافتك في قاعدة بياناته أو التعرف عليك وبالتالي يسمح لك باستخدام مزايا معينة مثل التعليق على المواضيع أو التواصل مع مستخدمين او ماشابه دلك.... 
ماهو الفرق بين JWT و OAuth
JWT هو تنسيق رمزي  Token ويمكننا القول أنه بروتوكول مصادقة بسيط.
 يعد OAuth إطار مصادقة  ضخم يمكنه استخدام JWT كرمز Token .

متى نستخدم jwt
  • لدينا حالة استخدام بسيطة ، مثل تطبيق عميل واحد single client application
  • لا يدخل المستخدمون إلى مواردهم إلا من خلال التطبيق الخاص بك.
  • نريد مصادقة ahtentication عبر برتكول HTTP سريعة التنفيذ  نحو API.
متى يمكن استخدام OAuth
  • يمكن للمستخدمين الوصول إلى مواردهم من خلال تطبيق آخر لا تملكه.
  • تريد توفير API ضخم ومزدوج التعامل مع عدة تطبيقات حيث يتعامل مع التطبيقات المستندة إلى المتصفح أو تطبيقات الجوال الأصلية أو تطبيقات سطح المكتب.
  • تريد استخدام خادم مصادقة يحتفظ بتتبع الرموز tokens.

الدروس السابقة :

  1. المستوى الثاني من Angular 
  2. انشاء واختيار api مع قاعدة البيانات mysql - Angular 
  3. انشاء وتمهيد مشروع الدورة angular 
  4. دمج bootstrap & jquery داخل مشروع angular 
  5. انشاء الصفحة الرئيسية للتطبيق angular 
  6. ماهو الفرق بين API و REST API وماهي وظفتهما - angular
  7. عرض قائمة users وجلبها عبر API من قاعدة البيانات 
  8. انشاء مستخدم جديد والتعرف على الـ CREATE في API 
  9. تعديل بيانات المستخدم والتعرف على كيفية تمرير parameters بالمكون

تعليقات