تكوين المصادقة في نموذج Node.js تطبيق ويب باستخدام Azure Active Directory B2C

2024-01-11

مهم

اعتبارا من 1 مايو 2025، لن يكون Azure AD B2C متوفرا للشراء للعملاء الجدد. تعرف على المزيد في الأسئلة المتداولة.

تستخدم هذه المقالة النموذجية نموذجا لتطبيق Node.js لتوضيح كيفية إضافة مصادقة Azure Active Directory B2C (Azure AD B2C) إلى تطبيق ويب Node.js. يمكن نموذج التطبيق المستخدمين من تسجيل الدخول وتسجيل الخروج وتحديث ملف التعريف وإعادة تعيين كلمة المرور باستخدام تدفقات مستخدم Azure AD B2C. يستخدم نموذج تطبيق الويب مكتبة مصادقة Microsoft (MSAL) للعقدة للتعامل مع المصادقة والتفويض.

في هذه المقالة، ستقوم بالمهام التالية:

تسجيل تطبيق ويب في مدخل Microsoft Azure.
إنشاء تدفقات مستخدم تسجيل الدخول والاشتراك المجمعة، وتحرير ملف التعريف، وإعادة تعيين كلمة المرور للتطبيق في مدخل Microsoft Azure.
قم بتحديث نموذج تطبيق Node لاستخدام تطبيق Azure AD B2C وتدفقات المستخدم.
اختبر نموذج التطبيق.

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

Node.js.
Visual Studio Code أو أي محرر تعليمات برمجية آخر.
مستأجر Azure AD B2C. إذا لم تكن قد أنشأت بالفعل الخاصة بك، فاتبع الخطوات الواردة في البرنامج التعليمي: إنشاء مستأجر Azure Active Directory B2C وتسجيل اسم المستأجر الخاص بك.

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

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

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

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

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

الخطوة 2: سجل تطبيق ويب

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

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

الخطوة 2.1: سجل التطبيق

لتسجيل تطبيق الويب ، اتبع الخطوات التالية:

سجل الدخول إلى مدخل Microsoft Azure.
إذا كان لديك حق الوصول إلى عدة مستأجرين، فحدد أيقونة الإعدادات في القائمة العلوية للتبديل إلى مستأجر Azure AD B2C من قائمة الدلائل + الاشتراكات .
في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
حدد App registrations، ثم حدد New registration.
ضمنالاسم، أدخل اسمًا للتطبيق (على سبيل المثال، webapp1).
ضمن أنواع الحسابات المدعومة، حدد الحسابات في أي موفر هوية أو دليل تنظيمي (لمصادقة المستخدمين بعمليات سير عمل المستخدمين).
بمقتضىRedirect URI، حددويب، ثم أدخلhttp://localhost:3000/redirectفي المربع النصي لعنوان URL.
ضمن الأذونات، حدد خانة الاختيار منح موافقة المسؤول على أذونات openid و offline_access .
حدد Register.
حدد نظرة عامة.
سجّلمعرف التطبيق (لكمبيوتر العميل) لاستخدامه لاحقًا عند تكوين تطبيق الويب.

الخطوة 2.2: إنشاء سر العميل لتطبيق ويب

إنشاء سر عميل لتطبيق الويب المسجل. يستخدم تطبيق الويب سر العميل لإثبات هويته عندما يطلب الرموز.

ضمن "Manage"، حدد "Certificates & secrets".
حدد سر عميل جديد.
في مربع Description، أدخل وصفاً لسر العميل (على سبيل المثال، clientsecret1).
من Expires ، حدد مدة صلاحية السر، ثم حدد Add .
سجّل قيمةالسر. ستستخدم هذه القيمة للتكوين في خطوة لاحقة.

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

تنزيل ملف zipأو نسخ عينة تطبيق الويب من GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

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

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

يحتوي المجلد views على ملفات المقاود لواجهة مستخدم التطبيق.

الخطوة 4: تثبيت التبعيات

افتح نافذة وحدة التحكم، ثم قم بالتغيير إلى الدليل الذي يحتوي على نموذج التطبيق Node.js. على سبيل المثال:
```
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp
```
قم بتشغيل الأوامر التالية لتثبيت تبعيات التطبيق:
```
npm install && npm update
```

