كيف تحمي بيانات المستخدمين من الإختراق عن طريق Salted Password Hashing


مستوى المقال: متوسط

بسم الله الرحمن الرحيم

كيف تحمي بيانات المستخدمين من الإختراق عن طريق

Salted Password Hashing

 

مقدمة:

إذا كنت مطور تطبيقات ففي الغالب أنك أنشأت في نظامك جزء خاص بإدارة حسابات المستخدمين (User Account Management). ما يهمنا هنا هو كيفية حماية بيانات المستخدمين في قاعدة البيانات. كما لا يخفى على الجميع أن الكثير من المواقع أو التطبيقات المشهورة تعرضت للإختراق وتم الحصول على بيانات المستخدمين. فما هي الطريقة المناسبة لحماية كلمات المرور أو بيانات المستخدمين البنكية. سنركز هنا على كلمات المرور والفكرة واحدة.

الطرق المختلفة لحفظ المرور في قاعدة البيانات:

-         حفظ كلمة المرور كنص واضح (Plaintext)

-         تشفير كلمة المرور ثم حفظ النص المشفر (Ciphertext)

-         استخدام الـ Hashing.

-         استخدام Salted Password Hashing

 

حفظ كلمة المرور كنص واضح (Plaintext)

هذه الطريقة هي أبسط الطرق وهي عملية حفظ كلمة المرور كما أدخلها المستخدم. مثلا أدخل 123 فهي تحفظ في قاعدة البيانات كما هي (123). فإذا نسيت كلمة المرور وطلبت من الموقع الذي أنت عضو فيه استعادة كلمة المرور فتم إرسال كلمة المرور كما هي على بريدك الالكتروني فهذا الموقع يستخدم هذه الطريقة أو الطريقة الثانية.

هذه الطريقة خطيرة جدا فأبسط عملية اطلاع على قاعدة البيانات يستطيع المخترق أن يعرف كلمة مرور أي مستخدم أو عضو مسجل. فأبتعد عن هذه الطريقة.

 

تشفير كلمة المرور ثم حفظ النص المشفر (Ciphertext)

كما نعرف جميعا أن التشفير في أبسط تعريف له هو عملية تحويل المعلومات من صيغتها الحقيقة المفهومة إلى صغية غير مفهومة. أو تحويلها من صيغها الحقيقية إلى صيغة أخرى.

ويتم ذلك عن طريق أحد أنواع التشفير التالية:

-         التشفير المتناظر/ المتماثل (Symmetric key / Private key)

حيث يتم التشفير (Encryption) وفك التشفير (Decryption) بنفس المفتاح.

-         التشفير الغير متناظر/ الغير متماثل (Asymmetric / Public key)

هنا يتم التشفير بالمفتاح العام (Public Key) ويتم فك التشفير بالمفتاح الخاص (Private Key) ويكون المفتاح العام معروف عند الجميع أما المفتاح الخاص فلا يعرفه إلا المالك نفسه. أما إذا عكسنا العملية فتم التشفير بالمفتاح الخاص وتم فك التشفير بالمفتاح العام (التحقق من المرسل) فهذا يسمى التوقيع الإلكتروني (Digital Signature).

 

موضوع التشفير وأنواعه لا تهمنا حاليا. ما يهمنا هنا هو عملية تشفير كلمة المرور ثم حفظها في قاعدة البيانات.

مثال: لنفرض أن خوارزمية التشفير هي الإزاحة (The Shift Cipher) وأن مفتاح التشفير هو الازاحة 3 خانات.

Encryption.png.5933075457a33f3cd4860d02ad55ec00.png

 

كما نلاحظ تتمت الإزاحة 3 خانات لكل حرف من النص الأصلي فمثلا 123 تصبح 456.

ففي هذه الطريقة يتم حفظ 456 في قاعدة البيانات ولو تكرر أن مستخدم أخر يستخدم كلمة المرور 123 فتصبح أيضا 456 مخزنة في قاعدة البيانات.

هذه الطريقة أصعب قليلا من الطريقة الأولى ولكن أيضا غير عملية فلو تم اكتشاف مفتاح التشفير فستصبح قاعدة البيانات واضحة ويمكن الحصول على كل كلمات المرور الخاصة بالمستخدمين.

يمكن تعقيد هذه الطريقة في حال أصبح لكل مستخدم مفتاح عام (Public key) ومفتاح خاص (Private Key) ولكن يصعب تنفيذ هذه الطريقة فأنت تحتاج لنظام لإنشاء مفاتيح للمستخدمين. فعند تسجيل المستخدم يتم تشفير كلمة المرور الخاصة به بالمفتاح العام. وعندما يقوم المستخدم بعملية تسجيل الدخول فيجب أن يكتب أو يرفق المفتاح الخاص به وهذا ينافي مبدأ التشفير الغير متناظر حيث يمكن معرفة المفتاح الخاص.

 

استخدام الـ Password Hashing

هذه الطريقة مستخدمة في العديد من المواقع وهي طريقة عملية ويصعب نوعاً ما أكتشاف كلمات المرور المخزنة في قاعدة البيانات عندما نستخدم هذه الطريقة. ولكن تظل طريقة لها العديد من الطرق التي تخترقها خصوصا في ظل تقدم التقنيات والأجهزة ذات المواصفات العالية.

ما هو الـ Hashing :

هو أحد علوم الـ (Cryptography) ولكن ليس تشفير (Encryption). فهي طريقة وحيدة الإتجاه (One way function) والتي تقوم بتحويل النص مهما كان طوله إلى نص ثابت (fixed-length). ولا يمكن إرجاع النص الناتج إلى النص الأصلي. أي لا يوجد فك للتشفير.

الفرق بين الـ Hashing  و التشفير (Encryption) ؟

عندما نشفر الكلمة 123 فتصبح 456 فإننا نستطيع فك التشفير من 456 لتعود إلى 123. ولكن في الـ Hashing عندما نحول 123 إلى 456 فلا يمكن إعادة 456 إلى النص الأصلي 123.

Hashing1.png.c66c4f29375bc668a5051ed2e6ba7622.png

 

كما نلاحظ في الشكل السابق أن النص الناتج من عملية الـ Hashing  نص ثابت الطول (10) خانات مهما أختلف طول النص في النص الأصلي في الجهة اليسار. أيضا نلاحظ أن 123 كانت عملية الـ Hashing  لها واحدة (Fdeom83nyU) مهما تكررت يكون الناتج واحد.

خوارزميات الـ Hashing:

يوجد العديد من خوارزميات الـ Hashing من أشهرها:

·         MD5   Message Digest Algorithm 5

·         SHA-1,SHA-2,SHA-3  Secure Hash Algorithm

·         BLAKE and BLAKE2

 

59306ce34ba31_Listofalg.thumb.png.40d35d3f3416bc9a23a4fccb1f443069.png

 

كيف يتم كسر كلمات المرور؟

في البداية يمكن إكتشاف كلمة المرور دون النظر إلى كيفية تخزينها في قاعدة البيانات هل هي بنص واضح أو مشفرة أو تم عمل Hashing  لها. وهناك خيارين ليتم كسر أو كشف كلمة المرور أو أي بيانات حساسة.

-         أن يتم الدخول على خوادم أي موقع أي أنه تم تجاوز عدة تحصينات سابقة وتم الحصول على قاعدة البيانات خصوصا جدول المستخدمين مثلا. فهنا إما أن تكون الكلمة مخزنة بشكل واضح وهذه بسيطة. أو تكون مشفرة أو Hashed Password. فهنا يتم التعامل معها بإحدى الطرق التي بالأسفل.

-         أو يكون المخترق لديه اسم المستخدم ويحاول الحصول على كلمة المرور. بمعنى أنه لا يمتلك قاعدة البيانات ولا يعرف الشكل الذي به تم حفظ كلمة المرور.

في الخيار الأول غالب يتم استخدام الأختراق الغير مباشر (Offline Attack)  بمعنى أن المخترق لديه كلمة مشفرة أو Hashed ويريد معرفة الكلمة الأصلية (Plaintext) فهنا يتم استخدام برامج تعتمد على الطرق التي بالأسفل لكي يحصل على الكلمة الأصلية دون التعامل المباشر مع الموقع الأصلي الذي تم اختراقه مسبقاً.

وغالبا في الخيار الثاني يتم استخدام الاختراق المباشر (Online Attack) حيث يكون لدى المخترق اسم المستخدم ويقوم بإستخدام برامج أيضا تعتمد على الطرق التي بالأسفل ويتم إرسال طلبات إلى الموقع المسجل لديه بيانات المستخدم.

