كيفية تأمين واجهة ReactJS الخاصة بك مع Azure AD B2C

قبل شهرين ، تعرفت على عالم ReactJS. متطلبات العميل لإنشاء واجهة ويب على الويب. قضيت كل أيام مطوري في تطوير أنظمة الواجهة الخلفية باستخدام Microsoft ASP.NET Web API و C #. ولا يمكنك قول لا لعملائك ، أليس كذلك؟ إذا كان عليك أن تفعل ذلك عليك أن تفعل ذلك. لذلك خطوة إلى عالم جديد من بناء تطبيقات الواجهة الأمامية.

كان لدى عميلي بالفعل واجهة ويب API وواجهة ويب. كان هذا المطلب هو إنشاء وحدة فرعية منفصلة أخرى باستخدام ReactJS للتفاعل مع واجهة برمجة تطبيقات الويب هذه. كما وضعت المخاوف الأمنية المعتادة في الجدول و نعم لديهم بالفعل إعداد Azure AD B2C لإدارة المستخدم. كان التحدي هو استخدام ReactJS للتفاعل مع Azure AD B2C للمصادقة والترخيص.

ثق بي ، كان هناك عدد قليل من الدروس حول كيفية توصيل Azure AD و Azure AD B2C بتقنيات الواجهة الأمامية. ولكن جميعهم كانوا قطعًا وقطعًا هنا وهناك. لم أتمكن من العثور على برنامج تعليمي خطوة بخطوة يرشدك. فكرت لماذا لا تكتب واحدة.

لقد قدمت بعض الافتراضات هنا ، بأنك بالفعل:

  1. استمتع بتجربة ReactJS ولا تعرف كيفية توصيل Azure AD B2C.
  2. لديك حساب أزور. ليس لديك واحد؟ انقر على هذا الرابط: https://azure.microsoft.com/en-us/ وانقر على الزر الأخضر الكبير الدسم الذي يقول "ابدأ مجانًا>"
  3. لديك دليل كامل الوظائف Azure AD B2C مع المستخدمين. إذا كان لديك حساب Azure وتحتاج إلى إنشاء حساب Azure AD B2C ، يمكنك إلقاء نظرة على هذا الرابط: https://bit.ly/2U8X9Ft

لنبدأ بإنشاء مشروع ReactJS جديد تمامًا

  • إذا كنت في نظام Windows ، فافعل موجه الأوامر أو المحطة الطرفية للأنظمة الأساسية الأخرى مثل Mac أو Linux.
  • الذهاب إلى الداخل إلى دليل العمل الخاص بك.
  • اكتب الأمر التالي واضغط ENTER لإنشاء مشروع ReactJS.
$ create-react-app rjaadb2c
  • انتقل الآن إلى دليل المشروع المنشأ حديثًا عن طريق الكتابة ،
$ cd rjaadb2c
  • افتح محرر الكود المفضل (سأستخدم كود VS) وافتح الدليل الذي قمت بإنشائه في الخطوة السابقة.
  • يجب أن يبدو محررك هكذا
تم إنشاء مشروع ReactJS حديثًا في VS Code

رمز VS لديه هذه الميزة الصغيرة لطيفة تسمى نافذة المحطة الطرفية. سيؤدي هذا إلى فتح محطة داخل محرر الشفرة. إنها ميزة مفيدة للغاية. انقر فوق Terminal> New Terminalin في شريط القوائم.

  • الآن في نوع النافذة الطرفية
$ npm البداية

هذا سوف ينفذ مشروع ReactJS. ويجب أن تبدو مثل هذا.

تطبيق ReactJS الخاص بك يعمل ويعمل تحت http: // localhost: 3000

حسنًا ، دعنا نعد بيئة Azure AD B2C الآن.

تحضير بيئة Azure AD B2C

في هذا القسم ، سنقوم بإعداد بيئة Azure AD B2C للمصادقة والترخيص.

  • قم الآن بتسجيل الدخول إلى بوابة أزور من خلال النقر على هذا الرابط: https://portal.azure.com
  • انقر فوق الزر تصفية في شريط القائمة وانتقل إلى دليل B2C
زر تصفية للتبديل إلى دليل B2C
  • الآن انقر على تسمية جميع الخدمات في قائمة الشريط الجانبي.
  • اكتب "الإعلان b2c" في مربع البحث "جميع الخدمات".
  • انقر فوق علامة Azure AD B2C
