لم يعد هذا المتصفح مدعومًا.
بادر بالترقية إلى Microsoft Edge للاستفادة من أحدث الميزات والتحديثات الأمنية والدعم الفني.
ملاحظة
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تسجيل الدخول أو تغيير الدلائل.
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تغيير الدلائل.
تستخدم هذه المقالة عينة لتطبيق Angular أحادي الصفحة (SPA)؛ لتوضيح كيفية إضافة مصادقةمتاجرة عمل-مستهلك في Azure Active Directory (Azure AD B2C) إلى تطبيقاتك على Angular.
OpenID Connect (OIDC) هو بروتوكول مصادقة مبني على OAuth 2.0 يمكنك استخدامه لتسجيل دخول مستخدم بأمان إلى أحد التطبيقات. تستخد عينة Angular هذه Angular MSALومتصفح MSAL. MSAL.js هي مكتبة توفرها Microsoft تعمل على تبسيط إضافة دعم المصادقة والتخويل إلى تطبيقات Angular SPA.
يتضمن تدفق تسجيل الدخول الخطوات التالية:
لتمكين تطبيقك من تسجيل الدخول باستخدام 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>
إذا كان نطاق الرمز المميز للوصول لا يطابق نطاقات واجهة برمجة تطبيقات الويب، تحصل مكتبة المصادقة على رمز مميز للوصول جديد مع النطاقات الصحيحة.
يتضمن تدفق تسجيل الخروج الخطوات التالية:
قبل اتباع الإجراءات في هذه المقالة، تأكد من تشغيل الكمبيوتر:
عندما يحاول المستخدمون تسجيل الدخول إلى تطبيقك، يبدأ التطبيق في طلب مصادقة لنقطة نهاية التخويل عبر تدفق المستخدم. يحدد تدفق المستخدم تجربة المستخدم ويتحكم فيها. بعد أن يكمل المستخدمون تدفق المستخدم، ينشئ Azure AD B2C رمزًا مميزًا، ثم يعيد توجيه المستخدم مرةً أخرى إلى تطبيقك.
إذا لم تكن قد قمت بذلك بالفعل، فبادر بإنشاء تدفق مستخدم أو نهج مخصص. كرر الخطوات لإنشاء ثلاثة تدفقات مستخدم منفصلة كما يلي:
susi. يدعم تدفق المستخدم هذا أيضاً تجربة نسيت كلمة المرور الخاصة بك.edit_profile.reset_password.يسبق Microsoft Azure AD B2C B2C_1_اسم تدفق المستخدم. على سبيل المثال، يصبح susi B2C_1_susi.
في هذه الخطوة، يمكنك إنشاء التسجيلات لتطبيق Angular SPA وواجهة برمجة تطبيقات الويب. يمكنك أيضاً تحديد نطاقات واجهة برمجة تطبيقات الويب.
لإنشاء تسجيل تطبيق واجهة برمجة تطبيقات الويب (App ID: 2)، اتبع الخطوات التالية:
سجل الدخول إلى مدخل Azure.
تأكد من استخدام الدليل الذي يحتوي على مستأجر Azure AD B2C. حدّد أيقونة الدلائل + الاشتراكات في شريط أدوات المدخل.
في صفحة Portal settings | Directories + subscriptions ابحث عن دليل Azure AD B2C في قائمة Directory name ثم حدّد Switch.
في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
حدد App registrations، ثم حدد New registration.
تحت Name، أدخل اسمًا للتطبيق (على سبيل المثال، my-api1). اترك القيم الافتراضية لـ Redirect URIوأنواع الحسابات المدعومة.
حدد تسجيل.
بعد اكتمال عملية تسجيل التطبيق، حدد "Overview".
سجل قيمة Application (client) ID لاستخدامه لاحقًا عند تكوين تطبيق الويب.
حدد التطبيق my-api1 الذي أنشأته (App ID: 2) لفتح صفحة Overview الخاصة به.
ضمن إدارة، حدد كشف واجهة برمجة تطبيقات.
بجوار معرف التطبيق URI، حدد رابط تعيين. استبدل القيمة الافتراضية (GUID) باسم فريد (على سبيل المثال، tasks-api) ثم حدد Save.
عندما يطلب تطبيق الويب الخاص بك رمز وصول لواجهة برمجة تطبيقات الويب، يجب أن يضيف عنوان URI هذا كبادئة لكل نطاق تحدده لواجهة برمجة التطبيقات.
ضمن النطاقات المعرفة من قبل واجهة برمجة التطبيقات API هذه، حدد إضافة نطاق.
لإنشاء نطاق يحدد الوصول للقراءة إلى واجهة برمجة التطبيقات:
حدد إضافة نطاق.
حدد إضافة نطاق، ثم أضف نطاقًا يحدد حق الوصول للكتابة إلى واجهة برمجة التطبيقات:
حدد إضافة نطاق.
اتبع هذه الخطوات لإنشاء تسجيل تطبيق Angular:
http://localhost:4200 في المربع النصي لعنوان URL.
لمنح تطبيقك (App ID: 1) أذونات، اتبع الخطوات التالية:
حدد App registrations، ثم حدد التطبيق الذي قمت بإنشائه (معرف التطبيق: 1).
ضمن خانة الإدارة، اختر الأذونات الخاصة بواجهة برمجة التطبيقات.
ضمن أذونات مكونة، حدد إضافة إذن.
حدد علامة التبويب واجهات برمجة التطبيقات الخاصة بي.
حدد واجهة برمجة التطبيقات (App ID: 2) التي يجب منح تطبيق الويب حق الوصول إليها. على سبيل المثال، أدخل my-api1.
ضمن Permission، وسّع المهام، ثم حدد النطاقات التي حددتها سابقًا (على سبيل المثال، tasks.read وtasks.write).
حدد إضافة أذونات.
حدد «منح موافقة المسؤول لـ» <اسم المستأجر الخاص بك>.
حدد نعم.
حدد Refresh، ثم تحقق من ظهور منح لـ ... ضمن Status لكلا النطاقين.
من قائمة Configured permissions، حدد النطاق الخاص بك، ثم انسخ الاسم الكامل للنطاق.
توضح هذه العينة كيف يمكن لتطبيق Angular أحادي الصفحة استخدام متاجرة عمل-مستهلك في Azure Active Directory لاشتراك المستخدم وتسجيل دخوله. ثم يكتسب التطبيق رمز مميز للوصول، ويستدعي واجهة برمجة تطبيقات ويب محمية.
نزّل ملف .zip من العينة أو نسخ العينة من مستودع GitHub باستخدام الأمر التالي:
git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git
الآن بعد أن حصلت على عينة 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"],
},
}
الآن بعد أن تم تسجيل واجهة برمجة تطبيقات الويب وحددت نطاقاتها، قم بتكوين رمز واجهة برمجة تطبيقات الويب للعمل مع مستأجر 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
في عينة المجلد، افتح الملف 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
}
أنت الآن على استعداد لاختبار وصول Angular إلى واجهة برمجة التطبيقات. في هذه الخطوة، شغّل كل من واجهة برمجة تطبيقات الويب وعينة تطبيق Angular على الكمبيوتر المحلي. ثم سجل الدخول إلى تطبيق Angular، وحدد الزر TodoList لبدء طلب إلى واجهة برمجة التطبيقات المحمية.
افتح نافذة وحدة التحكم، وغيّر إلى الدليل الذي يحتوي على عينة واجهة برمجة تطبيقات الويب. على سبيل المثال:
cd active-directory-b2c-javascript-nodejs-webapi
شغّل الأوامر التالية:
npm install && npm update
node index.js
تعرض نافذة وحدة التحكم رقم المنفذ الذي يتم فيه استضافة التطبيق:
Listening on port 5000...
افتح نافذة وحدة تحكم أخرى، وغيّر إلى الدليل الذي يحتوي على عينة Angular. على سبيل المثال:
cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
شغّل الأوامر التالية:
npm install && npm update
npm start
تعرض نافذة وحدة التحكم رقم المنفذ الخاص بالمكان الذي يتم فيه استضافة التطبيق:
Listening on port 4200...
انتقل إلى http://localhost:4200 في المستعرض لديك لعرض التطبيق.
حدد تسجيل الدخول.
قم بإكمال عملية التسجيل أو تسجيل الدخول.
عند تسجيل الدخول بنجاح، يجب أن تشاهد ملف التعريف الخاص بك. من القائمة، حدد TodoList.
حدد Add لإضافة عناصر جديدة إلى القائمة، أو استخدم الأيقونات لحذف العناصر أو تحريرها.
في تطبيق الإنتاج، عادةً ما تكون إعادة التوجيه URI لتسجيل التطبيق هي نقطة نهاية يمكن الوصول إليها بشكل عام حيث يتم تشغيل تطبيقك، مثل https://contoso.com.
يمكنك إضافة وتعديل عناوين "URI" لإعادة التوجيه في تطبيقاتك المسجلة في أي وقت. تنطبق القيود التالية على إعادة توجيه عناوين "URI":
https.التدريب
الوحدة النمطية
اكتشف كيف يمكن الهوية الخارجية لـ Microsoft Entra توفير تجارب تسجيل دخول آمنة وسلسة للمستهلكين وعملاء الأعمال. استكشف إنشاء المستأجر وتسجيل التطبيق وتخصيص التدفق وأمان الحساب.
الشهادة
شهادة Microsoft معتمدة: شريك مسؤول تحديد الهوية والوصول - Certifications
إظهار ميزات معرف Microsoft Entra لتحديث حلول الهوية وتنفيذ الحلول المختلطة وتنفيذ حوكمة الهوية.