تكوين المصادقة في عينة تطبيق Angular أحادي الصفحة باستخدام متاجرة عمل-مستهلك في Azure Active Directory

تستخدم هذه المقالة عينة لتطبيق Angular أحادي الصفحة (SPA)؛ لتوضيح كيفية إضافة مصادقةمتاجرة عمل-مستهلك في Azure Active Directory (Azure AD B2C) إلى تطبيقاتك على Angular.

نظرة عامة

OpenID Connect (OIDC) هو بروتوكول مصادقة مبني على OAuth 2.0 يمكنك استخدامه لتسجيل دخول مستخدم بأمان إلى أحد التطبيقات. تستخد عينة Angular هذه Angular MSALومتصفح MSAL. MSAL.js هي مكتبة توفرها Microsoft تعمل على تبسيط إضافة دعم المصادقة والتخويل إلى تطبيقات Angular SPA.

تدفق تسجيل الدخول

يتضمن تدفق تسجيل الدخول الخطوات التالية:

1. يفتح المستخدم التطبيق ويحدد تسجيل الدخول.
2. يبدأ التطبيق طلب مصادقة ويعيد توجيه المستخدم إلى متاجرة عمل-مستهلك في Azure Active Directory.
3. يعمل المستخدم على الاشتراك أو تسجيل الدخول وإعادة تعيين كلمة المرورأو تسجيل الدخول باستخدام حساب اجتماعي.
4. عند تسجيل الدخول بنجاح، تعمل متاجرة عمل-مستهلك في Azure Active Directory على إرجاع التعلميات البرمجية للتخويل إلى التطبيق. يتخذ التطبيق الإجراءات التالية:
   1. تبديل التعليمات البرمجية للتخويل إلى رمز مميز للمعرّف ورمز مميز للوصول ورمز مميز للتحديث.
   2. قراءة مطالبات الرمز المميز للمعرّف.
   3. بتخزين الرمز المميز للوصول والرمز المميز للتحديث في ذاكرة التخزين المؤقت في الذاكرة لاستخدامه لاحقاً. يسمح الرمز المميز للوصول للمستخدم باستدعاء الموارد المحمية، مثل واجهة برمجة تطبيقات الويب. يتم استخدام الرمز المميز للتحديث للحصول على رمز مميز جديد للوصول.

تسجيل التطبيق

لتمكين تطبيقك من تسجيل الدخول باستخدام Azure AD B2C واستدعاء واجهة برمجة تطبيقات الويب، يجب عليك تسجيل تطبيقين في مستأجر Azure AD B2C:

• يمكّن تسجيل التطبيق أحادي الصفحة (Angular) من تسجيل الدخول باستخدام متاجرة عمل-مستهلك في Azure Active Directory. أثناء تسجيل التطبيق، حدد إعادة التوجيه URI. إعادة التوجيه URI هي نقطة النهاية التي تتم إعادة توجيه المستخدم إليها بعد المصادقة باستخدام متاجرة عمل-مستهلك في Azure Active Directory. تنشئ عملية تسجيل التطبيق معرّف تطبيق، والمعروف أيضاً باسم معرّف العميل، والذي يعرّف التطبيق بشكل فريد. تستخدم هذا المقالة مثال معرّف التطبيق: 1.

• يتيح تسجيلAPI ويبلتطبيقك الاتصال API ويب المحمية. يعرض التسجيل أذونات الوصول واجهة برمجة تطبيقات الويب (النطاقات). تنشئ عملية تسجيل التطبيق معرّف تطبيق، يعرّف واجهة برمجة تطبيقات الويب بشكل فريد. تستخدم هذا المقالة مثال معرّف التطبيق: 2. منح التطبيق (معرّف التطبيق: 1) أذونات لنطاقات واجهة برمجة تطبيقات الويب (معرّف التطبيق: 2).

يصف الرسم التخطيطي التالي تسجيلات التطبيق وبنيته.

