بناء نظام مصادقة مخصص باستخدام Appsmith و APISIX

تدفق المصادقة هو جزء أساسي من تطبيقات الويب. فهو يضمن أمان وخصوصية بيانات المستخدم أثناء استخدامهم لتطبيقك. بينما تتوفر العديد من حلول المصادقة الجاهزة، فإن بناء نظام مصادقة باستخدام منصة تطوير واجهة مستخدم منخفضة التعليمات البرمجية وحل إدارة واجهات برمجة التطبيقات (API) يسمح لك بإنشاء تطبيقات ويب آمنة بسهولة. يمكنك إنشاء تطبيق بدون الحاجة إلى معرفة تقنيات وأدوات الواجهة الأمامية والخلفية. لا تحتاج إلى معرفة Python أو Java أو HTML أو CSS أو أطر عمل JavaScript الأخرى. في هذا المنشور، ستتعلم كيفية بناء تدفق تسجيل دخول بسيط وصفحات مخصصة على الواجهة لتأمين تطبيقك باستخدام Appsmith، Apache APISIX، وJWT.

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

أهداف التعلم

ستتعلم ما يلي خلال المقال:

• تصميم عملية مصادقة في بيئة منخفضة التعليمات البرمجية.
• إعداد واجهة برمجة التطبيقات (API) للمصادقة الخلفية باستخدام APISIX.
• إنشاء صفحات واجهة مستخدم باستخدام الأدوات في Appsmith.
• تمكين المصادقة القائمة على الرموز (Token-based Authentication).

تصميم بنية المصادقة

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

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

الجزء 1: إعداد واجهة برمجة التطبيقات (API) الخلفية للمصادقة

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

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

• Docker يستخدم لتثبيت etcd وAPISIX في حاويات.
• curl يستخدم لإرسال الطلبات إلى واجهة برمجة التطبيقات الإدارية لـ APISIX. يمكنك أيضًا استخدام أدوات مثل Postman للتفاعل مع واجهة برمجة التطبيقات.

الخطوة 1: تثبيت Apache APISIX

يمكن تثبيت APISIX وبدء تشغيله بسهولة باستخدام البرنامج النصي التالي للبدء السريع:

curl -sL https://run.api7.ai/apisix/quickstart | sh

الخطوة 2: تكوين خدمة الخلفية (upstream)

بعد ذلك، نقوم بتكوين خدمة الخلفية. لأغراض العرض التوضيحي، يمكن أن تكون أي خدمة واجهة برمجة تطبيقات تخدم منطق الخلفية. يمكنك استبدالها بخدمتك أيضًا. أستخدم خادمًا عامًا وهميًا http://httpbin.org/ الذي يولد استجابات عشوائية. للتبسيط، سيكون لدينا نقطة نهاية واحدة تُرجع عنوان IP العام لجهازنا في هذه النقطة http://httpbin.org/ip.

لتوجيه الطلبات إلى خدمة الخلفية لواجهة برمجة التطبيقات الوهمية، ستحتاج إلى تكوينها عن طريق إضافة خادم upstream في Apache APISIX عبر واجهة برمجة التطبيقات الإدارية.

curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
   "name":"Mock API upstream",
   "desc":"Register Mock API as the upstream",
   "nodes":{
      "httpbin.org:80":1
   }
}'

الخطوة 3: إنشاء تكوين جديد للإضافات (Plugin Config)

تتضمن هذه الخطوة تكوين إضافة (باستخدام كائن Plugin Config) لمسار ننشئه في الخطوة التالية. لذا، تمكن APISIX إضافة JWT لتأمين نقاط نهايةنا. في كل مرة نطلب نقطة النهاية، يتحقق من بيانات اعتماد JWT في رأس الطلب.

curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
   "plugins":{
      "jwt-auth": {}
   }
}'

الخطوة 4: إنشاء مسار لواجهة برمجة التطبيقات الخلفية

ننشئ كائن Route جديد في APISIX يعترض جميع طلبات GET إلى URI /ip، ويستخدم تكوينات upstream والإضافات الحالية لتمكين آلية التوجيه وسياسات المصادقة. يتحقق من إضافة JWT في الرأس، وإذا كانت موجودة وصالحة، يوجه الطلب إلى خادمنا الوهمي. وإلا، فإنه يعيد خطأ غير مصرح به على الفور ولن يصل الطلب إلى الخدمة الفعلية.

curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
   "name":"Mock API server route",
   "desc":"Create a new route in APISIX for the mock server endpoint",
   "methods":[
      "GET"
   ],
   "uri":"/ip",
   "upstream_id":"1",
   "plugin_config_id":1
}'

الخطوة 5: إنشاء مسار لتوقيع رمز JWT

قمنا بتنفيذ المصادقة القائمة على الرموز لواجهة برمجة التطبيقات الخاصة بنا. يمكن لـ APISIX أيضًا أن يعمل كمزود هوية لتوليد والتحقق من الرموز. للقيام بذلك، تحتاج إلى إعداد مسار لنقطة نهاية جديدة لواجهة برمجة التطبيقات التي توقع الرمز باستخدام إضافة public-api:

curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
    "uri": "/login",
    "plugins": {
        "public-api": {
            "uri": "/apisix/plugin/jwt/sign"
        }
    }
}'

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

الجزء 2: إنشاء نماذج تسجيل المستخدم وتسجيل الدخول في Appsmith

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

قبل البدء

سأفوت جزء التثبيت الخاص بـ Appsmith على جهازك. يمكنك تعلم كيفية تثبيت Appsmith باستخدام Docker على موقع Appsmith. تأكد من أنك قمت بتثبيت Appsmith ويمكنك الوصول إليه على http://localhost. عند نشر وتشغيل Appsmith، يتم إضافة تطبيق بعنوان My first application بشكل افتراضي. يمكنك استخدام هذا التطبيق لبناء تطبيقك الأول.

