السابق

التالي

التمرين - تكوين مزودي المصادقة والوصول

مكتمل

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

في هذا التمرين، ستكمل الخطوات التالية:

1. إضافة قواعد إلى تكوين التوجيه لتعطيل بعض مزودي المصادقة.
2. تأمين قائمة المنتجات بحيث يمكن للمستخدمين المصادقين فقط الوصول إليها.
3. توزيع التطبيق المحدث.
4. اختبار مدى فعالية القيود.

تعطيل مزودي المصادقة

سنقوم بتحديث تكوين التوجيه لتطبيقنا لتعطيل موفر مصادقة Microsoft Entra.

1. افتح المشروع في تعليمة Visual Studio.

2. افتح الملف التالي.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. في جذر كائن JSON، أضف تكوين التوجيه التالي.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   بإضافة قاعدة التوجيه هذه، نمنع مستخدمينا من الوصول إلى موفر مصادقة Microsoft Entra.

تأمين الوصول إلى قائمة المنتجات

بعد ذلك، نريد تأمين قائمة المنتجات بحيث لا يتمكن سوى المُصادق عليه من الوصول إلى واجهة برمجة التطبيقات. لذلك سنضيف قاعدة تحويل أخرى في ملف التكوينstaticwebapp.config.json.

1. أضف هذه القاعدة في الجزء العلوي من الصفيف routes.

   {
     "route": "/api/products/*",
     "allowedRoles": ["authenticated"]
   },
   

2. سيظهر ملفك المكتمل staticwebapp.config.jsonعلى الشكل التالي:

   {
     "routes": [
       {
         "route": "/api/products/*",
         "allowedRoles": ["authenticated"]
       },
       {
         "route": "/.auth/login/aad",
         "statusCode": 404
       }
     ],
     "navigationFallback": {
       "rewrite": "/index.html",
       "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
     }
   }
   

وزع تغييراتك

قبل اختبار نتيجة هذا التكوين، سنعيد نشر تطبيقنا.

1. في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.

2. اكتب Git: Commit All وحدده.

3. أدخل Secure access كرسالة تثبيت، ثم اضغط Enter.

4. افتح لوحة الأوامر بالضغط على F1.

5. أدخل Git:Pull ثم حددها، ثم اضغط Enter.

بعد دفع تغييراتك، انتظر حتى تشغيل عملية الإنشاء والتوزيع. يجب أن تكون التغييرات مرئية على تطبيقك الموزع بعد ذلك.

اختبر القيود الجديدة

بعد إعادة توزيع تطبيقك، يمكنك اختبار أن القيود الجديدة فعالة.

1. في نافذة Visual Studio Code Explorer، ارجع إلى قسم Static Web Apps وانقر بزر الماوس الأيمن فوق my-static-web-app-and-api وحدد Browse Site لعرض التطبيق في مستعرضك.

2. إذا لم تكن قد سجلت الدخول، يجب أن ترى الرسالة غير مصرح بها بدلًا من قائمة المنتجات.

3. حدد معرف Microsoft Entra في قائمة موفري المصادقة لتسجيل الدخول.

   يجب أن تشاهد صفحة خطأ 404 على النحو التالي:

   

4. استخدم زر الرجوع في مستعرضك للعودة إلى تطبيقك.

5. حدد GitHub في قائمة مزودي المصادقة لتسجيل الدخول.

6. أدخل بيانات اعتماد GitHub خاصتك إذا طلب منك ذلك، ثم حدد Grant Consent على صفحة موافقة Azure.

لقد سجلت الدخول الآن ويجب أن تشاهد قائمة المنتجات.

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

تهانينا. تهانينا، لقد نفذت سير عمل مصادقة كامل في تطبيق الويب الثابت خاصتك!

متابعة