استدعاء واجهة برمجة تطبيقات الويب

بعد اكتمال المصادقة، يتفاعل المستخدمون مع التطبيق، والذي يستدعي واجهة برمجة تطبيقات ويب محمية. تستخدم واجهة برمجة تطبيقات الويب مصادقة رمز الحامل المميز. رمز الحامل هو الرمز المميز للوصول الذي حصل عليه التطبيق من Microsoft Azure Active Directory B2C. يمرر التطبيق الرمز المميز في رأس التفويض لطلب HTTPS.

Authorization: Bearer <access token>

إذا كان نطاق الرمز المميز للوصول لا يطابق نطاقات واجهة برمجة تطبيقات الويب، تحصل مكتبة المصادقة على رمز مميز للوصول جديد مع النطاقات الصحيحة.

تدفق تسجيل الخروج

يتضمن تدفق تسجيل الخروج الخطوات التالية:

1. من التطبيق، يقوم المستخدمون بتسجيل الخروج.
2. يمسح التطبيق عناصر الجلسة الخاصة به، وتقوم مكتبة المصادقة بمسح ذاكرة التخزين المؤقت للرمز المميز.
3. يأخذ التطبيق المستخدمين إلى نقطة نهاية تسجيل الخروج لـ Azure AD B2C لإنهاء جلسة Azure AD B2C.
4. تتم إعادة توجيه المستخدمين مرة أخرى إلى التطبيق.

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

قبل اتباع الإجراءات في هذه المقالة، تأكد من تشغيل الكمبيوتر:

• Visual Studio Code أو أي محرر تعليمات برمجية آخر.
• وقت تشغيل Node.js وnpm.
• Angular CLI.

الخطوة 1: تكوين تدفق المستخدم الخاص بك

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

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

• تسجيل الدخول المشتركة والاشتراك في تدفق المستخدم، مثل susi. يدعم تدفق المستخدم هذا أيضاً تجربة نسيت كلمة المرور الخاصة بك.
• تدفق تحرير ملف تعريف المستخدم، مثل edit_profile.
• تدفق إعادة تعيين كلمة مرور المستخدم، مثل reset_password.

يسبق Microsoft Azure AD B2C B2C_1_اسم تدفق المستخدم. على سبيل المثال، يصبح susi B2C_1_susi.

الخطوة 2: تسجيل Angular SPA وواجهة برمجة التطبيقات

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

2.1 تسجيل تطبيق واجهة برمجة تطبيقات الويب

لإنشاء تسجيل تطبيق واجهة برمجة تطبيقات الويب (App ID: 2)، اتبع الخطوات التالية:

1. سجل الدخول إلى مدخل Azure.

2. تأكد من استخدام الدليل الذي يحتوي على مستأجر Azure AD B2C. حدّد أيقونة الدلائل + الاشتراكات في شريط أدوات المدخل.

3. في صفحة Portal settings | Directories + subscriptions ابحث عن دليل Azure AD B2C في قائمة Directory name ثم حدّد Switch.

4. في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.

5. حدد App registrations، ثم حدد New registration.

6. تحت Name، أدخل اسمًا للتطبيق (على سبيل المثال، my-api1). اترك القيم الافتراضية لـ Redirect URIوأنواع الحسابات المدعومة.

7. حدد تسجيل.

8. بعد اكتمال عملية تسجيل التطبيق، حدد "Overview".

9. سجل قيمة Application (client) ID لاستخدامه لاحقًا عند تكوين تطبيق الويب.

   

2.2 تكوين النطاقات

1. حدد التطبيق my-api1 الذي أنشأته (App ID: 2) لفتح صفحة Overview الخاصة به.

2. ضمن إدارة، حدد كشف واجهة برمجة تطبيقات.

3. بجوار معرف التطبيق URI، حدد رابط تعيين. استبدل القيمة الافتراضية (GUID) باسم فريد (على سبيل المثال، tasks-api) ثم حدد Save.

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