الخطوة 1: إنشاء صفحة التسجيل

في حالتنا، يقوم المستخدم الجديد بالتسجيل أولاً في التطبيق الجوال من صفحة التسجيل. ابدأ بإنشاء صفحة جديدة تسمى RegistrationPage في تطبيقك. أضف أدوات إدخال للبريد الإلكتروني (اسمها EmailInput)، اسم المستخدم (اسمها UsernameInput)، وكلمة المرور (PasswordInput). أيضًا، أضف أزرار التسجيل (اسمها RegisterButton) وتسجيل الدخول (اسمها LoginButton) أزرار إلى لوحة الرسم. النتيجة النهائية تبدو كما يلي:

عندما يضغط المستخدم على زر التسجيل مع تفاصيل الإدخال المقدمة، ستحتاج إلى استعلام للتعامل مع نقطة نهاية واجهة برمجة التطبيقات الإدارية لـ APISIX لتسجيل مستهلك جديد في بوابة API. قم بإنشاء استعلام API (اسمها APISIX_Admin_Add_Consumer_API) مع نقطة نهاية مستهلكي APISIX URI /apisix/admin/consumers. ضع نص أدوات الإدخال في نص الاستعلام. يجب أن يبدو الوصول إلى أدوات الإدخال كما يلي:

لاحظ أننا نستخدم عنوان host.docker.internal بدلاً من localhost لأن APISIX يعمل داخل حاويته الخاصة على شبكة Docker مختلفة عن Appsmith.

بعد إرسال الاستعلام إلى APISIX، يقوم بتسجيل المستهلك الجديد، وسيستخدم كائن المستهلك إضافة jwt-auth مع المفتاح والسر. يمكنك اختبار ما إذا كان المستهلك مسجلًا في النظام بنجاح عن طريق جلب المستهلك المحدد باسم المستخدم appsmithuser. قم بتنفيذ هذا الأمر curl:

curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser

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

الخطوة 2: إنشاء صفحة تسجيل الدخول

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

ثم قم بإنشاء استعلام API (اسمها login_api) لمسار URI لتسجيل الدخول في APISIX /login وقم بتعيين المعلمة key إلى {{EmailInput.text}}. إذا قمت باختبار الاستعلام وضغطت على زر التشغيل، في حالة نجاح الاستجابة، يجب أن تعيد نقطة نهاية بوابة API للمصادقة رمز وصول صالح. في المثال أدناه، المفتاح jwt هو رمز يشير إلى أن المستخدم قد تمت مصادقته على جانب APISIX.

لتشغيل استعلام login_api عبر زر تسجيل الدخول، تحتاج إلى تعيين خاصية الاستعلام onClick.

من الممكن أيضًا تخزين رمز JWT في متجر Appsmith ثم نقل المستخدم إلى الصفحة الرئيسية. للقيام بذلك، أدخل الكود أدناه إلى إجراء login_api لـ صفحة تسجيل الدخول في خاصية onClick:

{{login_api.run(() => {
  const jwt = login_api?.data;
  if (jwt) {
    storeValue('jwt', jwt);
    navigateTo('MainPage', {});
  } else {
    showAlert('Login failed!', 'error');
  }
})}}

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

الخطوة 3: إنشاء الصفحة الرئيسية

أخيرًا، حان الوقت الآن لتكوين الصفحة الرئيسية للتطبيق الجوال للسماح للمستخدمين الذين قاموا بتسجيل الدخول بالوصوعرض بعض البيانات. يمكنك استخدام نفس اللوحة لبناء واجهة المستخدم من الأدوات. بمجرد أن يقوم المستخدم بتسجيل الدخول بنجاح، يقوم منطقنا بالانتقال إلى الصفحة الرئيسية، وفي أول تحميل للصفحة، يقوم بإجراء استدعاء API تلقائيًا إلى المسار http://127.0.0.1:9080/ip في APISIX باستخدام الاستعلام الذي تضيفه (اسمها main_page_data_api) واسترداد عنوان IP من الخادم upstream (الذي أنشأناه في الجزء 1 والخطوة 2).

قد تلاحظ في رأس Authorization القيمة {{appsmith.store.jwt}} وهي قيمة jwt التي حفظناها في متجر Appsmith في الخطوة السابقة والتي تُستخدم لإثبات لتطبيقك أن المستخدم معروف. إذا لم تكن قيمة jwt موجودة في متجر Appsmith، نعرض خطأ غير مصرح به للمستخدم.

في حالتي، أضفت أدوات نصية إلى الصفحة الرئيسية وقمت بتعيين قيمة حقل النص الثاني إلى {{main_page_data_api.data}} وهي ببساطة بيانات الإخراج من استدعاء main_page_data_api. انظر النتيجة.

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

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

الخلاصة

باتباع الخطوات أعلاه، قمنا بإنشاء نظام مصادقة مخصص باستخدام Appsmith وAPISIX. Appsmith مناسبة لمجموعة واسعة من حالات الاستخدام، من بناء الأدوات الداخلية ولوحات التحكم الإدارية إلى النماذج الأولية وتطوير التطبيقات الكاملة. مع APISIX، يمكنك ليس فقط فرض المصادقة لمستخدميك ولكن أيضًا إدخال إجراءات أمان إضافية مثل الحد من المعدل، حظر IP، وتقييد المستهلك للحفاظ على أمان حل المصادقة المخصص لدينا.

موارد ذات صلة

• مصادقة بوابة API.
• سياسة التفويض في Apache APISIX: حماية واجهات برمجة التطبيقات الخاصة بك.
• غوص عميق في المصادقة في الخدمات المصغرة.