كما عرفنا سابقا أن Hashing  وحيدة الإتجاه (One way function) أي لا يمكن إعادة النص الأصلي (Plaintext). ومع ذلك فإنه يمكن أن تكتشف الكلمة الأصلي ويتم ذلك بعدة طرق. وهذه الطرق إما أن تعتمد على مبدأ التخمين أو البحث في قاعدة بيانات كبيرة (جدول) تحتوي على العديد من كلمات المرور مع الـ hash  المقابل لها. ويتم ذلك ضمن خورزميات وعمليات حسابية طويلة ومقعدة لتضمن فعالية هذه الطرق.

ومن هذه الطرق:

1-    Dictionary Attack

هذه الطريقة تعتمد على مبدأ التخمين (Guessing ) حيث يكون هناك ملف يحتوي على قائمة كبيرة من الكلمات المستخدمة أو المشهورة بإنها تستخدم ككلمة مرور. أو تكون هذه القائمة متوقعة بالنسبة لشخص محدد مثل تاريخ الميلاد رقم الهاتف الخ. ويمكن استخدام هذه الطريقة من خلال (Online Attack) أو (Offline Attack) وفي الـ Offline Attack  تقوم بعض البرامج أثناء التنفيذ بعمل الـ Hash  المقابل لكل كلمة في الملف ويتم مقارنتها مع الHashed Password  التي يمتلكها المخترق وفي حال التطابق يتم معرفة كلمة المرور الأصلية.

 

مثال: لنفرض أن المخترق لديه هذا الحساب [email protected] وكلمة المرور هي Car ( بالتأكيد لا يعرفها المخترق). ستتم هذه الطريقة حسب الملف الذي يمتلكه المخترق (الشكل بالأسفل)

table1.png.7c970d025be7dbb5388eb647b6f361b1.png

         ستتم تجربة كلمات الملف كالتالي

table2.png.3da2e58f2b6505e4a30bc26b0f88aa25.png

 

 

2-    Brute Force Attack

هذه الطريقة شبيهه بالطريقة السابقة حيث أنها تعتمد أيضا على التخمين ولكن التخمين بالاعتماد على عمليات حسابية حيث يتم تجربة كل الاحتمالات الممكنة مثلا تجربة كل الاحتمالات لكلمة مرور ذات طول 6 خانات عبارة عن أرقام أو أحرف. فهنا الموضوع لا يعتمد على جدول أو ملف إنما تجربة أثناء وقت التنفيذ. وهذه الطريقة تأخذ وقت طويل يزيد وينقص حسب طول كلمة المرور.

 

مثال : لنفرض أن المخترق لديه هذا الحساب [email protected] وكلمة المرور هي  111333 ( بالتأكيد لا يعرفها المخترق).

تعمل هذه الطريقة بهذا الشكل:

table3.png.2631edc9d06ab26249224eb0d95a7b8b.png

سيتم تجربة كل الاحتمالات الممكنة حتى يصل إلى كلمة المرور. وقد تستمر إلى وقت طويل جداً حتى يتم إيجاد كلمة المرور. أيضا هنا تم استخدام (Online Attack) حيث أن المخترق يرسل للخادم في كل مرة اسم المستخدم مع احتمال لكلمة المرور بشكل متسلسل.

 

ويمكن استخدام الـ (Offline Attack) إذا كانت كلمة المرور محفوظة كـ Hash حيث يكون لدى المخترق الـ Hashed Password فيمكن اكتشاف كلمة المرور بنفس الطريقة ولكن يتم أولا عمل Hash   أُثناء التنفيذ لكل سلسلة من الحروف ثم مقارنتها مع الـ Hashed Password. لنفرض أن المخترق لديه هذه الكلمة (Hashed Password) التالية:

62b37844f7adeb0df6f180126327dca339fb7003

table4.png.4faa4265ff1a601392edb6b248acf8c7.png

 

 

3-    Lookup Tables
أو ما يسمى (Pre-Computed dictionary attack) لنعرف أولا معنى Pre-Computed أو

Precomputation  يقصد بها:

عملية تجهيز الجدول قبل وقت التنفيذ (Run Time) ففي الطريقة السابقة (Dictionary attack) لدينا قائمة كبيرة من الكلمات وفي الـ (Offline Attack) يتم عمل Hash  لكل كلمة من القائمة أثناء التنفيذ ومقارنتها مع الكلمة التي يتملتكها المخترق (Hashed Password) فهذه الطريقة تأخذ وقت كبير ولكن هنا يتم إعداد جدول أو قائمة يكون مقابل كل كلمة الـ Hash  الخاص بها حسب خوارزمية الـ Hashing.

وهذا الجدول يستفيد منه المخترق دائما دون عمل الـHash  مرة أخرى لكل كلمة أثناء التنفيذ. وتكون العملية فقط بحث عن الـ Hash  المطابقة للكلمة التي لدى المخترق ففي حالة التطابق يتكون كلمة المرور هي المقابلة للـ Hash

 

مثال: لنفرض أن لدى المخترق هذه الـ Hashed Password

e9989db5dabeea617f40c8dbfd07f5fb

ولديه هذا الجدول ( هذا الجدول تم إنشائه مسبقا Pre-Computed ) وليس أثناء وقت التنفيذ.

table5.png.93c18cf95d33fc4f2d0efcad29258b5e.png

 

فالعملية هي عملية بحث أو استعلام عادية للحصول على الـ Hash  الموجودة في الجدول والمطابقة لما لدى المخترق (e9989db5dabeea617f40c8dbfd07f5fb). وهنا تكون كلمة المرور الأصلية هي Car.

وطبعا هذه الطريقة تختصر الوقت لكن تعتمد كفائتها على كمية الكلمات الموجودة في الجدول.

 

يوجد بعض البرامج التي تقوم بإنشاء هذه الجداول حسب بعض المعطيات لدى المخترق ( أي لا يشترط أن يكون هناك قائمة جاهزة للكلمات المشهورة إنما يمكن إنشائها) من هذه المعطيات أن يتم إنشاء جدول (Lookup tables) للكلمات ذات الطول من 1 إلى 7 خانات وتكون عبارة عن أرقام فقط. ويمكن أن تكون أرقام أو حروف أو رموز. كلما زادت المعطيات زاد وقت إنشاء هذه الجداول وزادت مساحة التخزين.

 

4-    Rainbow Tables

هو نوع مخصص من Lookup table بنفس الفكرة والاعتماد على (precomputation ). ولكن تعمل تحت مبدأ (space/time trade-off) وهذا يعني زيادة مساحة التخزين في سبيل تقليل وقت التنفيذ أو وقت الحصول على النتيجة. ولكن وقت التنفيذ أقل من Brute Force Attack وكذلك مساحة التخزين أقل من Lookup table.

59306f908b70f_Rainbowtable.thumb.png.e0f13a4f8fa2842cf0c7ea27e5ad8ff6.png

 

الفرق بين الـ Rainbow table و Lookup table هو في طريقة إنشاء جدول الكلمات حيث يعتمد الـ Rainbow table على دالة الاختزال أو التقليص (Reduction function) والتي تعمل على تقليل حجم الجدول الناشئ حيث يتم استبعاد حفظ بعض كلمات المرور والـ Hash  المقابل لها. شرح التفاصيل الخاصة بالـ Rainbow table and Reduction function يحتاج موضوع مستقل. لكن سأذكر في النهاية بعض المواضيع التي تشرحها بشئ من التفصيل.

 

ملاحظة: تم توضيح الطرق السابقة في أبسط صورها وقد تم إضافة الكثير من التحسينات وتم استخدام خوارزميات معقدة تزيد من فعاليتها. ومعرفة هذه الطرق وتفاصيلها أحد الأسباب الرئيسية لحماية بياناتك أو حماية بيانات المستخدمين لديك  وتساعدك في فرض عدة قيود صلبة تجعل عملية الإختراق صعبة أو شبه مستحيلة.

 

استخدام الـ Salted Password Hashing

هذه الطريقة هي الهدف الرئيسي من هذا الموضوع. كما ذكرنا سابقاً أن عملية الـ Hashing  للكلمة 123 هو  Fdeom83nyU ( مثال فقط) فهنا كلما تكررت 123 ككلمة مرور لأي مستخدم ستكون النتيجة هي Fdeom83nyU وهذه النقطة تساعد المخترق على محاولة إستنتاج كلمة المرور من النص Fdeom83nyU بإستخدام الطرق السابقة أو غيرها. أما طريقة Salted Password تعمل على أن يكون الـ Hash للكلمة 123 مختلف في كل مرة وذلك بإضافة نص عشوائي للكلمة الأصلية 123 ثم عمل الـ Hashing  لها كما في الشكل التالي:

5930700017990_SaltedPassword.png.3cc491089054e618a99526ddd42ffb8f.png

 

نلاحظ في الشكل السابق إختلاف الناتج من عملية الـ Hashing في كلمة مرور حتى وإن كانت كلمة المرور واحدة.

الهدف من الكلمة Salt والتي تعنى ملح هو شيء مشابه للفائدة من الملح وهو تحسين الطعام أيضا هنا النص المضاف Salt يعني إضافة نص عشوائي إلى كلمة المرور الأصلية لتحسينها حتى تكون قوية يصعب كسرها أو إكتشافها.

طريقة عمل Salted Password Hashing:

أولا في مرحلة تسجيل البيانات حيث يقوم المستخدم بتعبئة بياناته على الموقع ثم يقوم بالحفظ. حيث تتم الخطوات التالية:

1-    يدخل المستخدم كلمة المرور لنفرض 123

2-    يقوم البرنامج بإنشاء نص مضاف (Salt) بشكل عشوائي لنفرض Nd29kd63w1po

3-    يتم دمج كلمة المرور مع النص العشوائي المضاف لتصبح 123Nd29kd63w1po

4-    يتم عمل Hash للنص 123Nd29kd63w1po وسيكون الناتج jdhsi3jf92 ( طبعا النص أطول من ذلك حسب خوارزمية الـ Hash  ).

5-    يتم حفظ الناتج jdhsi3jf92 و النص العشوائي المضاف Nd29kd63w1po في قاعدة البيانات مع بيانات المستخدم الأخرى كالبريد الالكتروني والاسم ..الخ.

 

ثانيا عند تسجيل الدخول يتم التالي:

1-    يُدخل المستخدم اسم المستخدم وكلمة المرور لنفرض 123

2-    يتم الاستعلام عن بيانات المستخدم بواسطة اسم المستخدم من قاعدة البيانات للحصول على الـ Salt  و الـ Hashed Password ونفرض أن Salt هو  Nd29kd63w1po والـ Hashed Password هي jdhsi3jf92.

3-    يتم دمج كلمة المرور المدخلة 123 مع النص Salt وهو Nd29kd63w1po لتصبح 123Nd29kd63w1po  ثم يتم عمل Hashing  لها ليصبح الناتج jdhsi3jf92

4-    ثم يتم مطابقة النص الناتج jdhsi3jf92 مع كلمة المرور المخزنة في قاعدة البيانات Hashed Password وهي jdhsi3jf92 وفي حال التطابق يتم تسجيل الدخول.

 

نصائح مهمة عند عمل Salted Password Hashing:

1-    عدم إعادة استخدام الـ Salt   نفسه مع كل كلمة مرور حيث يجب أن يكون عشوائي مع كل كلمة مرور.

2-    لا تستخدم Salt قصير يجب أن يكون نص عشوائي طويل على الأقل 16 حرف ( أيضا يمكنك الاعتماد على نوع خوارزمية الـ Hash لتحديد طول الـ Salt )

3-    استخدام خوارزميات الـ Hash  مثل (MD5,SHA1,SHA2,SHA3) في Salted Password Hashing يعتبر آمن ولكن هذه الخورزميات تعتبر قديمة والمخترقين لديهم عدة طرق لكسر كلمات المرور التي تم إنشائها بواسطتها وحتى مع وجود الـ Salt هي مجرد مسألة وقت ويمكن كسرها. لذلك يفضل عدم استخدامها بل استخدام (password-based key derivation function) مثل  PBKDF2, bcrypt, scrypt

4-    لا تقوم بإنشاء دالة خاصة تقوم بتوليد (Generate)  نص عشوائي Salt بل يفضل استخدام الدوال الجاهزة حسب لغة البرمجة كما في الشكل التالي:

5930705d55ed1_RandMethods.png.be782bc776035bc83bd32452eef53660.png

 

