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

تعرف على كيفية تنفيذ OAuth في تطبيق Express باستخدام GitHub كموفر OAuth في بضع خطوات.

تدفق OAuth

في تدفق OAuth النموذجي ، يوفر موقعك خيارًا للمستخدمين لتسجيل الدخول باستخدام حساب الطرف الثالث الخاص بهم من مزود مثل GitHub أو Facebook. يمكن للمستخدم بدء هذه العملية بالنقر فوق زر تسجيل دخول OAuth ذي الصلة.

يؤدي هذا إلى إعادة توجيههم من تطبيقك إلى موقع الويب لموفر OAuth ويقدم لهم نموذج موافقة. يحتوي نموذج الموافقة على جميع المعلومات التي تريد الوصول إليها من المستخدم ، والتي قد تكون رسائل البريد الإلكتروني ، والصور ، والجداول الزمنية ، وما إلى ذلك.

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

instagram viewer

يتضمن تنفيذ هذا التدفق في تطبيق Express بضع خطوات.

الخطوة الأولى: تهيئة بيئة التطوير

أولاً ، قم بإنشاء دليل مشروع فارغ و قرص مضغوط في الدليل الذي تم إنشاؤه.

فمثلا:

مكدير جيثب التطبيق
قرص مضغوط تطبيق جيثب

بعد ذلك ، قم بتهيئة npm في مشروعك عن طريق تشغيل:

npm الحرف الأول

ينشئ هذا الأمر ملف package.json ملف يحتوي على تفاصيل حول مشروعك مثل الاسم والإصدار وما إلى ذلك.

سيعرض هذا البرنامج التعليمي استخدام نظام الوحدة النمطية ES6. قم بإعداد هذا عن طريق فتح ملف package.json ملف وتحديد "اكتب ":" module " في كائن JSON.

الخطوة 2: تثبيت التبعيات

ستحتاج إلى تثبيت بعض التبعيات لخادمك ليعمل بشكل صحيح:

  • ExpressJS: ExpressJS هو إطار عمل NodeJS يوفر مجموعة قوية من الميزات لتطبيقات الويب والجوال. سيؤدي استخدام Express إلى تبسيط عملية إنشاء الخادم الخاص بك.
  • Axios: Axios هو عميل HTTP قائم على الوعد. ستحتاج إلى هذه الحزمة لتقديم طلب POST للحصول على رمز وصول إلى GitHub.
  • dotenv: dotenv عبارة عن حزمة تقوم بتحميل متغيرات البيئة من ملف env. إلى كائن process.env. ستحتاج إليه لإخفاء المعلومات المهمة حول طلبك.

قم بتثبيتها عن طريق تشغيل:

npm تثبيت صريح المحاور dotenv

الخطوة 3: إنشاء تطبيق Express

أنت بحاجه إلى إنشاء خادم Express أساسي للتعامل مع الطلبات وتقديمها إلى موفر OAuth.

أولاً ، قم بإنشاء ملف index.js ملف في الدليل الجذر لمشروعك يحتوي على ما يلي:

// index.js
يستورد التعبير من "التعبير"؛
يستورد أكسيوس من "أكسيوس" ؛
يستورد * كما دوتنف من "dotenv" ؛
دوتنف.config();
مقدار ثابت التطبيق = صريح () ؛
مقدار ثابت المنفذ = process.env. بورت || 3000
app.listen (المنفذ ، () => {
وحدة التحكم.سجل("التطبيق يعمل على المنفذ $ {منفذ}`);
});

يستورد هذا الرمز المكتبة السريعة ، وينشئ مثيلًا سريعًا ، ويبدأ في الاستماع لحركة المرور على المنفذ 3000.

الخطوة 4: إنشاء معالجات الطريق

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

يجب أن يقوم معالج التوجيه الأول بإعادة توجيه المستخدم إلى https://github.com/login/oauth/authorize? المعلمات.

ستحتاج إلى تمرير مجموعة من المعلمات المطلوبة إلى عنوان URL لـ OAuth الخاص بـ GitHub ، والتي تتضمن:

  • معرّف العميل: يشير هذا إلى المعرف الذي يتسلمه تطبيق OAuth عند التسجيل على GitHub.
  • النطاق: يشير هذا إلى السلسلة التي تحدد مقدار وصول تطبيق OAuth إلى معلومات المستخدم. يمكنك العثور على قائمة بالنطاقات المتاحة في وثائق OAuth الخاصة بـ GitHub. هنا سوف تستخدم "قراءة: المستخدم"، الذي يمنح الوصول لقراءة بيانات الملف الشخصي للمستخدم.

أضف الكود التالي إلى ملف index.js ملف:

// index.js
app.get ("/auth"، (مطلوب ، الدقة) => {
// تخزين المعلمات في كائن
مقدار ثابت المعلمات = {
 مجال: "قراءة: المستخدم",
معرف_العميل: معالجة.envCLIENT_ID,
 };
// تحويل المعلمات إلى سلسلة مشفرة بعنوان URL
مقدار ثابت urlEncodedParams = الجديد URLSearchParams (params) .toString () ،
 res. إعادة التوجيه (` https://github.com/login/oauth/authorize?$ {urlEncodedParams}`);
});

يطبق هذا الرمز معالج التوجيه الأول. يقوم بتخزين المعلمات المطلوبة في كائن ، وتحويلها إلى تنسيق مشفر URL باستخدام URLSearchParams API. ثم يضيف هذه المعلمات إلى عنوان URL لـ OAuth الخاص بـ GitHub ويعيد توجيه المستخدم إلى صفحة موافقة GitHub.

أضف الكود التالي إلى ملف index.js ملف لمعالج التوجيه الثاني:

// index.js
app.get ("/github-callback"، (مطلوب ، الدقة) => {
مقدار ثابت {code} = req.query ؛
مقدار ثابت الجسم = {
معرف_العميل: معالجة.envCLIENT_ID,
client_secret: معالجة.envCLIENT_SECRET,
 الشفرة،
 };


يترك رمز وصول؛
 خيارات const = {رؤوس: {قبول: "التطبيق / json" } };
أكسيوس
 .بريد("https://github.com/login/oauth/access_token"، الجسم ، الخيارات)
 ثم ((استجابة) => رد data.access_token)
 ثم ((رمز) => {
 accessToken = رمز مميز ؛
 res. إعادة التوجيه (`/؟ الرمز =$ {رمز}`);
 })
 .قبض على((يخطئ) => res.status (500) .json ({err: err.message})) ؛
});

سيقوم معالج التوجيه الثاني باستخراج ملف الشفرة عاد من جيثب في مطلوب استعلام هدف. ثم يقوم بعمل POST طلب باستخدام أكسيوس إلى " https://github.com/login/oauth/access_token" مع الكود ، معرف_العميل، و client_secret.

ال client_secret هي سلسلة خاصة ستنشئها عند إنشاء تطبيق GitHub OAuth. عندما رمز وصول تم جلبه بنجاح ، تم حفظه في متغير لاستخدامه لاحقًا. تتم إعادة توجيه المستخدم أخيرًا إلى التطبيق الخاص بك باستخدام ملف رمز وصول.

الخطوة 5: إنشاء تطبيق GitHub

بعد ذلك ، ستحتاج إلى إنشاء تطبيق OAuth على GitHub.

أولاً ، قم بتسجيل الدخول إلى حساب GitHub الخاص بك ، ثم انتقل إلى إعدادات، قم بالتمرير لأسفل إلى إعدادات المطور، واختر تطبيقات OAuth. أخيرًا ، انقر فوق "قم بتسجيل طلب جديد.”

سيوفر لك GitHub نموذج طلب OAuth جديد مثل هذا:

املأ الحقول المطلوبة بالتفاصيل التي تريدها. ال "رابط الصفحة الرئيسية" يجب ان يكون " http://localhost: 3000”. لك "عنوان URL لمعاودة الاتصال التفويض" يجب ان يكون " http://localhost: 3000 / جيثب رد ". يمكنك أيضًا تمكين تدفق الجهاز اختياريًا ، مما يسمح لك بتخويل المستخدمين لتطبيق بدون رأس ، مثل أداة CLI أو مدير الاعتماد Git.

تدفق الجهاز في إصدار تجريبي عام وعرضة للتغيير.

أخيرًا ، اضغط على تسجيل التطبيق زر.

سيوجهك GitHub إلى صفحة بها ملف معرف_العميل وخيارًا لإنشاء ملف client_secret. انسخ ملف معرف_العميل، توليد الخاص بك client_secretونسخه أيضًا.

قم بإنشاء ملف env وتخزين معرف_العميل و client_secret داخله. قم بتسمية هذين المتغيرين CLIENT_ID و CLIENT_SECRET على التوالي.

اكتمل الآن تدفق OAuth ، ويمكنك الآن تقديم طلبات باستخدام رمز الوصول لقراءة بيانات المستخدم (ملف مجال الذي حددته سابقًا).

أهمية OAuth 2.0

يؤدي استخدام OAuth 2.0 في تطبيقك إلى تبسيط مهمة تنفيذ تدفق المصادقة بشكل كبير. إنه يؤمن بيانات المستخدم الخاصة بعملائك باستخدام معيار طبقة مآخذ التوصيل الآمنة (SSL) ، مما يضمن بقاءها خاصة.