أزور م B2C
  • في شفرة Azure AD B2C ، انقر فوق تسمية التطبيقات.
  • في شفرة التطبيقات ، انقر فوق إضافة + زر.
  • املأ الآن المعلومات المطلوبة لإنشاء تطبيق جديد لـ Azure AD B2C ، كما هو موضح أدناه
إنشاء تطبيق جديد
  1. كما تراه واضحًا. أعط اسمًا فريدًا لتطبيقك.
  2. ثم حدد نعم إلى "Web App / Web API" لأننا نقوم بإنشاء تطبيق ويب.
  3. واترك نعم كإعداد افتراضي "السماح بالتدفق الضمني"
  4. اكتب "عنوان URL الرد" في هذه الحالة هو عنوان المضيف المحلي لدينا. اكتب "api" أو أي معرف من اختيارك بـ "معرف التطبيق URI (اختياري)".

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

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

  • الآن انقر فوق الزر "إنشاء" لإنشاء التطبيق الجديد.
تم إنشاء التطبيق بنجاح
  • انقر الآن على ملصق تدفقات (سياسات) المستخدم في شفرة التطبيقات من Azure AD B2C - التطبيقات.
  • انقر على زر تدفق مستخدم جديد.
تدفق مستخدم جديد
  • في رابط إنشاء تدفق مستخدم أسفل علامة التبويب الموصى بها ، انقر فوق الارتباط "تسجيل وتسجيل الدخول".
إنشاء تدفق المستخدم
  • في إنشاء شفرة ، تأكد من ملء النموذج حسب الصورة أدناه. لقد قدمت كل التعليمات والمعلومات التي تحتاجها في الشفرة نفسها.
الاشتراك وتسجيل الدخول المستخدم التدفق
  • لقد نجحت الآن في إنشاء Sing up وتسجيل دخول المستخدم. بالنقر فوق الزر "تشغيل تدفق المستخدم" ، ستتمكن من اختبار هذا التدفق.
تدفق المستخدم خلق

هذا هو كل ما تحتاجه في Azure AD B2C end. دعونا نفعل قائمة مرجعية.

  1. حساب أزور []
  2. Azure AD B2C Tenant []
  3. تطبيق Azure AD B2C []
  4. تدفق مستخدم للتسجيل وتسجيل الدخول []

ممتاز ، والآن يتم الإعداد. دعنا نعود إلى تطبيق رد الفعل لدينا ونقوم ببعض الترميز.

تثبيت المكتبة

الآن ، عد إلى تطبيق ReactJS. في المحطة ، اكتب الأمر التالي لتثبيت المكتبة. تذكر أننا كنا نستخدم نافذة محطة VSCode.

$ npm تثبيت react-azure-adb2c - حفظ
react-azure-adb2c هي مكتبة ستساعدك في الحصول على الوظيفة أو Azure AD B2C في تطبيق ReactJS الخاص بك. بالنقر هنا ، ستحصل على وثائق مختصرة عن كيفية استخدامه في تطبيق ReactJS الخاص بك.

الآن قمت بتثبيت المكتبة بنجاح. في تطبيق ReactJS ، انقر فوق ملف index.js ، في الجزء العلوي من الملف ، أضف السطر التالي من التعليمات البرمجية.

أضف سطر التعليمات البرمجية هذا بعد الاستيراد للتهيئة.

أنت الآن بحاجة إلى استبدال العناصر المحددة بعلامة "<>" من القيم الموجودة في تطبيق Azure AD B2C الخاص بك.

الآن عد إلى بوابة Azure واحصل على المعلومات التالية.

للاستيلاء على قيمة المستأجر ، ارجع إلى دليل Azure AD B2C. ضمن النظرة العامة ، انسخ القيمة في حقل "اسم المجال".

اسم المجال هو المستأجر الخاص بك.

الآن ، للاستيلاء على applicationId ، انقر فوق تسمية التطبيقات ، وانسخ المعرّف من التطبيق المنشأ حديثًا ، وفي هذه الحالة ، "ReactJS AADB2C" واستبدل القيمة في حقل applicatoinId.

رقم الاستمارة

انقر الآن على ملصق تدفقات المستخدم (السياسات) وانسخ اسم السياسة واستبدل القيمة في حقل signInPolicy.

سياسة تسجيل الدخول

الآن مجال مجموعة النطاقات. هذه المجموعة سوف تعطي الأذونات اللازمة لتطبيقك. ستسمح هذه الأذونات لتطبيق ReactJS بالوصول إلى الوظائف في Azure AD B2C.