تطبيق: بلغة (ASP.Net (C#,VB)) مع قاعدة البيانات SQL Server

الفكرة:

سيتم إن شاء الله إنشاء تطبيق بسيط لعملية تسجيل أو إنشاء المستخدمين أيضا تسجيل الدخول. حيث يقوم المستخدم بتعبئة بياناته في صفحة التسجيل (Registration) وهي اسم المستخدم و الاسم كاملأ وكلمة المرور. ثم يقوم البرنامج بعمل Salted Password ( الـ Salt و Hashed Password  ) ثم يتم حفظ البيانات في قاعدة البيانات. وعندما تتم عملية التسجيل يمكن للمستخدم تسجيل الدخول عن طريق صفحة الدخول (Login) حيث يتم كتابة اسم المستخدم وكلمة المرور حسب الخطوات التي تم ذكرها بالأعلى في جزئية طريقة عمل  Salted Password Hashing.

التطبيق يعتمد على PBKDF2.

وهي خورازمية للـ (Password-Based Key Derivation Function) وليست للـ Hashing  بشكل مباشر مثل (MD5,SHA) والهدف منها استخدام إحدى خوارزميات الـ Hashing  المباشرة ولكن بطريقة تعمل على زيادة قوة الـ Hash  الناتج من كلمة المرور الأصلية بحيث يصعب كسر أو إكتشاف كلمة المرور من خلال Rainbow tables  أو Brute force attack.

ويتم ذلك من خلال  عدة نقاط  مثل طول الـ Salt  أيضا عدد الـ Iterations والذي يعمل على تحسين الـ Hash  الناتج من كلمة المرور الأصلية. لنفرض أن عدد الـ هو Iterations 30000 هنا تتم عملية التحسين 30000 مرة  وهذا مما يزيد في صعوبة إكتشاف كلمة المرور ولكن من الطبيعي يكون هناك بطئ أثناء وقت التفيذ حسب عدد الـ  Iterations. سأذكر إن شاء الله  في نهاية الموضوع بعض المصادر التي تشرح key derivation function و PBKDF2 وكذلك Key stretching.

 

الـ PBKDF2 في الـ .Net  يمكن استخدام الـ Rfc2898DeriveBytes والذي يعتمد على SHA-1.

 

قاعدة البيانات:

تم إنشاء جدول للمستخدمين يحتوى على عدة حقول كما في الشكل أدناه.

db_UsersAccounts.png.3ab1225aa2638fafad0a0e2448c201ae.png

CREATE TABLE UsersAccounts
(
	Username nvarchar(30)  PRIMARY KEY,
	FullName nvarchar(200) NOT NULL,
	Salt nvarchar(100) NOT NULL,
	HashedPassword nvarchar(100) NOT NULL
)

 

الفئات (Classes)

نحتاج لـ Two Classes  الأول خاص بقاعدة البيانات (SQLHelper) والثاني خاص بالـ Hashing  وهو (SaltedPassword) وهذا الأخير و لب هذا التطبيق.

 

فئة (Class) للتعامل مع قاعدة البيانات (SQLHelper)

يحتوي على دالتين

-         دالة الاستعلام حيث يتم إرسال جملة الإستعلام ويتم حفظ النتائج في جدول (DataTable)

-         دالة تنفيذ جمل الإضافة والتعديل والحذف ويتم من خلالها إرسال البيانات وحفظها في قاعدة البيانات.

SQLHelper Class

C#

using System;
using System.Data;
using System.Data.SqlClient;

public class SQLHelper
{
    public SQLHelper()
    {
        //
        // TODO: Add constructor logic here
        //
    }
    public static readonly string ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString1"].ConnectionString;

    // Select Queries
    public static DataTable ExecuteQuery(string commandText, CommandType commandType, SqlParameter[] parameters)
    {
        DataTable table = new DataTable();
        try
        {
            // ConnectionString كائن الإتصال مسؤول عن فتح وإغلاق الاتصال بقاعدة البيانات حسب المسار في 
            using (SqlConnection connection = new SqlConnection(ConnectionString))
            {
                // كائن الأوامر يتم من خلاله تجهيزة جملة الاستعلام والإضافة ليتم تنفيذها على قاعدة البيانات
                using (SqlCommand command = new SqlCommand(commandText, connection))
                {
                    // تحديد نوع كائن الأوامر
                    // Text: like (Select * from table ...)
                    // StoredProcedure: will be the name of StoredProcedure
                    command.CommandType = commandType;
                    // هي القيم التي يتم تمريرها مثل رقم الطالب والتي تكون مدخله من المستخدم parameters الـ 
                    if (parameters != null)
                        command.Parameters.AddRange(parameters);

                    connection.Open();
                    // DataSet مسؤول عن تعبئة النتائج في جدول أو
                    SqlDataAdapter adapter = new SqlDataAdapter(command);
                    adapter.Fill(table);
                }
            }

        }
        catch (Exception ex)
        {
            EventsLogger.SaveToLog(ex.Message);
            return null;
        }
        return table;
    }

    // Insert,Update and Delete
    public static bool ExecuteNonQuery(string commandText, CommandType commandType, SqlParameter[] parameters)
    {
        try
        {
            using (SqlConnection connection = new SqlConnection(ConnectionString))
            {
                using (SqlCommand command = new SqlCommand(commandText, connection))
                {
                    command.CommandType = commandType;
                    if (parameters != null)
                        command.Parameters.AddRange(parameters);

                    connection.Open();
                    if (command.ExecuteNonQuery() > 0)
                    {
                        return true;
                    }
                    else
                        return false;
                }
            }

        }
        catch (Exception ex)
        {
            EventsLogger.SaveToLog(ex.Message);
            return false;
        }

    }
}

VB.Net

Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Data.SqlClient

Public Class SQLHelper

    Private Shared ConnectionString As String = System.Configuration.ConfigurationManager.ConnectionStrings("connectionString1").ConnectionString

    'Select Queries
    Public Shared Function ExecuteQuery(commandText As String, commandType As CommandType, parameters As SqlParameter()) As DataTable
        Dim table As New DataTable()
        Try
            Using connection As New SqlConnection(ConnectionString)
                Using command As New SqlCommand(commandText, connection)
                    command.CommandType = commandType
                    If parameters IsNot Nothing Then
                        command.Parameters.AddRange(parameters)
                    End If

                    connection.Open()
                    Dim adapter As New SqlDataAdapter(command)
                    adapter.Fill(table)
                End Using

            End Using
        Catch ex As Exception
            EventsLogger.SaveToLog(ex.Message)
            Return Nothing
        End Try
        Return table
    End Function


    ' Insert,Update and Delete
    Public Shared Function ExecuteNonQuery(commandText As String, commandType As CommandType, parameters As SqlParameter()) As Boolean
        Try
            Using connection As New SqlConnection(ConnectionString)
                Using command As New SqlCommand(commandText, connection)
                    command.CommandType = commandType
                    If parameters IsNot Nothing Then
                        command.Parameters.AddRange(parameters)
                    End If

                    connection.Open()
                    If command.ExecuteNonQuery() > 0 Then
                        Return True
                    Else
                        Return False
                    End If
                End Using

            End Using
        Catch ex As Exception
            EventsLogger.SaveToLog(ex.Message)
            Return False
        End Try

    End Function

End Class

 

فئة (Class) للتعامل مع الـ (Salted Password Hashing)
يحتوي على ثلاثة دوال:

-         دالة لإنشاء النص العشوائي المضاف Salt  .وهي GenerateSalt

-         دالة لعمل الـ Hash . وهي HashPasswordUsingPBKDF2

-         دالة للمطابقة عند تسجيل الدخول للتحقق من اسم المستخدم وكلمة المرور. وهي VerifyPassword

 

SaltedPassword Class

C#

using System;
using System.Security.Cryptography;

public class SaltedPassword
{
	public SaltedPassword()
	{
		//
		// TODO: Add constructor logic here
		//
	}
    private const int pbkdf2NoOfIterations = 30000;
    private const int hashSize = 32; 
    private const int saltSize = 32;

    /// <summary>
    /// Hashing دالة لإنشاء نص عشوائي ليتم إضافته إلى كلمة المرور قبل عملية الـ 
    /// </summary>
    /// <returns></returns>
    public static string GenerateSalt()
    {
        RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
        byte[] salt = new byte[saltSize];
        rng.GetBytes(salt);
        return Convert.ToBase64String(salt);
    }
    /// <summary>
    /// Hash دالة تقوم بإنشاء كلمة المرور كـ 
    /// </summary>
    /// <param name="Password">كلمة المرور الأصلية التي أدخلها المستخدم</param>
    /// <param name="Salt"> النص المضاف التي تم إنشائه سابقا</param>
    /// <returns></returns>
    public static string HashPasswordUsingPBKDF2(string Password,string Salt)
    {
        byte[] bSalt = Convert.FromBase64String(Salt);
        Rfc2898DeriveBytes PBKDF2 = new Rfc2898DeriveBytes(Password, bSalt, pbkdf2NoOfIterations);
        byte[] key = PBKDF2.GetBytes(hashSize);
       
        return Convert.ToBase64String(key);

    }
  
    
    /// <summary>
    /// دالة للتحقق من كلمة المرور المدخلة أثناء تسجيل الدخول
    /// </summary>
    /// <param name="UserPassword">كلمة المرور المدخلة من قبل المستخدم أثناء تسجيل الدخول</param>
    /// <param name="Salt">النص المضاف المحفوظ في قاعدة البيانات</param>
    /// <param name="HashedPassword">Hash كلمة المرور التي تم حفظها في قاعدة البيانات كـ </param>
    /// <returns></returns>
    public static bool VerifyPassword(string UserPassword, string Salt,string HashedPassword)
    {
        string hash = HashPasswordUsingPBKDF2(UserPassword, Salt);
        // المقارنة بين القيمتين للتأكد من صحة كلمة المرور
        // New Hash with Hashed Password (from Database)
        if (String.Compare(hash, HashedPassword, false) == 0 )
            return true; // كلمة المرور صحيحة
        else
            return false;
       
    }


}

VB.Net

Imports Microsoft.VisualBasic
Imports System.Security.Cryptography

Public Class SaltedPassword

    Private Const pbkdf2NoOfIterations As Integer = 30000
    Private Const hashSize As Integer = 32
    Private Const saltSize As Integer = 32

    ''' <summary>
    ''' Hashing دالة لإنشاء نص عشوائي ليتم إضافته إلى كلمة المرور قبل عملية الـ 
    ''' </summary>
    ''' <returns></returns>
    Public Shared Function GenerateSalt() As String
        Dim rng As New RNGCryptoServiceProvider()
        Dim salt As Byte() = New Byte(saltSize - 1) {}
        rng.GetBytes(salt)
        Return Convert.ToBase64String(salt)
    End Function

    ''' <summary>
    ''' Hash دالة تقوم بإنشاء كلمة المرور كـ 
    ''' </summary>
    ''' <param name="Password">كلمة المرور الأصلية التي أدخلها المستخدم</param>
    ''' <param name="Salt"> النص المضاف التي تم إنشائه سابقا</param>
    ''' <returns></returns>
    Public Shared Function HashPasswordUsingPBKDF2(Password As String, Salt As String) As String
        Dim bSalt As Byte() = Convert.FromBase64String(Salt)
        Dim PBKDF2 As New Rfc2898DeriveBytes(Password, bSalt, pbkdf2NoOfIterations)
        Dim key As Byte() = PBKDF2.GetBytes(hashSize)

        Return Convert.ToBase64String(key)

    End Function


    ''' <summary>
    ''' دالة للتحقق من كلمة المرور المدخلة أثناء تسجيل الدخول
    ''' </summary>
    ''' <param name="UserPassword">كلمة المرور المدخلة من قبل المستخدم أثناء تسجيل الدخول</param>
    ''' <param name="Salt">النص المضاف المحفوظ في قاعدة البيانات</param>
    ''' <param name="HashedPassword">Hash كلمة المرور التي تم حفظها في قاعدة البيانات كـ </param>
    ''' <returns></returns>
    Public Shared Function VerifyPassword(UserPassword As String, Salt As String, HashedPassword As String) As Boolean
        Dim hash As String = HashPasswordUsingPBKDF2(UserPassword, Salt)
        ' المقارنة بين القيمتين للتأكد من صحة كلمة المرور
        ' New Hash with Hashed Password (from Database)
        If [String].Compare(hash, HashedPassword, False) = 0 Then
            Return True
        Else
            ' كلمة المرور صحيحة
            Return False
        End If

    End Function


End Class

 

صفحة التسجيل (Registration.aspx)

Registration.png.25fba163e0ef06a7ac7665db77b17bcd.png

 

Design

 <div class="center" dir="rtl">
        <table class="center">
            <tr>
                <td class="td">اسم المستخدم:</td>
                <td>
                    <input id="txtUsername" type="text" runat="server" class="textBox" maxlength="20" required="required" /></td>
            </tr>
            <tr>
                <td class="td">الاسم:</td>
                <td>
                    <input id="txtName" type="text" runat="server" class="textBox" maxlength="200" required="required" /></td>
            </tr>
            <tr>
                <td class="td">كلمة المرور:</td>
                <td>
                    <input id="txtPassword" type="password" runat="server" class="textBox" maxlength="20" required="required" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="كلمة المرور يجب أن تكون 8 خانات وخليط من الارقام والحروف الصغيرة والكبيرة والرموز" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnRegister" runat="server" Text="تسجيل" CssClass="button" OnClick="btnRegister_Click" /></td>
            </tr>
        </table>
        <br />
        <asp:Label ID="lbMessage" runat="server" CssClass="lableMsg"></asp:Label>
    </div>

 

 

الكود بداخل زر التسجيل (btnRegister)

C#

  protected void btnRegister_Click(object sender, EventArgs e)
    {
        try
        {
            string salt = SaltedPassword.GenerateSalt();
            string hashedPassword = SaltedPassword.HashPasswordUsingPBKDF2(txtPassword.Value, salt);

            // Save Into database

            // نستخدم هذه الطريقة للحماية من 
            // Sql Injection
            // command حيث نمرر القيم داخل 
            SqlParameter[] parameters = new SqlParameter[]{
                new SqlParameter("@Username",txtUsername.Value),
                new SqlParameter("@FullName",txtName.Value),
                new SqlParameter("@Salt",salt),
                new SqlParameter("@HashedPWD",hashedPassword),
                };

            // ويفضل استخدام الإجراءات المخزنة
            // Stored Procedures
            if (SQLHelper.ExecuteNonQuery("INSERT INTO UsersAccounts VALUES(@Username,@FullName,@Salt,@HashedPWD)", CommandType.Text, parameters))
                lbMessage.Text = "تم تسجيل البيانات بنجاح";
            else
                lbMessage.Text = "حدث خطأ أثناء تسجيل البيانات";
        }
        catch (Exception ex)
        {
            EventsLogger.SaveToLog(ex.Message);
            lbMessage.Text = "حدث خطأ أثناء تسجيل البيانات";
        }
    }

VB.Net

    Protected Sub btnRegister_Click(sender As Object, e As EventArgs)
        Try
            Dim salt As String = SaltedPassword.GenerateSalt()
            Dim hashedPassword As String = SaltedPassword.HashPasswordUsingPBKDF2(txtPassword.Value, salt)

            ' Save Into database

            ' نستخدم هذه الطريقة للحماية من 
            ' Sql Injection
            ' command حيث نمرر القيم داخل 
            Dim parameters As SqlParameter() = New SqlParameter() {New SqlParameter("@Username", txtUsername.Value), New SqlParameter("@FullName", txtName.Value), New SqlParameter("@Salt", salt), New SqlParameter("@HashedPWD", hashedPassword)}

            ' ويفضل استخدام الإجراءات المخزنة
            ' Stored Procedures
            If SQLHelper.ExecuteNonQuery("INSERT INTO UsersAccounts VALUES(@Username,@FullName,@Salt,@HashedPWD)", CommandType.Text, parameters) Then
                lbMessage.Text = "تم تسجيل البيانات بنجاح"
            Else
                lbMessage.Text = "حدث خطأ أثناء تسجيل البيانات"
            End If
        Catch ex As Exception
            EventsLogger.SaveToLog(ex.Message)
            lbMessage.Text = "حدث خطأ أثناء تسجيل البيانات"
        End Try

    End Sub

 


صفحة تسجيل الدخول (Login.aspx)

Login.png.43cc29ea238c3a639aa08f528837610a.png

 

Design

 <div class="center" dir="rtl">
        <table class="center">
            <tr>
                <td class="td">اسم المستخدم:</td>
                <td>
                    <input id="txtUsername" type="text" runat="server" class="textBox" maxlength="20" required="required" /></td>
            </tr>
            <tr>
                <td class="td">كلمة المرور:</td>
                <td>
                    <input id="txtPassword" type="password" runat="server" class="textBox" maxlength="20" required="required" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="كلمة المرور يجب أن تكون 8 خانات وخليط من الارقام والحروف الصغيرة والكبيرة والرموز" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnLogin" runat="server" Text="تسجيل دخول" CssClass="button" OnClick="btnLogin_Click"/></td>
            </tr>
        </table>
        <br />
        <asp:Label ID="lbMessage" runat="server" CssClass="lableMsg"></asp:Label>
    </div>

 

 

الكود بداخل زر تسجيل الدخول (btnLogin)

C#

 protected void btnLogin_Click(object sender, EventArgs e)
    {
        try
        {
            SqlParameter[] parameters = new SqlParameter[]{
                new SqlParameter("@Username",txtUsername.Value),
                };

            // الحصول أولا على معلومات المستخدم من خلال الاستعلام بإسم المستخدم
            DataTable userInfo =  SQLHelper.ExecuteQuery("SELECT * FROM UsersAccounts WHERE [email protected]", CommandType.Text, parameters);
            if (userInfo == null || userInfo.Rows.Count <= 0)
                lbMessage.Text = "اسم المستخدم أو كلمة المرور غير صحيحة";
            else
            {
                string salt = userInfo.Rows[0]["Salt"].ToString();
                string hashedPassword = userInfo.Rows[0]["HashedPassword"].ToString();
                if (SaltedPassword.VerifyPassword(txtPassword.Value, salt, hashedPassword))
                    lbMessage.Text = "تم تسجيل الدخول بنجاح";
                else
                    lbMessage.Text = "اسم المستخدم أو كلمة المرور غير صحيحة";
            }
        }
        catch (Exception ex)
        {
            EventsLogger.SaveToLog(ex.Message);
            lbMessage.Text = "حدث خطأ أثناء تسجيل الدخول";
        }
    }

VB.Net

Protected Sub btnLogin_Click(sender As Object, e As EventArgs)
        Try
            Dim parameters As SqlParameter() = New SqlParameter() {New SqlParameter("@Username", txtUsername.Value)}

            ' الحصول أولا على معلومات المستخدم من خلال الاستعلام بإسم المستخدم
            Dim userInfo As DataTable = SQLHelper.ExecuteQuery("SELECT * FROM UsersAccounts WHERE [email protected]", CommandType.Text, parameters)
            If userInfo Is Nothing OrElse userInfo.Rows.Count <= 0 Then
                lbMessage.Text = "اسم المستخدم أو كلمة المرور غير صحيحة"
            Else
                Dim salt As String = userInfo.Rows(0)("Salt").ToString()
                Dim hashedPassword As String = userInfo.Rows(0)("HashedPassword").ToString()
                If SaltedPassword.VerifyPassword(txtPassword.Value, salt, hashedPassword) Then
                    lbMessage.Text = "تم تسجيل الدخول بنجاح"
                Else
                    lbMessage.Text = "اسم المستخدم أو كلمة المرور غير صحيحة"
                End If
            End If
        Catch ex As Exception
            EventsLogger.SaveToLog(ex.Message)
            lbMessage.Text = "حدث خطأ أثناء تسجيل الدخول"
        End Try
    End Sub

 

ويكون شكل البيانات في الجدول كالتالي:

5930772450381_Databaseresult.png.89e982a470e4cfe62e551a1675de85d5.png

 

الخلاصة:

موضوع حماية بيانات المستخدمين متشعب كما نلاحظ في بعض النقاط السابقة. حاولت التركيز على الموضوع الرئيسي وهو استخدام الـ Salted Password Hashing وتم المرور على بعض المفاهيم الأخرى التي بعضها الحقيقة يحتاج إلى موضوع مستقل ولكن نسأل الله التيسر حتى استطيع شرح بعض هذه المفاهيم في مواضيع أخرى مثل Rainbow table  أو password-based key derivation function.

خلاصة هذه الموضوع التركيز على هذه النقاط.

-         عند تسجيل بيانات المستخدمين مثل كلمة المرور يجب أن لا تُقبل كلمات المرور القصيرة أو السهلة يفضل إجبار المستخدم على كلمة مرور معقدة.

-         استخدم الـ Salted Password Hashing.

-         العمل بالنقاط الموجودة في جزئية نصائح مهمة عند عمل  Salted Password Hashingالموجودة بالاعلى.

 

مراجع للإطلاع:

-      Salted Password Hashing - Doing it Right

https://www.codeproject.com/Articles/704865/Salted-Password-Hashing-Doing-it-Right

-      How Rainbow Tables work

http://kestas.kuliukas.com/RainbowTables

-      Rainbow Tables

https://stichintime.wordpress.com/2009/04/09/rainbow-tables-part-1-introduction

-      PBKDF2

https://en.wikipedia.org/wiki/PBKDF2

-      Key Derivation Function

https://en.wikipedia.org/wiki/Key_derivation_function

 

تمت بحمد الله.

 

التطبيق في المرفقات

Demo.rar

 

Talal Almutairi

https://twitter.com/talalsql

TALAL ALMUTAIRI

4


اراء المستخدمين




انشئ حساب جديد او قم بتسجيل دخولك لتتمكن من اضافه تعليق جديد

يجب ان تكون عضوا لدينا لتتمكن من التعليق

انشئ حساب جديد

سجل حسابك الجديد لدينا في الموقع بمنتهي السهولة .


سجل حساب جديد

تسجيل الدخول

هل تمتلك حساب بالفعل ؟ سجل دخولك من هنا.


سجل دخولك الان

Ads Belongs To This website

  • ماهي قاعدة بيانات الـMongoDB؟
    في السابق كان الحديث حول قواعدة البيانات المعروفه و المتوارد بين اقطاب المبرمجين من مختلف الأصعدة ابتدا من web developers إلى الـsoftware developers على مختلف المنصات windows, OSX, Linux و جل الحديث كان يدور حول نوع واحد فقط وهو RDBMS Relational database management system مثل  MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access  التي تعتمد في حفظ البيانات داخل جداول ولكن في الآونة الأخيرة و بعد صدور عدد من JS Frameworks  و ارتفاع عدد مستخدمي لغة الجافاسكربت بدأت شركة 10GEN في العمل على قاعدة بيانات من نوع مختلف تماما عما سبق ذكرة وهي NoSQL تحت اسم MongoDB اي قاعدة بيانات لا توجد بها علاقة بين الجداول وتعتمد في حفظ البيانات كمستندات BOSN ويعد هذا النوع الأشهر بين عائلة الـNoSQL وهنا ننوه بأن جميع ما تعرفه عن الـSQL Databases قد يتغير فبالتاكيد لن يكون هناك كوريز بالطريقة التي اعتدت العمل عليها.
     
    1- أمثله
    وبما ان الكثير من المبرمجين لديه خلفية في الـMySQL سأقوم بمقارنة سريعة حول الأختلافات السطحية بين المونجو والـMySQL:
    اسم الـTable في الـMongoDB هو Collection اسم الـRow في الـMongoDB هو Document تعتمد قواعد بيانات الـRDBMS على الجداول كالنحو التالي:
     

     
    بينما قاعدة بيانات الـMongoDB تعتمد على BSON وهذا يعني Binary Encoding Of JSON Objects وتكون كالنحو التالي:
    { "_id" : ObjectId("57fe832b13e6a51130a23d2a"), "ID" : 1, "username" : "abdulla", "email" : "[email protected]" } { "_id" : ObjectId("57fe832b13e6a51130a23d2b"), "ID" : 2, "username" : "omar", "email" : "[email protected]" } { "_id" : ObjectId("57fe832b13e6a51130a23d2c"), "ID" : 3, "username" : "mohammed", "email" : "[email protected]" }  
    امثلة حول الفروقات في عمليات الـQueries مابين الـMongoDB و الـMySQL OR RDBMS ولنفترض بأن لدينا جدول و كولكشن يحتويان على عدد من الصفوف والدوكيومنتس فيهم معلومات حول مستخدمين
    عرض جميع المستخدمين من هم دون السن الـ24 SELECT * FROM users WHERE age < 24 db.users.find({"age": { $lt: 24 }}) // $lt = less than  
    عرض جميع المستخدمين الذين  اعمارهم مابين الـ20 والـ30 SELECT * FROM `users` WHERE `age` BETWEEN 20 AND 30 db.users.find({ age: { $gt: 20, $lt: 30 }}) // $gt = greater than  
    عرض المستخدمين الذين اسمائهم تحتوي على حرف A في الاول او الاخير او المنتصف لايهم SELECT * FROM `users` WHERE username LIKE %A% db.users.find({username: /A/})  
    و في حالة الإضافة INSERT INTO `users` (username,age,status) VALUES ('abdulla',25,'active') db.users.insertOne({username: "abdulla", age: 25, status: "active"})  
    ولكن هناك فارق كبير في هذه الكويري و بما ان قاعدة بيانات الـMongoDB ليست Relational بالتالي ليس هناك Schema محدده عند الإضافه فتستطيع مثلا إضافة document بمتغير col,field ليس موجود في الـdocument السابق او التالي في نفس الـCollection وبهذا يقال للـMongoDB بأن اهم مميزات هذا النوع من قواعد البيانات بأنه Flexible او Dynamic Schema  ومثال على ذلك:
    db.users.insert([ { username: { fname: "abdulla", lname: "bahraini" }, age: 25, status: "active" }, { username: "mohammed", age: 19, status: "not active" } ])  
    2- لماذا التحول الى MongoDB ( وجهة نظر )

     
    كما اسلفنا سابقا ومع صدور عدد من js frameworks وبالاخص Meanjs المعني ب expressjs , angularjs & nodejs بالاضافه الmongodb و توسع هذه الفريموركس بشكل ضخم و رهيب جدا ومنها النود التي اصبحت خطر داهم على لغة الphp مقارنة بالسرعة, الاداء الرهيب وتناغم المونجو مع هذه الفريموركس بشكل افضل سبب في توجه الكثير من المطورين الى المونجو.
     
    ليس عند هذا الحد وحسب بل نظرا الى سرعة المونجو حسب الاحصائيات تبين اهمه الانتقال من قواعد البيانات الاعتيادية الى المونجو.
    تجربة اضافه 10000 صف و دوكيومنت في MySQL و MongoDB .. نلاحظ الفرق في سرعة الاداء احتاج المونجو الى ثانتين لتنفيذ المهمه بينما الMySQL احتاج الى 3 دقائق تقريبا.
     


     
    3-التثبيت
    لتثبيت الـMongoDB قم بالدخول على الرابط واختر ما يناسب نظام جهازك
     
    بعد التثبيت إن كنت  من متسخدمي الوندوز انشأ مجلد في داخل الـC (في حال تم تثبيت المونجو في السي)
     
    أضف المتغير التالي في PATH Environment وتجده في المسار التالي
    this pc >> proprieties >> Advanced System Settings >>  Advanced tab >> Environment Variables >> in System Variables find PATH then Click Edit
     
    افتح الـCMD واكتب الكوماند التالي لتفعيل خدمه الـMongoDB في جهازك وستعمل على بورت 27017 بشكل افتراضي
     
    ثم افتح CMD أخر واكتب الكوماند التالي للدخول على MongoDB SHELL
     

     
    بالتالي ستكون داخل الـMongoDB SHELL وتستطيع التعامل معه من خلال الاوامر المباشرة وللإطلاع اكثر اكتب help
     
    مستوى المقال: مبتدئ

    بواسطه AbdullaScript , في

  • المستوى: مُبتدأ/متوسّط
     
    يُمكن الاستفادة من مكتبة Multer في nodejs لرفع الصور والملفّات إلى السيرفر، فبأسطر برمجية بسيطة يُمكن رفع الملفات التي قام المُستخدم بتحديدها
    let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Teting...") }) app.post("/upload", (req, res)=>{ upload(req,res, (err)=>{ if (err) throw err }) res.send(req.files) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) الكود السابق يقوم باستلام الملفّات التي يُرسلها المستخدم إلى المسار /upload ليقوم برفعها ثم طباعة اسم الملف المُستلم. لكن وبعد تنفيذه قد تتفاجئ بأن عملية الرفع تجري بنجاح، إلا أن الاسم لا يظهر ويتم إرسال مصفوفة فارغة على الرغم من أن عملية الرفع تمّت دون مشاكل.
    السبب في ذلك هو طبيعة Nodejs، والتي سبق وأن تحدّثت عنها في مقال سابق بعنوان "تنفيذ الطلبات بتسلسل وترتيب في Nodejs باستخدام Async/Await". انصحك بقرائته لفهم آلية عمل إطار العمل بشكل كامل.
    ما يحدث على أرض الواقع هو أن النظام يبدأ بالرفع، ولأن تنفيذ المهام في nodejs يتم بشكل متوازي لتجنّب تأخير الرد على طلب المستخدم، سيقوم النظام فورًا بطباعة محتويات مصفوفة الملفّات req.files، التي ستكون فارغة بالفعل لأن النظام لم ينتهي بالأصل من عملية الرفع. والحل في هذه الحالة هو استخدام async/await ليُصبح الكود من الشكل:
    let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Testing Routes.....") }) let uploadPromise = (req, res)=>{ return new Promise((Resolve, Reject)=>{ upload(req,res, (err)=>{ if (err) Reject(err) Resolve() }) }) } app.post("/upload", async(req, res)=>{ try{ await uploadPromise(req, res) res.send(req.files) }catch(uploadErr){ throw uploadErr } upload(req,res, (err)=>{ if (err) throw err }) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) حاول تنفيذ الكود السابق وسترى أن اسم الملف سيظهر دون مشاكل لأن النظام قام أولًا برفع الملف ثم قام بطباعة الاسم، وهذا يعني أن المصفوفة لم تعد فارغة بشكل كامل. الفيديو التالي يشرح الفرق بشكل عملي:
    أما الراغبين بتحديد لاحقة الملف أو قبول نوع مُحدّد من الملفات فهم بحاجة لتعديل بعض جزئيات الكود، ولتجنّب تعقيد الأفكار ما بين Async/Await، سأقوم باستخدا مثال بسيط عن Multer.
    let app = require("express")() let multer = require("multer") let upload = multer({dest: "uploads"}) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) الكود السابق يشرح طريقة رفع ملف إلى مُجلّد uploads باستخدام multer، فعند طلب الرابط domain.com/ باستخدام POST فإن النظام سيأخذ الملف الموجود في الحقل photos وسيقوم برفعه. لكن ماذا لو أردنا تغيير الاسم أو اختيار اللاحقة؟ الأمر يتم من خلال ميثود موجودة داخل multer تُعرف بـ diskStorage ليُصبح الكود من الشكل
    let app = require("express")() let multer = require("multer") let storage = multer.diskStorage({ destination: function(req, file, cb){ cb(null, "uploads") }, filename: function(req, file, cb){ let ext = file.mimetype.split("/") ext = ext[ext.length-1] cb(null, file.originalname + "-"+Date.now()+"."+ext) } }) let upload = multer({storage:storage}) app.get("/", (req, res)=>{ console.log(Date.now()) }) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) قُمنا في الميثود بتعريف خاصيّتين الأولى هي destination الخاصّة بتحديد مكان الرفع، والثانية هي اسم الملف. الشرط الوحيد في الخصائص داخل multer هو استخدام دالة cb، وهي اختصار لـ Call Back لتمرير النتيجة التي نرغب بها.
    في مثالي في الأعلى قُمت بفحص نوع الملف باستخدام الـ mimeType الخاص به، فلو كان صورة سيظهر بالشكل image/jpeg أو image/png وهكذا. بعدها قمت بإضافة تلك اللاحقة للاسم الذي يُمكنك تسميته كيفما تشاء. أما بخصوص رفع نوع واحد من الملفات دونًا عن الغير فهذا مُمكن عبر تعديل السطر الخاص بتعريف upload ليُصبح من الشكل 
    let upload = multer({storage:storage, fileFilter: function(req, file, cb){ if (file.mimetype != "image/jpeg"){ return cb(null, false) } cb(null, true) }}) قُمنا بإضافة ما يُعرف بالـ fileFilter، وهي خاصيّة موجودة في multer قُمنا فيها بفحص نوع الملف مرّة أُخرى عبر mimeType وفي حالة عدم مُطابقة الشروط نقوم برفض الملف من خلال استخدام إعادة الـ callback فارغ مع false. بهذه الحالة سيقفز النظام عن الملف وسيتجاوزه.
    الفيديو التالي يشرح كل شيء
     
    في حالة وجود أي استفسار يُمكن تركه في التعليقات أو مُراسلتي عبر حسابي في تويتر @FerasAllaou
    مستوى المقال: مبتدئ

    بواسطه feras , في

  • السلام عليكم ورحمة الله وبركاته 
    طرحنا مسابقة عالم البرمجة للنقاش الهادف ، و هدفنا إثراء المحتوى العربي في مجال البرمجة ، فاز معنا الطرح المتميز و المفيد حيث قام بتقييم المقالات وترقيتها فريق عالم البرمجة سنذكر بهذه المقالة الفائزين معنا ، و مقالاتهم ، و نشكرهم على ماقدموا من فائدة للجميع ، و إثراء المحتوى العربي في البرمجة.
     
    الفائزون في شهر January 2018
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
     
     
    في الختام:
    هدفنا في موقع عالم البرمجة إثراء المحتوى العربي في مجال البرمجة ، و تعزيز حب المساعدة بين المبرمجين تستطيع كتابة ماتحب في ساحات النقاش ، و يمكن تكون احد الفائزين معنا  بمسابقة عالم البرمجة للنقاش الهادف فهي مازالت مستمره ايضا تستطيع مساعدة المبرمجين بالإجابة عن أسئلتهم ، و حل المشاكل التي تواجههم بقسم سؤال وجواب ؛ لتكون مرجع لبقية المبرمجين شعارنا في عالم البرمجة "إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة." -ابن القيم-  وممكن تستفيد من
    حبيبي القارئ اعلم ان فريق عالم البرمجة يصب كل جهودة لمساعدة المبرمجين الذين يخصصون من وقتهم لنشر العلم المفيد ويساعدون الغير ويارب يقدرنا نوقف معكم ونساعدكم قد مانقدر.
    مستوى المقال: مبتدئ

    بواسطه Ali Majrashi , في

  • بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله، كيف حال الجميع؟ عساكم بألف خير و عافية.
    سأحاول باذن الله البدأ في سلسلة جديدة حول تعلم أساسيات رياكت (React) و (RN = React Native) كما تعلمون هي مكتبة عرض (View) أطلقتها شركة الفيسبوك لبناء واجهاتك البرمجية (User Interfaces)  بطريقة سلسة و سهلة مبنية على نظام (Virtual DOM). و أول نسخة رسمية منها بتاريخ مارس 2013. و لما نقول أنها مكتبة عرض ليست اطار عمل (MVC) ركّز هنا جيّداً أخي القارئ؛ حيث تمثل هي حرف (V) فقط لا تقدم خدمة المتحكم (Controller) و لا (Model).
    بداية تعلمك React يصادفك شئ جديد عند كتابة أول مكوّن (Component's) حيث أنها تعود (returning) بصيغة تشبه صيغة HTML! ربما لم تلاحظها في مكتبات أو أطر عمل أخرى. تسمى بالـ JSX
    فما هي يا ترى JSX ؟ 
    JSX عبارة عن صيغة (syntax) أقول أُخترعت لمكتبة React التي تبدو مشابهة جداً لـ xHTML التي تمكنك من انشاء عناصر واجهتك البرمجية (Create Elements) بسهولة و يسر عن طريقها بدلاً من استعمال وضائف (functions) تستدعيها يدوياً لتنفذ مهمة معيّنة. ربما هذه نقطة مبهمة للبعض لكن ستفهمها بعد قليل باذن الله.
    من المهم أن تعلم أن جميع مكونات React المبنية بصيغة JSX تترجم من شفرة لشفرة (transpiler) الى تعليمات جافاسكربت حقيقية (Real JavaScript) باستخدام مكتبة تدعى بابل (Babel) تقوم بتحويل الرياكت الى شفرة ES5 القديمة لتشتغل على جميع المتصفحات (حتى القديمة منها).
    لنكتب مثالا بسيطاً بالـ JSX : 
    return <span> أهلا بعالم البرمجة! </span>; هل لاحظت سهولة كتابة جملة، و ارجاعها للظهور في المصتفح بكل سهولة مرفقة بكلمة (Return). تخيّل لو كتبناها بصيغة ES5 القديمة؟! 
    return React.createElement( 'span', {}, 'أهلا بعالم البرمجة!'); كم سطراً كتبناه لنعيد الجملة للظهور باستخدام جافاسكربت طبيعية! في هذا المثال استعملنا وظيفة (function) تسمى بـ React.createElement صيغتها كالتالي: 
    React.createElement( string|element, [propsObject], [children...]) ماذا لو أردنا كتابة عدة جمل متفرقة بداخل الشفرة البرمجية! ستكون هكذا بلا شك!
    React.createElement('div', {}, React.createElement('div', {}, 'text1'), React.createElement('div', {}, 'text2', ) ); لكن لسهولة JSX و هذا ما تميّزت به شركة الفيسبوك صراحة في مكتباتها البرمجية، الشفرة السابقة مثلاً باستخدام JSX : 
    function text1() { return <span>text1</span>; } function text2() { return <span>text2</span>; } هنا نستنتج مرة أخرى، أن JSX رائعة جدا و اختزال (shorthand) لكثرة الشفرات البرمجية التي تؤدي نفس الوظيفة. مما يكلفك وقتا اضافيا و كثرة المشاكل (bug's) عند تنقيح برمجياتك و تطبيقاتك؛ هذا كود شامل و أوسع، تلاحظ أنه يمكنك من تقسيم واجهاتك البرمجية عبر مكونات مختلفة و التحكم بها كلٌ على حِدة.
    من الثلاث خصائص المتوفرة في JSX هي : 
    العناصر المتداخلة (Nested elements): حيث يمكنك الجمع بين عدة عناصر (Multiple elements)  في حاوية واحدة (container element) كـ <div> مثل المثال الذي بالأسفل.
    السمات (Attributes): داخل كل عصنر div لك أن تضيف وظائف متعددة كـ (className، selected، style) ..الخ. 
    تعبيرات الجافاسكربت (JavaScript expressions): يمكنك اضافة تعابير (ليست شرطية statements)  داخل JSX كعمليات الحساب و المهم أن تكون ضمن قوسين {} .
    import React from 'react'; class App extends React.Component { render() { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> <div> <h1>{10+1}</h1> </div> <div style={{ height: 10 }}> Hello World! </div> ); } } export default App; في التعبيرات ذكرنا أنه لا يمكن استخدام التعابير الشرطية كـ if و else باستثناء التعبير الشرطي الثلاثي: { i === 1 ? 'true' : 'false' }  مثال : 
    import React from 'react'; class App extends React.Component { render() { const i = 1; return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } } export default App; من النصائح التي أقدمها و لا يجب عليك نسيانها: جميع أسماء المكونات (components) تكتب بحروف صغيرة (lowercase) التي تكون مدمجة بـعناصر HTML أو SVG كـ (div, ul, rect, etc.) و لا تنسى اغلاق العناصر بأوسمتها (Close Every Element) مثال مبسط: 
    // DO THIS: return <br/>; return <input type='password' .../>; return <li>text</li>; // NOT THIS: return <br>; return <input type='password' ...>; return <li>text; هذه أهم أساسيات JSX التي يجب على كل شخص معرفتها لمحبي تعلم ReactJS و RN عموماً. أتمنى تكون مفهومة للجميع. 
    و السلام عليكم.
    مستوى المقال: مبتدئ

    بواسطه عبدالهادي , في

  • بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله وبركاته
    تعرفنا في بداية سلسلة مواضيعنا على طريقة من طرق تخزين البيانات وهي القوائم سواء الأحادية أو الثنائية، كما ونعلم بأن هناك
    طريقة أخرى احفظ مجموعة البيانات وهي أبسط طريقة والتي تتمثل في المصفوفات سواء المصفوفات العادية أو مصفوفات القوائم.
    في هذا الدرس سنتعرف على أحد أفضل الطرق في حفظ البيانات والتي تعتبر من الأفضل من ناحية العرض أو البحث وغيرها
    من الأمور المتعلقة بهذه المجموعة من البيانات. كما هو الحال في القوائم فإن الأشجار لديها أكثر من نوع وكل واحد منهم له خواصة واستخداماته.
    في هذا الدرس سنتعرف على أحد أنواع الأشجار وهو الأشجار الثنائية.
     
    ماذا نقصد بالأشجار الثنائية (Binary Trees):
    هو نوع من أنواع تمثيل البيانات ويتكون من مكونين أساسيين هما العقد (Nodes) و الأقصان (Arcs). 
    عندما نقوم بتمثيل هذه الشجرة فإننا نقلب مفهومها فيكون الجذر (Root) في الأعلى والأقصان في الأسفل.
    سميت بالأشجار الثنائية لأنه كل عقد لديه عقيدين يرتبط فيهم وهما أبنائه ولديه والد واحد.
    هناك بعض المصطلحات التي يجب أن نتعرف عليها قبل الشروع الى صلب الموضوع:
    - العقد (Node): وهو كل عنصر موجود في الشجرة، وهو المكان الذي يتم حفظ البيانات داخله.
    أنواع خاصة من العقد (Nodes):
                   - الجذر (Root): وهو العنصر الذي ليس لديه والد أي أنه أعلى عنصر في الشجرة. وكل شجرة تحتوي على جذر واحد فقط.
                   - الأوراق (Leaves): وهذه هي مجموعة العقد التي ليس لديها أي أولاد. أي أنها في طرف الشجرة.
    - القصن (Arc): هو الرابط الذي يربط العقد بين بعضها وهو ذي اتجاه واحد من الأعلى الى الأسفل.

     
    يختلف مفهوم الشجرة الثنائية Binary Tree  حيث أن بعضها لا تحقق بعض الشروط مما يؤدي بها الى أن تكون عبارة عن قائمة عادية
    لكن الأنواع الأخرى تحتوي على شروط التي تجعلها شجرة فعالة بأكبر قدر ممكن و تسمى بـ Binary Search Tree وهذا اساس جميع ما يلي.
     
    تمثيل الشجرة الثنائية (Binayr Tree):
    ١. عن طريق المصفوفات (ArrayLists): وهذه الطريقة لديها مشاكلها كما ذكراناها سابقاً.
    ٢. عن طريق القوائم الثنائية (Linked lists): وهذه هي الطريق الأمثل لتمثيل الشجر.
     
    أكواد الشجرة الثنائية (Binary Tree):
    أ- إنشاء كلاس خاص بالعقد (Nodes) :
    هذا الكلاس يسمى بـ BSTNode وهو كالتالي:
    public class BSTNode { protected int key; protected BSTNode right, left; public BSTNode(){ this(0); } public BSTNode(int k){ this(k, null, null); } public BSTNode(int k, BSTNode r, BSTNode l){ this.key = k; this.right = r; this.left = l; } public void addRight(BSTNode r){ this.right = r; } public void addLeft(BSTNode l){ this.left = l; } } هذا الكلاس يحتوي على المتغيرات التالية:
    - Key: وهو من نوع و int وهو المكان الذي يتم حفظ البيانات داخله.
     - right & left: وهما القصنان (Arcs) والذان يربطان العقد بأبنيه اليمين والشمال.
    كما نرى فإننا نستطيع إنشاء عنصر من هذا الكلاس سواء كان في بيانات أو لا. لديه أولاد أولا.
    كما وأنه لدينا ميثودين نستخدمها لإضافة ابن لليمين أو لليسار.
     
    ب- انشاء كلاس الشجرة الثنائية (Binary Search Tree):
    public class BST { private BSTNode root = null; public BST(){ } public void clear(){ this.root =null; } public boolean isEmpty(){ return root == null; } public void visit(BSTNode n){ System.out.println(n.key + " "); } } هنا نقوم بانشاء الهيكلة الأساسية للشجرة ويحتوي على التالي:
    - root: الجذر وهو رأس الشجرة والوحيد الذي يربطنا بكامل عناصر الشكرة. وفي بداية انشاء الشجرة يكون الجذر فاضي.
    لدينا الكثير من الميثود لكن سنذكر هنا الأشياء الأساسية ونترك الباقي للدرس القادم بحيث أنها تحتوي على الكثير من التفاصيل:
    * clear(): تستخدم لتفريغ الشجرة من البيانات؛ وبما أن الجذر هو الرابط الوحيد لعناصر الشجرة فإن حذف الجذر سيؤدي الى حذف الشجرة كلها.
    *isEmpty(): وستخدم للاستعمال اذا ما كانت الشجرة خالية أو لا. ترسل true في حال كانت الشجرة خالية.
    *visit(): تستخدم لطباعة قيمة القيمة داخل العقد المرسل.
     
    خلال الشرح القادم إن شاء الله سنتطرق لاضافة وحذف عناصر من الشجرة، كذلك كيف نقوم بطباعة جميع عناصر الشجرة.
     
    اسأل الله العلي العظيم بأني وفقت لاصال المعلومة بابسط طريقة
     
    في حفظ الله
    مستوى المقال: متوسط

    بواسطه Abather , في

  • Ads Belongs To This website

    عالم البرمجة

    عالم البرمجة مقالات برمجة و دورات مجانية لإحتراف البرمجة هدفنا تبسيط البرمجة ونشرها بيد الكل بشكل ممتع ومتطور ومحدث بإستمرار لمواكبة جديد تطورات البرمجة الحديثة و المتقدمة بدون مقابل