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

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

التدفق:

يعمل التدفق تقريبًا كما هو موضح أعلاه.

إذن ما هي المشكلة:

عادةً عندما تحاول الحصول على الكود وcode_verifier من موقع ويب تابع لجهة خارجية مباشرةً، قد تواجه مشكلة CORS. هذا هو المتوقع.

كيفية حلها؟

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

2. إذا لم تنجح القائمة البيضاء، فقد تحتاج إلى واجهة خلفية للعمل كوكيل عكسي لك. في حالتنا، استخدمنا إعدادًا بسيطًا على الآلة الكاتبة والذي يعمل بمثابة وكيل لمكالمتنا واستخدمناه كواجهة خلفية للوكيل العكسي. يمكنك تحقيق ذلك من خلال إعداد الواجهة الخلفية لديك أيضًا.

لماذا يضرب CORS؟

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

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

ما المكتبة التي استخدمتها لإنجاز ذلك بسهولة في الرد؟

https://github.com/authts/react-oidc-context
؟ هذا. يوفر هذا التكوين كسياق ويدعم أيضًا webstoragestatestore وهو أمر رائع.

هل لديك المزيد من الأسئلة؟

الرد هنا . يسعدني أن أساعدك إذا استطعت :)

سعيد بالبرمجة..