للحصول على هذه المعلومات:

  1. انقر فوق تسمية التطبيقات.
  2. انقر على تطبيقك "ReactJS AADB2C".
  3. انقر على تسمية النطاقات المنشورة
  4. الحصول على القيمة في العمود FULL SCOPE VALUE لنطاق user_impersonation.
  5. استبدل القيمة في مجموعة النطاقات (تذكر أن هذه صفيف ، ولكل نطاق تحتاج إلى إضافة عنصر في هذه المجموعة)
تفضل بزيارة هذا الرابط للحصول على وثائق مفصلة كاملة عن النطاقات.

ممتاز ، لقد انتهينا تقريبا. الآن ، يجب أن يبدو رمز التهيئة هكذا.

أكثر شيء واحد لإضافة. دعنا نستبدل رمز ReactDOM.render () الافتراضي بهذا.

بعد كل هذه التغييرات ، يجب أن يبدو ملف index.js الخاص بك هكذا.

اوشكت على الوصول. دعونا نفعل اختبار المدى. في نافذة النافذة الطرفية الخاصة بك وتنفيذ الأمر التالي.

$ npm البداية

يجب أن تشاهد هذه الشاشة.

Azure AD B2C شاشة تسجيل الدخول.

استخدم الآن معلومات تسجيل الدخول الخاصة بك لبوابة Azure أو يمكنك إنشاء حساب جديد من خلال النقر على "التسجيل الآن". تذكر؟ لقد أنشأنا تدفق مستخدم لكل من تسجيل الدخول والاشتراك. رائع ليس كذلك.

شاشة الاشتراك.

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

أدوات المطور كروم. تخزين جلسة التطبيق.

لإصلاح هذا،

  1. العودة إلى بوابة أزور
  2. انتقل إلى دليل Azure AD B2C
  3. انقر فوق تسمية التطبيقات
  4. انقر على التطبيق ("ReactJS AADB2C"). لقد أنشأت للتو.
  5. انقر فوق تسمية الوصول إلى واجهة برمجة التطبيقات
  6. انقر فوق + إضافة
  7. حدد التطبيق في الخطوة 4 من القائمة المنسدلة تحديد API.
  8. حدد "الوصول إلى هذا التطبيق نيابة عن المستخدم الذي قام بتسجيل الدخول ..."
  9. انقر فوق موافق
إعطاء التطبيق الخاص بك الأذونات اللازمة.

لنعد إلى تطبيق ReactJS وقم بتحديثه أو إعادة تشغيله.

تهانينا !!! انتهيت.

ReactJS التطبيق

دعنا نحصل على بعض المعلومات من Azure AD B2C ونعرضها تحت شعار رد الفعل.

العودة إلى المحطة وتثبيت الحزمة التالية.

$ npm تثبيت jwt-decode - حفظ
تسمح لك هذه الحزمة بفك تشفير الرمز المميز JWT من Azure AD B2C والحصول على معلومات بداخله.

أنت الآن بحاجة إلى زيارة بوابة Azure والسماح لـ Azure AD B2C بإرسال هذه المعلومات إليك. لفعل هذا،

  1. ارجع إلى بوابة Azure.
  2. انتقل إلى دليل أزور B2C الخاص بك.
  3. انقر فوق تسمية (سياسات) تدفقات المستخدم.
  4. انقر على سياسة تسجيل الدخول التي قمت بإنشائها.
  5. انقر على رابط مطالبات التطبيق
  6. حدد الحقول التي تحتاجها ، وفي هذه الحالة قمت باختيار المدينة ، البلد / المنطقة ، عناوين البريد الإلكتروني ، اسم العرض ، الاسم المحدد (سيكون هذا هو الاسم الأول) ، اللقب (سيكون هذا هو اسم العائلة).
  7. انقر فوق حفظ.
تمكين مطالبات التطبيق.

ارجع إلى تطبيق ReactJS وانقر على دليل src. إضافة ملف جديد. سمها باسم Auth.js. انسخ والصق الكود التالي داخل الملف.

افتح الآن App.js واستبدله بهذا الرمز.

لقد انتهينا جميعًا. يتيح إعادة تشغيل تطبيق ReactJS لدينا.

$ npm البداية

ستتم مطالبتك باستخدام شاشة تسجيل الدخول إلى Microsoft ، وبعد تسجيل الدخول بنجاح ، سترى هذه الشاشة.

لقد التقطنا معلومات من Azure AD B2C

وانتزاع الرمز من هنا.

أتمنى لك نهارا سعيد.