4. ضمن النطاقات المعرفة من قبل واجهة برمجة التطبيقات API هذه، حدد إضافة نطاق.

5. لإنشاء نطاق يحدد الوصول للقراءة إلى واجهة برمجة التطبيقات:

   1. بالنسبة إلى اسم النطاق، أدخل المهام.قراءة.
   2. بالنسبة إلى اسم عرض موافقة المسؤول، أدخل قراءة الوصول إلى واجهة برمجة تطبيقات المهام.
   3. بالنسبة إلى وصف موافقة المسؤول، أدخل السماح بالوصول للقراءة إلى واجهة برمجة تطبيقات المهام.

6. حدد إضافة نطاق.

7. حدد إضافة نطاق، ثم أضف نطاقًا يحدد حق الوصول للكتابة إلى واجهة برمجة التطبيقات:

   1. بالنسبة إلى اسم النطاق، أدخل features.write.
   2. بالنسبة إلى اسم عرض موافقة المسؤول، أدخل واجهة برمجة تطبيقات الوصول للكتابة إلى المهام.
   3. بالنسبة إلى وصف موافقة المسؤول، أدخل السماح بالوصول للكتابة إلى واجهة برمجة تطبيقات المهام.

8. حدد إضافة نطاق.

2.3 تسجيل تطبيق Angular

اتبع هذه الخطوات لإنشاء تسجيل تطبيق Angular:

1. سجل الدخول إلى مدخل Azure.
2. إذا كان لديك حق الوصول إلى عدة مستأجرين، فحدد رمز الإعدادات في القائمة العلوية للتبديل إلى مستأجر Azure AD B2C من قائمة Directories + subscriptions.
3. في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
4. حدد App registrations، ثم حدد New registration.
5. بالنسبة إلى الاسم: أدخل اسمًا للتطبيق. على سبيل المثال، أدخِل MyApp.
6. ضمن أنواع الحسابات المدعومة، حدد الحسابات في أي موفر هوية أو دليل تنظيمي (لمصادقة المستخدمين بعمليات سير عمل المستخدمين).
7. ضمن Redirect URI، حدد Single-page application (SPA)، وأدخِل http://localhost:4200 في المربع النصي لعنوان URL.
8. ضمنأذونات الوصول، حدد مربع الاختيارلمنح موافقة المسؤول لفتح أذونات دخول والوصول عند عدم الاتصال بالإنترنت.
9. حدد تسجيل.
10. سجّل قيمة معرّف التطبيق (للعميل) لاستخدامه لاحقاً عند تكوين تطبيق الويب.

2.5 منح أذونات

لمنح تطبيقك (App ID: 1) أذونات، اتبع الخطوات التالية:

1. حدد App registrations، ثم حدد التطبيق الذي قمت بإنشائه (معرف التطبيق: 1).

2. ضمن خانة الإدارة، اختر الأذونات الخاصة بواجهة برمجة التطبيقات.

3. ضمن أذونات مكونة، حدد إضافة إذن.

4. حدد علامة التبويب واجهات برمجة التطبيقات الخاصة بي.

5. حدد واجهة برمجة التطبيقات (App ID: 2) التي يجب منح تطبيق الويب حق الوصول إليها. على سبيل المثال، أدخل my-api1.

6. ضمن Permission، وسّع المهام، ثم حدد النطاقات التي حددتها سابقًا (على سبيل المثال، tasks.read وtasks.write).

7. حدد إضافة أذونات.

8. حدد «منح موافقة المسؤول لـ» <اسم المستأجر الخاص بك>.

9. حدد نعم.

10. حدد Refresh، ثم تحقق من ظهور منح لـ ... ضمن Status لكلا النطاقين.

11. من قائمة Configured permissions، حدد النطاق الخاص بك، ثم انسخ الاسم الكامل للنطاق.

    

الخطوة 3: الحصول على عينة التعليمات البرمجية Angular

