إضافة مصادقة إلى موقعك الثابت في Azure Static Web Apps

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

في هذه المقالة، يمكنك إضافة مصادقة إلى موقعك وتشغيل الموقع محليا قبل النشر إلى السحابة.

المتطلبات الأساسية

يستمر هذا البرنامج التعليمي من البرنامج التعليمي السابق، ولديه نفس المتطلبات الأساسية.

المصادقة والتخويل

تسهل Azure Static Web Apps استخدام موفري المصادقة الشائعين مثل Microsoft Entra وGoogle دون كتابة التعليمات البرمجية المتعلقة بالأمان.

إشعار

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

في هذه المقالة، يمكنك تكوين موقعك لاستخدام معرف Microsoft Entra للمصادقة.

إضافة مصادقة

في المقالة الأخيرة، قمت بإنشاء staticwebapp.config.json ملف. يتحكم هذا الملف في العديد من ميزات Azure Static Web Apps، بما في ذلك المصادقة.

1. staticwebapp.config.json قم بتحديث لمطابقة التكوين التالي.

   {
     "navigationFallback": {
       "rewrite": "/index.html"
     },
     "routes": [
       {
         "route": "/*",
         "allowedRoles": [ "authenticated" ]
       }
     ],
     "responseOverrides": {
       "401": {
         "statusCode": 302,
         "redirect": "/.auth/login/aad"
       }
     }
   }
   

   routes يسمح لك القسم بتقييد الوصول إلى الأدوار المسماة. هناك دوران معرفان مسبقا: authenticated و anonymous. إذا لم يكن لدى المستخدم المتصل دور مسموح به، يقوم الخادم بإرجاع استجابة "401 غير مصرح به".

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

2. قم بتشغيل الموقع محليا.

   لتشغيل الموقع محليا، قم بتشغيل الأمر Static Web Apps CLIstart.

   npx swa start
   

   يبدأ هذا الأمر محاكي Azure Static Web Apps على http://localhost:4280.

   يظهر عنوان URL هذا في نافذة المحطة الطرفية بعد بدء تشغيل الخدمة.

3. حدد عنوان URL للانتقال إلى الموقع.

   بمجرد فتح الموقع في المستعرض، يتم عرض صفحة تسجيل الدخول إلى المصادقة المحلية.

   

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

4. أدخل اسم مستخدم، ثم حدد تسجيل الدخول.

   بمجرد المصادقة، يتم عرض موقعك.

نشر الموقع إلى Azure

نشر موقعك بنفس الطريقة التي قمت بها في البرنامج التعليمي الأخير.

1. إنشاء موقعك:

   npx swa build
   

2. انشر موقعك على تطبيق الويب الثابت:

   npx swa deploy --app-name swa-demo-site
   

   يتم عرض عنوان URL لموقعك بمجرد الانتهاء من النشر. حدد عنوان URL للموقع لفتح الموقع في المستعرض. يتم عرض صفحة تسجيل الدخول القياسية لمعرف Microsoft Entra:

   

   تسجيل الدخول باستخدام حساب Microsoft

تنظيف الموارد (اختياري)

إذا كنت لا تستمر في البرامج التعليمية الأخرى، فقم بإزالة مجموعة موارد Azure والموارد:

az group delete -n swa-tutorial

عند إزالة مجموعة موارد، يمكنك حذف كافة الموارد التي تحتوي عليها. لا يمكنك التراجع عن هذا الإجراء.

المحتوى ذو الصلة

• المصادقة والتخويل
• المصادقة المخصصة