Share via

تكوين خيارات المصادقة في تطبيق Angular باستخدام Microsoft Azure Active Directory B2C

  • مقالة

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

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

تعرف على المقالة تكوين المصادقة في Angular SPA أو تمكين المصادقة في Angular SPA الخاص بك.

سلوك تسجيل الدخول والخروج

يمكنك تكوين التطبيق أحادي الصفحة لتسجيل دخول المستخدمين باستخدام MSAL.js بطريقتين:

  • نافذة منبثقة: تحدث المصادقة في نافذة منبثقة، ويتم الاحتفاظ بحالة التطبيق. قم باستخدام هذا الأسلوب إذا كنت لا تريد أن يبتعد المستخدمون عن صفحة التطبيق أثناء المصادقة. ومع ذلك، هناك مشكلات معروفة في النوافذ المنبثقة على Internet Explorer.
    • لتسجيل الدخول باستخدام النوافذ المنبثقة، في src/app/app.component.ts الفئة، استخدم loginPopup الأسلوب.
    • في src/app/app.module.ts الفئة، قم بتعيين interactionType السمة إلى InteractionType.Popup.
    • لتسجيل الخروج باستخدام النوافذ المنبثقة، في src/app/app.component.ts الفئة، استخدم logoutPopup الأسلوب. يمكنك أيضًا تكوين logoutPopup لإعادة توجيه النافذة الرئيسية إلى صفحة مختلفة، مثل الصفحة الرئيسية أو صفحة تسجيل الدخول، بعد اكتمال تسجيل الخروج عن طريق تمريرmainWindowRedirectUri كجزء من الطلب.
  • إعادة توجيه: يتم إعادة توجيه المستخدم إلى Microsoft Azure Active Directory B2C لإكمال تدفق المصادقة. قم باستخدام هذا الأسلوب إذا كان لدى المستخدمين قيود المستعرض أو النهج حيث يتم تعطيل النوافذ المنبثقة.
    • لتسجيل الدخول مع إعادة التوجيه، في src/app/app.component.ts الفئة، استخدم loginRedirect الأسلوب.
    • في src/app/app.module.ts الفئة، قم بتعيين interactionType السمة إلىInteractionType.Redirect.
    • لتسجيل الخروج مع إعادة التوجيه، في src/app/app.component.ts الفئة، قم باستخدام logoutRedirect الأسلوب. قم بتكوين URI الذي يجب إعادة التوجيه إليه بعد تسجيل الخروج عن طريق تعيين postLogoutRedirectUri. يجب إضافة URI هذا ك URI إعادة توجيه في تسجيل التطبيق الخاص بك.

توضح العينة التالية كيفية تسجيل الدخول وتسجيل الخروج:

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

تحتوي مكتبة MSAL Angular على ثلاثة تدفقات لتسجيل الدخول: تسجيل الدخول التفاعلي (حيث يحدد المستخدم زر تسجيل الدخول)، وMSAL Guard، وMSAL Interceptor. تسري تكوينات MSAL Guard و MSAL Interceptor عندما يحاول المستخدم الوصول إلى مورد محمي بدون رمز وصول صالح. في مثل هذه الحالات، مكتبة MSAL تفرض المستخدم لتسجيل الدخول.

توضح العينات التالية كيفية تكوين MSAL Guard وMSAL Interceptor لتسجيل الدخول باستخدام النافذة المنبثقة أو إعادة توجيه:

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

ملء اسم تسجيل الدخول مسبقًا

أثناء قيام المستخدم بتسجيل الدخول، قد يستهدف تطبيقك مستخدماً معيناً. عندما يستهدف أحد التطبيقات مستخدماً، يمكنه تحديد معلمة طلب البحث login_hint في طلب التفويض باسم تسجيل دخول المستخدم. يملأ Microsoft Azure Active Directory B2C اسم تسجيل الدخول تلقائياً، ويحتاج المستخدم إلى توفير كلمة المرور فقط.

لملء اسم تسجيل الدخول مسبقاً، قم بما يلي:

  1. إذا كنت تستخدم نهج مخصص، فأضف مطالبة الإدخال المطلوبة كما هو موضح في إعداد تسجيل الدخول المباشر.
  2. قم بإنشاء أو استخدم عنصر تكوين موجود PopupRequest أو RedirectRequest MSAL.
  3. قم بتعيين السمة loginHint مع تلميح تسجيل الدخول المقابل.

توضح مقتطفات التعليمات البرمجية التالية كيفية تمرير معلمة تلميح تسجيل الدخول. وتستخدم bob@contoso.com كقيمة السمة.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

حدد موفر الهوية مسبقًا

إذا قمت بتكوين رحلة «sign-in» لتطبيقك من أجل تضمين الحسابات الاجتماعية، مثل Facebook أو LinkedIn أو Google، يمكنك تحديد المعلمة domain_hint. توفر معلمة الاستعلام تلميح إلى Azure AD B2C حول موفر الهوية الاجتماعية التي يجب استخدامها لـ «sign-in». على سبيل المثال، إذا حدد التطبيق domain_hint=facebook.com، ينتقل تدفق تسجيل الدخول مباشرة إلى صفحة تسجيل الدخول إلى Facebook.

