كيفية بناء تطبيق Full-Stack Authentication

تتطلب معظم تطبيقات الويب ميزة التسجيل وتسجيل الدخول. ولكن بالنسبة للمبتدئين، يمكن أن يكون هذا تحديًا. حتى المطورين الخبراء يفضلون استخدام خدمات خارجية للتعامل مع المصادقة منذ البداية. عندما نتحدث عن تدفق مصادقة كامل المكدس، فإننا نعني إعداد تسجيل الدخول والتسجيل للمستخدمين على الواجهة الأمامية وتأمين واجهة برمجة التطبيقات (API) على الواجهة الخلفية. لذا، يجب العمل على كلا الجزأين.

سيوجهك هذا المنشور خلال بناء تطبيق مصادقة كامل المكدس باستخدام Apache APISIX، Authgear، و OpenID Connect (OIDC). يمكنك العثور على كود المصدر للمشروع على GitHub. للبدء السريع بالتطبيق، ما عليك سوى استنساخ المستودع وتنفيذ نموذج الكود، باتباع الخطوات المقدمة في ملف README.md.

الهدف التعليمي

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

دور APISIX و Authgear و OIDC في المصادقة

قبل الغوص في الدليل، دعونا نقدم الأدوات التي سنستخدمها باختصار.

• OIDC (OpenID Connect) هي طبقة هوية بسيطة مبنية على بروتوكول OAuth 2.0. تمكن التطبيقات الخارجية من التحقق من المستخدمين والحصول على معلومات الملف الشخصي الأساسية بطريقة موحدة.

• APISIX تبرز كواحدة من أكثر بوابات API مفتوحة المصدر شعبية. تم تصميمها ليس فقط لإدارة API، ولكن أيضًا لضمان أمان وحماية هذه الـ APIs. واحدة من أبرز الميزات في ترسانة الأمان الخاصة بها هي دعم OIDC باستخدام الإضافة الخاصة بها.

• Authgear هي منصة هوية كخدمة (IDaaS) عالية التكيف لتطبيقات الويب والجوال. يمكن للمستخدمين تسجيل الدخول إلى تطبيقك من خلال واجهة مستخدم مدمجة (لا تحتاج إلى بناء واجهة مستخدم لتدفق تسجيل المستخدمين وتسجيل الدخول)، مما يوفر لهم تجربة تسجيل دخول آمنة ومعيارية يمكنك تخصيصها بعلامتك التجارية وطرق المصادقة المختلفة، مثل البريد الإلكتروني، تسجيلات الدخول الاجتماعية، بدون كلمة مرور، تسجيلات الدخول البيومترية، كلمة مرور لمرة واحدة (OTP) مع الرسائل النصية/WhatsApp، والمصادقة متعددة العوامل (MFA). تستخدم OpenID Connect (OIDC) و OAuth 2.0 لتحديد هوية المستخدم ومنح التفويض للوصول إلى الموارد المحمية.

تدفق المصادقة

إليك مخططًا معماريًا عالي المستوى لكيفية ظهور عملية المصادقة:

الخطوات الموضحة في الرسم التوضيحي موضحة بالتفصيل أدناه:

في الرسم التوضيحي أعلاه، العميل هو أي تطبيق ويب، بوابة API هي APISIX و مزود الهوية هو Authgear و الخادم العلوي هو واجهة برمجة التطبيقات الخلفية.

