دليل تكوين CORS لواجهات برمجة تطبيقات Webhook في API Designer

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

نظرة عامة

صُمم مُصمم واجهة برمجة التطبيقات (API Designer) من Vtiger كأداة فعّالة تُمكّن المطورين من بناء واجهات برمجة تطبيقات مخصصة قائمة على HTTP بسهولة. يمكن دمج هذه الواجهات بسلاسة مع واجهات برمجة تطبيقات JavaScript من VTAP أو التطبيقات الخارجية.

أضفنا ميزةً في مُصمم واجهة برمجة التطبيقات (API Designer) لتحديد النطاقات المسموح بها (النطاقات التي يُمكن إدراجها في القائمة البيضاء). فقط هذه النطاقات المسموح لها بتقديم طلبات CORS هي التي يُسمح لها بذلك.

دعونا نتعلم المزيد عن CORS وتطبيقاته.

الهدف

الأهداف الأساسية لتمكين CORS:

  • السماح بالاتصال الآمن بين تطبيقات الواجهة الأمامية ونظام إدارة علاقات العملاء.
  • تمكين مكالمات واجهة برمجة تطبيقات الويب من تطبيقات جانب العميل أو البوابات الخارجية.
  • منع أخطاء CORS على جانب المتصفح.
  • حماية بيانات CRM من المجالات غير المصرح بها.

التنفيذ الفني

عند إنشاء واجهة برمجة تطبيقات Webhook في مصمم واجهة برمجة التطبيقات، يوجد خيار لـ إضافة نطاق للتكوين. يُمثل هذا النطاق المصدر (موقع الويب أو التطبيق) الذي سيُجري الطلبات أو يستقبل البيانات من Vtiger. 

بمجرد إضافة المجال:

  • سوف فيتجر السماح بطلبات عبر الأصول من هذا المجال.
  • سيتم بدء تشغيل واجهة برمجة تطبيقات الويب تم استلام البيانات بنجاح من CRM.
  • سوف يقوم المتصفح بحظر أي طلبات قادمة من المجالات غير المدرجة في القائمة البيضاء.

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

مثال

إذا حاول تطبيق ويب مستضاف على https://app.example.com إرسال طلب إلى واجهة برمجة التطبيقات على https://api.vtiger.com، فسيقوم المتصفح بحظر الطلب ما لم تسمح واجهة برمجة التطبيقات بذلك صراحةً من خلال رؤوس CORS.

لجعل هذا التفاعل ممكنًا وآمنًا، يجب أن يستجيب الخادم برؤوس خاصة (مثل Access-Control-Allow-Origin) تخبر المتصفح عن الأصول (المجالات) المسموح لها بالوصول إليه.

في حالة Vtiger، تمكين القائمة البيضاء لـ CORS يسمح للمجالات الموثوقة بالتفاعل مع CRM (مثل إرسال طلبات webhook أو استدعاء واجهات برمجة التطبيقات) دون أن يتم حظرها بواسطة المتصفح.

حالة الاستخدام

لديك تطبيق واجهة أمامية مستضاف على https://portal.mycompany.com ويحتاج إلى إرسال طلبات API الخاصة بـ webhook إلى مثيل Vtiger CRM الخاص بك على https://crm.mycompany.com.

المشكلة

يقوم المتصفح بحظر الطلب بسبب خطأ CORS: تم حظر الوصول إلى الجلب على 'https://crm.mycompany.com/webhook' من المصدر 'https://portal.mycompany.com' بواسطة سياسة CORS.

الحلول أضف https://portal.mycompany.com إلى القائمة البيضاء لـ CORS في Vtiger. بعد ذلك، سيوافق المتصفح على الطلب، حيث ستتضمن الاستجابة العناوين الصحيحة.

الفوائد

  • يمنع فشل طلبات CORS المرتبطة في تطبيقات الواجهة الأمامية.
  • يسمح بالوصول الآمن والمُتحكم فيه إلى واجهات برمجة تطبيقات Vtiger من المجالات الموثوقة.
  • يدعم التكامل مع أطر الواجهة الأمامية الحديثة مثل React وAngular وVue وما إلى ذلك.
  • يزيل الحاجة إلى وكلاء الواجهة الخلفية للتعامل مع اتصالات واجهة برمجة التطبيقات.
  • من السهل إدارته وتحديثه عبر واجهة المسؤول.

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

ترقبوا المزيد. برمجة سعيدة!

 
 

قم بالتسجيل لتلقي آخر التحديثات!