جافا سكريبت - كيف تنفذ مصادقة تطبيق React أحادي الصفحة باستخدام Keycloak وتدفق PKCE؟

هذه هي المرة الأولى التي أعمل فيها مع Keycloak. لقد قمت بإعداد مثيل Keycloak على جهازي المحلي حيث يمكنني إنشاء المجالات والعملاء وما إلى ذلك.

لقد وجدت أمثلة على استخدام React + Keycloak، لكن لم يستخدم أي منها تدفق PKCE.

لا أعرف كيفية تكوين Keycloak و React. كل ما أعرفه هو أن تطبيق العميل يجب أن يكون قادرًا على توليد متحقق الرموز ومهمة التحدي الرمزي.

أبحث عن مثال بسيط لتنفيذ التفويض باستخدام React و Keycloak والذي يجب أن يتبع منح رمز التفويض OAuth 2.0 مع تدفق PKCE أو نصائح حول ما يجب فعله على جانب React وما على جانب Keycloak لتنفيذ OAuth 2.0.

ما أريد أن أفعل:

إعداد نسخة من Keycloak (جاهزة)
تسجيل عميل عام في Keycloack (جاهز)
تنفيذ سيناريو تسجيل دخول بسيط على الويب (السيناريو يتبع منح رمز التفويض OAuth 2.0 مع تدفق PKCE)

الإجابة رقم 1

(واجهة Keycloak القديمة)

اذهب إلى مجالك، ثم إلى العميل واختر عميلك:

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

(واجهة Keycloak الجديدة)

اختر مجالك، ثم انتقل إلى العميل وانقر في عميلك:

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

على الموصل في تطبيق React الخاص بك أضف "enable-pkce": true.

من وثائق Keycloak:

يدعم المهايئ KeycloakInstalled آلية PKCE [RFC 7636] لتوفير حماية إضافية أثناء تبادل الرمز مقابل التوكن في بروتوكول OIDC. يمكن تمكين PKCE من خلال إعداد "enable-pkce": true في تكوين المهايئ. يُنصح بشدة بتمكين PKCE لتجنب هجمات حقن الرمز وإعادة تشغيل الرمز.