1. يمكن أن يأخذ تطبيق الويب أشكالًا مختلفة، من التطبيقات ذات الصفحة الواحدة (SPA) المبنية باستخدام React أو Vue أو Angular، إلى تطبيقات الويب القياسية المصنوعة باستخدام أطر عمل مثل Express و NextJS ومنصات مشابهة. تطبيق الويب هو تطبيق العميل الخاص بنا مع الواجهة الأمامية التي ترسل طلبًا إلى مزود الهوية (Authgear) مع معرف العميل، سر العميل لجمع رمز وصول مثل JSON Web Tokens (JWT).
2. إذا كانت بيانات الاعتماد المقدمة صحيحة، يرد Authgear برمز JWT إلى تطبيق الويب. يمكنك إنشاء العديد من المستخدمين لتطبيقك في بوابة Authgear ويمكن للمستخدمين تسجيل الدخول باستخدام صفحات واجهة المستخدم التي يستضيفها Authgear.
3. بعد الحصول على رمز JWT، يرسل العميل طلبًا إلى بوابة API (APISIX) مع رمز الوصول، وواجهات برمجة التطبيقات الخلفية المحمية بواسطة البوابة.
4. قبل معالجة الطلب، تحتاج APISIX إلى التأكد من أن الرمز المقدم صالح، ولم ينتهي صلاحيته، وله النطاقات الصحيحة للبيانات أو الخدمة المطلوبة. إذا لم تتمكن APISIX من التحقق من صحة الرمز محليًا، فإنها ترسل طلب استعلام الرمز إلى خادم التفويض الخاص بـ Authgear. يتم عادةً إجراء هذا الطلب إلى نقطة النهاية introspection الخاصة بالخادم.
5. يتلقى Authgear طلب الاستعلام ويعالجه. يتحقق الخادم من سجلاته لتحديد صلاحية الرمز، وانتهاء صلاحيته، والنطاقات المرتبطة به، وبعد تحديد حالة الرمز، يرد على APISIX.
6. بناءً على رد استعلام الرمز من Authgear، يمكن لـ APISIX اتخاذ قرار مستنير. إذا كان الرمز صالحًا، فإنه يمرر الطلب إلى واجهة برمجة التطبيقات الخلفية، وإلا فإنه يرفض طلب العميل برمز حالة HTTP غير مصرح به.
7. ترسل APISIX الرد من واجهة برمجة التطبيقات الخلفية مع الموارد المطلوبة.

تطبيق مصادقة كامل المكدس مع APISIX و Authgear و OIDC.

بالنسبة لمشروع التجربة، استخدمنا Docker لتثبيت وتشغيل 3 مكونات (الواجهة الخلفية، بوابة API، والواجهة الأمامية) بأمر واحد. استخدمنا ExpressJS لتطبيق الويب الأمامي، واستضفنا تطبيق الصفحة الواحدة الخاص بنا على localhost:3000. يمكن الوصول إلى بوابة APISIX على localhost:9080، بينما تم إعداد واجهة برمجة التطبيقات الخلفية الخاصة بنا (يمكن أن تكون أي واجهة برمجة تطبيقات تقوم ببنائها باستخدام Python أو Java أو NodeJS وما إلى ذلك) على localhost:9081.

المتطلبات الأساسية

قبل أن تبدأ، ستحتاج إلى ما يلي:

• حساب Authgear مجاني. سجل إذا لم يكن لديك حساب بالفعل.
• Docker يستخدم لتثبيت جميع الخدمات.

تكوين Authgear

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

الخطوة 1: إنشاء تطبيق في Authgear

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

الخطوة 2: نسخ بيانات اعتماد التطبيق