توضح هذه العينة كيف يمكن لتطبيق Angular أحادي الصفحة استخدام متاجرة عمل-مستهلك في Azure Active Directory لاشتراك المستخدم وتسجيل دخوله. ثم يكتسب التطبيق رمز مميز للوصول، ويستدعي واجهة برمجة تطبيقات ويب محمية.

نزّل ملف .zip من العينة أو نسخ العينة من مستودع GitHub باستخدام الأمر التالي:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 تكوين عينة Angular

الآن بعد أن حصلت على عينة SPA، حدّث التعليمات البرمجية بقيم متاجرة عمل-مستهلك في Azure Active Directory وواجهة برمجة تطبيقات الويب. في عينة المجلد، ضمن المجلد src/app، افتح الملف auth-config.ts. حدّث المفاتيح بالقيم المطابقة:

المقطع	مفتاح	القيمة‬
b2cPolicies	names	تدفق المستخدم أو النهج المخصص الذي أنشأته في الخطوة 1.
b2cPolicies	authorities	استبدل your-tenant-name باسم مستأجر متاجرة عمل-مستهلك في Azure Active Directory. على سبيل المثال، استخدم contoso.onmicrosoft.com. ثم استبدل اسم النهج بتدفق المستخدم أو النهج المخصص الذي أنشأته في الخطوة 1. على سبيل المثال: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
b2cPolicies	authorityDomain	اسم مستأجر متاجرة عمل-مستهلك في Azure Active Directory. على سبيل المثال: contoso.onmicrosoft.com.
التكوين	clientId	معرّف تطبيق الويب Angular من الخطوة 2.3.
protectedResources	نقطة النهاية	عنوان URL لواجهة برمجة تطبيقات الويب: http://localhost:5000/api/todolist.
protectedResources	scopes	نطاقات واجهة برمجة تطبيقات الويب التي أنشأتها في الخطوة 2.2. على سبيل المثال: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

ينبغي أن تبدو التعليمات البرمجية src/app/auth-config.ts الناتجة مشابهة للعينة التالية:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

الخطوة 4: احصل على نموذج التعليمات البرمجية لواجهة برمجة تطبيقات الويب

الآن بعد أن تم تسجيل واجهة برمجة تطبيقات الويب وحددت نطاقاتها، قم بتكوين رمز واجهة برمجة تطبيقات الويب للعمل مع مستأجر Azure AD B2C.

نزّل أرشيف ملفات *.zipi، أو انسخ عينة مشروع واجهة برمجة تطبيقات الويب من GitHub. يمكنك أيضًا التصفح مباشرةً إلى مشروع Azure-Samples/active-directory-b2c-javascript-nodejs-webapi على GitHub باستخدام الأمر التالي:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

الخطوة 4.1: تكوين واجهة برمجة تطبيقات الويب

في عينة المجلد، افتح الملف config.json. يحتوي هذا الملف على معلومات حول موفر الهوية Microsoft Azure AD B2C. يستخدم تطبيق واجهة برمجة تطبيقات الويب هذه المعلومات للتحقق من رمز الوصول الذي يمرره تطبيق الويب كرمز لحاملها. قم بتحديث الخصائص التالية لإعدادات التطبيق:

المقطع	مفتاح	القيمة‬
بيانات الاعتماد	الاسم الخاص بالمستأجر	الجزء الأول من اسم مستأجر متاجرة عمل-مستهلك في Azure Active Directory. على سبيل المثال: contoso.
بيانات الاعتماد	clientID	معرّف تطبيق واجهة برمجة تطبيقات الويب من الخطوة 2.1. في الرسم البياني السابق، يكون التطبيق مع معرّف التطبيق: 2.
بيانات الاعتماد	المُصدر	(اختياري) قيمة مطالبة iss لمصدر شهادة الرمز المميز. بشكل افتراضي، تعمل متاجرة عمل-مستهلك في Azure Active Directory على إرجاع الرمز المميز بالتنسيق التالي:https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. استبدل <your-tenant-name> بالجزء الأول من اسم مستأجر متاجرة عمل-مستهلك في Azure Active Directory. استبدل <your-tenant-ID> بـ معرّف مستأجر متاجرة عمل-مستهلك في Azure Active Directory.
النُهج	policyName	تدفق المستخدم أو النهج المخصص الذي أنشأته في الخطوة 1. إذا كان تطبيقك يستخدم تدفقات مستخدمين متعددة أو سياسات مخصصة، فحدد واحدة فقط. على سبيل المثال، استخدم تدفق المستخدمين للاشتراك أو تسجيل الدخول.
resource	النطاق	نطاقات تسجيل تطبيق واجهة برمجة تطبيقات الويب من الخطوة 2.5.

ينبغي أن يبدو ملف التكوين النهائي مثل JSON التالي:

{
    "credentials": {
        "tenantName": "<your-tenant-namee>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
} 

الخطوة 5: تشغيل Angular SPA وواجهة برمجة تطبيقات الويب

أنت الآن على استعداد لاختبار وصول Angular إلى واجهة برمجة التطبيقات. في هذه الخطوة، شغّل كل من واجهة برمجة تطبيقات الويب وعينة تطبيق Angular على الكمبيوتر المحلي. ثم سجل الدخول إلى تطبيق Angular، وحدد الزر TodoList لبدء طلب إلى واجهة برمجة التطبيقات المحمية.

تشغيل واجهة برمجة تطبيقات الويب

1. افتح نافذة وحدة التحكم، وغيّر إلى الدليل الذي يحتوي على عينة واجهة برمجة تطبيقات الويب. على سبيل المثال:

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. شغّل الأوامر التالية:

   npm install && npm update
   node index.js
   

   تعرض نافذة وحدة التحكم رقم المنفذ الذي يتم فيه استضافة التطبيق:

   Listening on port 5000...
   

تشغيل تطبيق Angular

1. افتح نافذة وحدة تحكم أخرى، وغيّر إلى الدليل الذي يحتوي على عينة Angular. على سبيل المثال:

   cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
   

2. شغّل الأوامر التالية:

   npm install && npm update
   npm start
   

   تعرض نافذة وحدة التحكم رقم المنفذ الخاص بالمكان الذي يتم فيه استضافة التطبيق:

   Listening on port 4200...
   

3. انتقل إلى http://localhost:4200 في المستعرض لديك لعرض التطبيق.

4. حدد تسجيل الدخول.

   

5. قم بإكمال عملية التسجيل أو تسجيل الدخول.

6. عند تسجيل الدخول بنجاح، يجب أن تشاهد ملف التعريف الخاص بك. من القائمة، حدد TodoList.

   

7. حدد Add لإضافة عناصر جديدة إلى القائمة، أو استخدم الأيقونات لحذف العناصر أو تحريرها.

   

نشر تطبيقك

في تطبيق الإنتاج، عادةً ما تكون إعادة التوجيه URI لتسجيل التطبيق هي نقطة نهاية يمكن الوصول إليها بشكل عام حيث يتم تشغيل تطبيقك، مثل https://contoso.com.

يمكنك إضافة وتعديل عناوين "URI" لإعادة التوجيه في تطبيقاتك المسجلة في أي وقت. تنطبق القيود التالية على إعادة توجيه عناوين "URI":

• يجب أن يبدأ عنوان URL للرد بنظام https.
• يكون عنوان "URL" للرد حساسًا لحالة الأحرف. يجب أن تتطابق حالته مع حالة مسار عنوان "URL" للتطبيق قيد التشغيل.

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

• تعرّف على المزيد حول عينة التعليمة البرمجية
• تمكين المصادقة في تطبيق Angular الخاص
• تكوين خيارات المصادقة في تطبيق Angular
• تمكين المصادقة في واجهة برمجة تطبيق الويب لديك