لإعادة توجيه المستخدمين إلى موفر هوية خارجي، قم بما يلي:

  1. تحقق من اسم المجال لموفر الهوية الخارجي الخاص بك. لمزيد من المعلومات، راجع إعادة توجيه تسجيل الدخول إلى موفر مزامنة خدمة اجتماعية.
  2. قم بإنشاء أو استخدم عنصر تكوين موجود PopupRequest أو RedirectRequest MSAL.
  3. قم بتعيين السمة domainHint مع تلميح المجال المقابل.

توضح مقتطفات التعليمات البرمجية التالية كيفية تمرير معلمة تلميح المجال. يستخدمون facebook.com كقيمة السمة.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

تحديد لغة واجهة المستخدم

يتيح تخصيص اللغة في Microsoft Azure Active Directory B2C تدفق المستخدم لاستيعاب مجموعة متنوعة من اللغات لتناسب احتياجات عملائك. لمزيد من المعلومات، راجع تخصيص اللغة.

لتعيين اللغة المفضلة، قم بما يلي:

  1. تكوين تخصيص لغة الكمبيوتر.
  2. قم بإنشاء أو استخدام عنصر تكوين PopupRequest أو RedirectRequest MSAL بسمات extraQueryParameters.
  3. قم بإضافة المعلمة ui_locales باستخدام التعليمات البرمجية للغة المقابلة (على سبيل المثال، extraQueryParameters).

توضح مقتطفات التعليمات البرمجية التالية كيفية تمرير معلمة تلميح المجال. يستخدمون es-es كقيمة السمة.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

تمرير معلمة سلسلة استعلام مخصصة

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

لتمرير معلمة سلسلة طلب بحث مخصصة، قم بما يلي:

  1. قم بتكوينعنصر ContentDefinitionParameters.
  2. قم بإنشاء أو استخدام عنصر تكوين PopupRequest أو RedirectRequest MSAL بسمات extraQueryParameters.
  3. اضف معلمة سلسلة الاستعلام المخصصة، مثل campaignId. قم بتعيين قيمة المعلمة.

توضح مقتطفات التعليمات البرمجية التالية كيفية تمرير معلمة سلسلة استعلام مخصصة. ويستخدمونgermany-promotion كقيمة السمة.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

تمرير تلميح رمز مميز معرف

يمكن لتطبيق الطرف المعتمد إرسال رمز ويب JSON وارد (JWT) كجزء من طلب تفويض OAuth2. الرمز المميز الوارد هو تلميح حول المستخدم أو طلب التفويض. يتحقق Microsoft Azure Active Directory B2C من صحة الرمز المميز ثم يستخرج المطالبة.

لتضمين تلميح رمز مميز للمعرف في طلب المصادقة، قم بما يلي:

  1. في نهجك المخصصة، حدد ملف تعريف تقني تلميح رمز مميز للمعرف.
  2. قم بإنشاء أو استخدام عنصر تكوين PopupRequest أو RedirectRequest MSAL بسمات extraQueryParameters.
  3. أضف المعلمة id_token_hint مع المتغير المقابل الذي يخزن الرمز المميز للمعرف.

توضح مقتطفات التعليمات البرمجية التالية كيفية تحديد تلميح رمز مميز للمعرف:

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

استخدام مجال مخصص

باستخدام custom domain، يمكنك وضع علامة تجارية كاملة على عنوان URL للمصادقة. من منظور المستخدم، يظل المستخدمون في المجال الخاص بك أثناء عملية المصادقة، بدلاً من إعادة توجيههم إلى اسم مجال Microsoft Azure Active Directory B2C b2clogin.com.

لإزالة كافة الإشارات إلى "b2c" في عنوان URL، يمكنك أيضاً استبدال اسم مستأجر B2C الخاص بك، contoso.onmicrosoft.com، في عنوان URL لطلب المصادقة مع معرف المستأجر GUID. على سبيل المثال، يمكنك تغيير https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ إلى https://account.contosobank.co.uk/<tenant ID GUID>/.

لاستخدام المجال المخصص لمعرف المستأجر الخاص بك في عنوان URL للمصادقة، اتبع الإرشادات الموجودة في تمكين المجالات المخصصة . افتح src/app/auth-config.ts عنصر تكوين MSAL وتغيير authorities واستخدام اسم المجال المخصص بك معرف knownAuthorities المستأجر.

يظهر JavaScript التالي عنصر تكوين MSAL قبل التغيير:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

يظهر JavaScript التالي عنصر تكوين MSAL بعد التغيير:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

تكوين التسجيل

تنشئ مكتبة MSAL رسائل سجل يمكن أن تساعد في تشخيص المشكلات. يُمكن للتطبيق تكوين التسجيل. يُمكن أن يمنحك التطبيق أيضًا تحكمًا مخصصًا في مستوى التفاصيل وما إذا كان يتم تسجيل البيانات الشخصية والتنظيمية أم لا.

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

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

بشكل افتراضي، لا يلتقط مسجل MSAL أي بيانات شخصية أو تنظيمية. تمنحك المكتبة خيار تمكين تسجيل البيانات الشخصية والتنظيمية إذا قررت القيام بذلك.

لتكوين Angular التسجيل، في src/app/auth-config.ts، قم بتكوين المفاتيح التالية:

  • loggerCallbackهو دالة رد الاتصال المسجل.
  • logLevel يتيح لك تحديد مستوى التسجيل. القيم المحتملة:ErrorوWarningوInfoوVerbose.
  • piiLoggingEnabled تمكين إدخال البيانات الشخصية. القيم المحتملة: true أو false.

يوضح مقتطف القصاصة البرمجية التالي كيفية تكوين تسجيل MSAL:

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

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