يتم تعيين CLIENT ID و CLIENT Secret فريدين لكل تطبيق في Authgear، والذي سيستخدمه كود التطبيق الخاص بك لاستدعاء واجهات برمجة التطبيقات الخاصة بـ Authgear في تطبيق الويب. سجل ISSUER الذي تم إنشاؤه (على سبيل المثال، https://example-auth.authgear-apps.com)، CLIENT ID، CLIENT SECRET من الناتج. ستستخدم هذه القيم في الخطوة التالية لتكوين تطبيق الويب.

الخطوة 3: تكوين URI إعادة التوجيه

URI إعادة التوجيه المصرح به لتطبيقك هو العنوان الذي ستعيد Authgear التوجيه إليه بعد أن يتم التحقق من هوية المستخدم حتى تكمل البرمجية الوسيطة لـ OpenID Connect عملية المصادقة. في حالتنا، سيكون الصفحة الرئيسية لواجهتنا الأمامية وستعمل على http://localhost:3000.

قم بتعيين http://localhost:3000 وفقًا لحقل URIs إعادة التوجيه المصرح بها. إذا لم يتم تعيينه، لن يتم إعادة المستخدمين إلى تطبيقك بعد تسجيل الدخول.

الخطوة 4: تمكين رمز الوصول

أيضًا، قم بتمكين خيار إصدار JWT كرمز وصول تحت قسم رمز الوصول في تكوين التطبيق:

الخطوة 5: اختيار طريقة تسجيل الدخول

بعد إنشاء تطبيق Authgear، اختر كيف يحتاج المستخدمون إلى التحقق من الهوية في صفحة تسجيل الدخول. من علامة التبويب المصادقة، انتقل إلى طرق تسجيل الدخول، يمكنك اختيار طريقة تسجيل الدخول من بين خيارات مختلفة بما في ذلك، عبر البريد الإلكتروني، الهاتف المحمول، أو الاجتماعية، فقط باستخدام اسم المستخدم أو الطريقة المخصصة التي تحددها. بالنسبة لهذه التجربة، اخترنا نهج البريد الإلكتروني+بدون كلمة مرور حيث يُطلب من المستخدمين تسجيل حساب وتسجيل الدخول باستخدام بريدهم الإلكتروني. سيحصلون على كلمة مرور لمرة واحدة (OTP) إلى بريدهم الإلكتروني والتحقق من الرمز لاستخدام التطبيق.

إعداد وتشغيل مشروع التجربة

مع تكوين Authgear بنجاح، يمكننا الآن جلب مستودع GitHub، تكوين متغيرات البيئة وتشغيل الخدمات:

ابدأ باستنساخ المشروع إلى جهازك المحلي:

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

اجعل دليل المشروع دليلك الحالي:

cd apisix-authgear-oidc-full-stack-auth

في الدليل الجذري لمشروعك حيث يوجد ملف Docker compose yaml، قم بإنشاء ملف .env مع متغيرات البيئة التالية:

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

استبدل القيم الموجودة بين الأقواس بإعدادات تطبيق Authgear الخاصة بك من قسم تكوين Authgear أعلاه مثل Issuer، ClientId، ClientSecret

بعد إضافة ملف البيئة، قم بتشغيل الأمر docker compose up من الدليل الجذري.

اختبار تدفق المصادقة

بالنسبة للتجربة، استخدمنا Docker لتثبيت وتشغيل 3 مكونات (الواجهة الخلفية، بوابة API، والواجهة الأمامية) بأمر واحد. استخدمنا ExpressJS لتطبيق الويب الأمامي، واستضفنا تطبيق الصفحة الواحدة الخاص بنا على localhost:3000. يمكن الوصول إلى بوابة APISIX على localhost:9080، بينما تم إعداد واجهة برمجة التطبيقات الخلفية الخاصة بنا (يمكن أن تكون أي واجهة برمجة تطبيقات تقوم ببنائها باستخدام Python أو Java أو NodeJS وما إلى ذلك) على localhost:9081.

بعد التسجيل باستخدام بريدك الإلكتروني، ستتلقى كلمة مرور لمرة واحدة (OTP):

بمجرد التحقق من الهوية، يُسمح لك بطلب موارد API وستحصل على رد من الخدمة الخلفية:

فرضت APISIX المصادقة باستخدام OIDC مع Authgear ووفرت تدفق مصادقة آمن وسلس مع إعداد سهل.

الخطوات التالية

هذه المجموعة من الأدوات التي استخدمناها ضمنت الأمان مما يسمح للمطورين بالتركيز على المنطق التجاري الأساسي بدلاً من تعقيدات عملية المصادقة. من الآن فصاعدًا، لديك ميزة المصادقة ممكّنة، يمكنك البدء في بناء واجهة المستخدم الخاصة بك للصفحة الرئيسية، وعرض البيانات من API وتطوير صفحات أخرى.

الموارد ذات الصلة

سياسة تفويض Apache APISIX: حماية واجهات برمجة التطبيقات الخاصة بك

إعداد SSO مع OIDC و Keycloak