الخطوة 5: تكوين نموذج تطبيق الويب

افتح تطبيق الويب الخاص بك في محرر تعليمات برمجية مثل Visual Studio Code. ضمن المجلد الجذر للمشروع، افتح ملف .env . يحتوي هذا الملف على معلومات حول موفر هوية Azure AD B2C. تحديث خصائص إعدادات التطبيق التالية:

مفتاح	قيمة
`APP_CLIENT_ID`	معرف التطبيق (العميل) لتطبيق الويب الذي قمت بتسجيله في الخطوة 2.1.
`APP_CLIENT_SECRET`	القيمة السرية للعميل لتطبيق الويب الذي قمت بإنشائه في الخطوة 2.2
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	مرجع تدفق المستخدم تسجيل الدخول والاشتراك مثل `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>`. استبدل `<your-tenant-name>` باسم المستأجر الخاص بك واسم `<sign-in-sign-up-user-flow-name>` تدفق مستخدم تسجيل الدخول والاشتراك مثل `B2C_1_susi`. تعرف على كيفية الحصول على اسم المستأجر الخاص بك.
`RESET_PASSWORD_POLICY_AUTHORITY`	مرجع إعادة تعيين تدفق مستخدم كلمة المرور مثل `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>`. استبدل `<your-tenant-name>` باسم المستأجر الخاص بك واسم `<reset-password-user-flow-name>` تدفق مستخدم إعادة تعيين كلمة المرور مثل `B2C_1_reset_password_node_app`.
`EDIT_PROFILE_POLICY_AUTHORITY`	سلطة تدفق مستخدم تحرير ملف التعريف مثل `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>`. استبدل `<your-tenant-name>` باسم المستأجر الخاص بك واسم `<reset-password-user-flow-name>` تدفق مستخدم إعادة تعيين كلمة المرور مثل `B2C_1_edit_profile_node_app`.
`AUTHORITY_DOMAIN`	مجال سلطة Azure AD B2C مثل `https://<your-tenant-name>.b2clogin.com`. استبدل `<your-tenant-name>` باسم المستأجر الخاص بك.
`APP_REDIRECT_URI`	يعيد التطبيق توجيه URI حيث سيقوم Azure AD B2C بإعادة استجابات المصادقة (الرموز المميزة). وهو يتطابق مع عنوان URI لإعادة التوجيه الذي قمت بتعيينه أثناء تسجيل تطبيقك في مدخل Microsoft Azure، ويجب أن يكون متاحا للجميع. اترك القيمة كما هي.
`LOGOUT_ENDPOINT`	نقطة نهاية تسجيل الخروج Azure AD B2C مثل `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000`. استبدل `<your-tenant-name>` باسم المستأجر الخاص بك واسم `<sign-in-sign-up-user-flow-name>` تدفق مستخدم تسجيل الدخول والاشتراك مثل `B2C_1_susi`.

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

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

تشغيل نموذج تطبيق الويب

يمكنك الآن اختبار نموذج التطبيق. تحتاج إلى بدء تشغيل خادم Node والوصول إليه من خلال متصفحك على http://localhost:3000.

في المحطة الطرفية الخاصة بك، قم بتشغيل التعليمات البرمجية التالية لبدء تشغيل خادم الويب Node.js:
```
node index.js
```
في المستعرض، انتقل إلى http://localhost:3000. من المفترض أن تظهر لك الصفحة التي تحتوي على زر تسجيل الدخول .

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

اختبار تحرير ملف التعريف

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

اختبار إعادة تعيين كلمة المرور

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

تسجيل الخروج من الاختبار

بعد تسجيل الدخول، حدد تسجيل الخروج. من المفترض أن تظهر لك الصفحة التي تحتوي على زر تسجيل الدخول .

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

تعرف على كيفية تخصيص وتحسين تجربة مصادقة Azure AD B2C لتطبيق الويب الخاص بك.
تعرف على كيفية تمكين المصادقة في تطبيق ويب Node الخاص بك باستخدام Azure AD B2C.